Difference between revisions of "BGRABitmap tutorial 6"

From Lazarus wiki
Jump to navigationJump to search
m (Text replace - "delphi>" to "syntaxhighlight>")
m (Fixed syntax highlighting)
(One intermediate revision by one other user not shown)
Line 11: Line 11:
 
=== Add a painting handler ===
 
=== Add a painting handler ===
  
With the object inspector, add an OnPaint handler and write :
+
With the object inspector, add an OnPaint handler and write:
<syntaxhighlight>procedure TForm1.FormPaint(Sender: TObject);
+
 
 +
<syntaxhighlight lang="pascal">
 +
procedure TForm1.FormPaint(Sender: TObject);
 
var image: TBGRABitmap;
 
var image: TBGRABitmap;
 
     c: TBGRAPixel;
 
     c: TBGRAPixel;
Line 23: Line 25:
 
   image.Draw(Canvas,0,0,True);
 
   image.Draw(Canvas,0,0,True);
 
   image.free;
 
   image.free;
end;</syntaxhighlight>
+
end;
 +
</syntaxhighlight>
  
 
=== Run the program ===
 
=== Run the program ===
Line 33: Line 36:
 
=== Change join style ===
 
=== Change join style ===
  
If you want round corners, you can specify :
+
If you want round corners, you can specify:
<syntaxhighlight>   image.JoinStyle := pjsRound;</syntaxhighlight>
+
 
 +
<syntaxhighlight lang="pascal">
 +
    image.JoinStyle := pjsRound;
 +
</syntaxhighlight>
  
 
=== Run the program ===
 
=== Run the program ===
Line 45: Line 51:
  
 
You can mix join styles for a rectangle like this:
 
You can mix join styles for a rectangle like this:
<syntaxhighlight>   image.FillRoundRectAntialias(80,80,300,200, 20,20, c, [rrTopRightSquare,rrBottomLeftSquare]);   
+
 
 +
<syntaxhighlight lang="pascal">
 +
    image.FillRoundRectAntialias(80,80,300,200, 20,20, c, [rrTopRightSquare,rrBottomLeftSquare]);   
 
</syntaxhighlight>
 
</syntaxhighlight>
  
Line 54: Line 62:
 
=== Change pen style ===
 
=== Change pen style ===
  
You can draw a dotted line like this :
+
You can draw a dotted line like this:
<syntaxhighlight>   image.JoinStyle := pjsBevel;
+
 
 +
<syntaxhighlight lang="pascal">
 +
    image.JoinStyle := pjsBevel;
 
     image.PenStyle := psDot;
 
     image.PenStyle := psDot;
 
     image.DrawPolyLineAntialias([PointF(40,200), PointF(120,100), PointF(170,140), PointF(250,60)],c,10);
 
     image.DrawPolyLineAntialias([PointF(40,200), PointF(120,100), PointF(170,140), PointF(250,60)],c,10);
Line 66: Line 76:
 
=== Change line cap ===
 
=== Change line cap ===
  
You can draw a polyline with a square cap like this :
+
You can draw a polyline with a square cap like this:
<syntaxhighlight>   image.JoinStyle := pjsBevel;
+
 
 +
<syntaxhighlight lang="pascal">
 +
    image.JoinStyle := pjsBevel;
 
     image.LineCap := pecSquare;
 
     image.LineCap := pecSquare;
 
     image.PenStyle := psSolid;
 
     image.PenStyle := psSolid;
Line 79: Line 91:
 
You can draw a line which is opened, i.e. the end of the line is rounded inside.
 
You can draw a line which is opened, i.e. the end of the line is rounded inside.
  
<syntaxhighlight>   image.DrawPolyLineAntialias([PointF(40,200), PointF(120,100), PointF(170,140), PointF(250,60)],c,10,False);</syntaxhighlight>
+
<syntaxhighlight lang="pascal">
 +
    image.DrawPolyLineAntialias([PointF(40,200), PointF(120,100), PointF(170,140), PointF(250,60)],c,10,False);</syntaxhighlight>
 +
 
 
[[Image:BGRATutorial6f.png]]
 
[[Image:BGRATutorial6f.png]]
  
 
This way you can connect lines one after another without drawing the junction twice, which is useful with semi-transparent drawing. You can compare it like this:
 
This way you can connect lines one after another without drawing the junction twice, which is useful with semi-transparent drawing. You can compare it like this:
<syntaxhighlight>   c := BGRA(0,0,0,128);
+
 
 +
<syntaxhighlight lang="pascal">
 +
    c := BGRA(0,0,0,128);
  
 
     image.DrawLineAntialias(40,150, 120,50, c, 10);
 
     image.DrawLineAntialias(40,150, 120,50, c, 10);
Line 91: Line 107:
 
     image.DrawLineAntialias(40,250, 120,150, c, 10, False);
 
     image.DrawLineAntialias(40,250, 120,150, c, 10, False);
 
     image.DrawLineAntialias(120,150, 170,190, c, 10, False);
 
     image.DrawLineAntialias(120,150, 170,190, c, 10, False);
     image.DrawLineAntialias(170,190, 250,110, c, 10, True);</syntaxhighlight>
+
     image.DrawLineAntialias(170,190, 250,110, c, 10, True);
 +
</syntaxhighlight>
 +
 
 
[[Image:Tutorial6g.png]]
 
[[Image:Tutorial6g.png]]
  
Line 97: Line 115:
  
 
[[Category:Graphics]]
 
[[Category:Graphics]]
 +
[[Category: BGRABitmap]]

Revision as of 00:54, 2 January 2020

Deutsch (de) English (en) español (es) français (fr)


Home | Tutorial 1 | Tutorial 2 | Tutorial 3 | Tutorial 4 | Tutorial 5 | Tutorial 6 | Tutorial 7 | Tutorial 8 | Tutorial 9 | Tutorial 10 | Tutorial 11 | Tutorial 12 | Tutorial 13 | Tutorial 14 | Tutorial 15 | Tutorial 16 | Edit

This tutorial shows you how to use different line styles and shapes.

Create a new project

Create a new project and add a reference to BGRABitmap, the same way as in the first tutorial.

Add a painting handler

With the object inspector, add an OnPaint handler and write:

procedure TForm1.FormPaint(Sender: TObject);
var image: TBGRABitmap;
    c: TBGRAPixel;
begin
  image := TBGRABitmap.Create(ClientWidth,ClientHeight,ColorToBGRA(ColorToRGB(clBtnFace)));
  c := ColorToBGRA(ColorToRGB(clWindowText)); 

  image.RectangleAntialias(80,80,300,200,c,50);

  image.Draw(Canvas,0,0,True);
  image.free;
end;

Run the program

This should draw a rectangle with a wide black pen.

BGRATutorial6a.png

Change join style

If you want round corners, you can specify:

    image.JoinStyle := pjsRound;

Run the program

This should draw a rectangle with a wide black pen with rounded corners.

BGRATutorial6b.png

Mix join styles

You can mix join styles for a rectangle like this:

    image.FillRoundRectAntialias(80,80,300,200, 20,20, c, [rrTopRightSquare,rrBottomLeftSquare]);

This function use round corners by default, but you can override it with square corners or bevel corners. You should obtain the following image.

BGRATutorial6e.png

Change pen style

You can draw a dotted line like this:

    image.JoinStyle := pjsBevel;
    image.PenStyle := psDot;
    image.DrawPolyLineAntialias([PointF(40,200), PointF(120,100), PointF(170,140), PointF(250,60)],c,10);

You should obtain the following image. Notice that line begins with a round cap.

Tutorial6c.png

Change line cap

You can draw a polyline with a square cap like this:

    image.JoinStyle := pjsBevel;
    image.LineCap := pecSquare;
    image.PenStyle := psSolid;
    image.DrawPolyLineAntialias([PointF(40,200), PointF(120,100), PointF(170,140), PointF(250,60)],c,10);

BGRATutorial6d.png

Opened line drawing

You can draw a line which is opened, i.e. the end of the line is rounded inside.

    image.DrawPolyLineAntialias([PointF(40,200), PointF(120,100), PointF(170,140), PointF(250,60)],c,10,False);

BGRATutorial6f.png

This way you can connect lines one after another without drawing the junction twice, which is useful with semi-transparent drawing. You can compare it like this:

    c := BGRA(0,0,0,128);

    image.DrawLineAntialias(40,150, 120,50, c, 10);
    image.DrawLineAntialias(120,50, 170,90, c, 10);
    image.DrawLineAntialias(170,90, 250,10, c, 10);

    image.DrawLineAntialias(40,250, 120,150, c, 10, False);
    image.DrawLineAntialias(120,150, 170,190, c, 10, False);
    image.DrawLineAntialias(170,190, 250,110, c, 10, True);

Tutorial6g.png

Previous tutorial (layers and masks) Next tutorial (splines)