Difference between revisions of "BGRABitmap tutorial 6"

From Lazarus wiki
Jump to navigationJump to search
(created)
 
m (Fixed syntax highlighting)
(7 intermediate revisions by 5 users not shown)
Line 1: Line 1:
 +
{{BGRABitmap_tutorial_6}}
 +
 +
{{BGRABitmap_tutorial_index}}
 +
 
This tutorial shows you how to use different line styles and shapes.
 
This tutorial shows you how to use different line styles and shapes.
  
Line 7: 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:
<delphi>procedure TForm1.FormPaint(Sender: TObject);
+
 
 +
<syntaxhighlight lang="pascal">
 +
procedure TForm1.FormPaint(Sender: TObject);
 
var image: TBGRABitmap;
 
var image: TBGRABitmap;
 
     c: TBGRAPixel;
 
     c: TBGRAPixel;
Line 19: Line 25:
 
   image.Draw(Canvas,0,0,True);
 
   image.Draw(Canvas,0,0,True);
 
   image.free;
 
   image.free;
end;</delphi>
+
end;
 +
</syntaxhighlight>
  
 
=== Run the program ===
 
=== Run the program ===
Line 29: Line 36:
 
=== Change join style ===
 
=== Change join style ===
  
If you want round corners, you can specify :
+
If you want round corners, you can specify:
<delphi>   image.JoinStyle := pjsRound;</delphi>
+
 
 +
<syntaxhighlight lang="pascal">
 +
    image.JoinStyle := pjsRound;
 +
</syntaxhighlight>
  
 
=== Run the program ===
 
=== Run the program ===
Line 37: Line 47:
  
 
[[Image:BGRATutorial6b.png]]
 
[[Image:BGRATutorial6b.png]]
 +
 +
=== Mix join styles ===
 +
 +
You can mix join styles for a rectangle like this:
 +
 +
<syntaxhighlight lang="pascal">
 +
    image.FillRoundRectAntialias(80,80,300,200, 20,20, c, [rrTopRightSquare,rrBottomLeftSquare]); 
 +
</syntaxhighlight>
 +
 +
This function use round corners by default, but you can override it with square corners or bevel corners. You should obtain the following image.
 +
 +
[[Image:BGRATutorial6e.png]]
  
 
=== Change pen style ===
 
=== Change pen style ===
  
You can draw a dotted line like this :
+
You can draw a dotted line like this:
<delphi>   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);
</delphi>
+
</syntaxhighlight>
  
 
You should obtain the following image. Notice that line begins with a round cap.
 
You should obtain the following image. Notice that line begins with a round cap.
Line 52: 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:
<delphi>   image.JoinStyle := pjsBevel;
+
 
 +
<syntaxhighlight lang="pascal">
 +
    image.JoinStyle := pjsBevel;
 
     image.LineCap := pecSquare;
 
     image.LineCap := pecSquare;
 
     image.PenStyle := psSolid;
 
     image.PenStyle := psSolid;
 
     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);
</delphi>
+
</syntaxhighlight>
  
 
[[Image:BGRATutorial6d.png]]
 
[[Image:BGRATutorial6d.png]]
  
[[BGRABitmap tutorial 5|Previous tutorial (layers and masks)]]
+
=== Opened line drawing ===
 +
 
 +
You can draw a line which is opened, i.e. the end of the line is rounded inside.
 +
 
 +
<syntaxhighlight lang="pascal">
 +
    image.DrawPolyLineAntialias([PointF(40,200), PointF(120,100), PointF(170,140), PointF(250,60)],c,10,False);</syntaxhighlight>
 +
 
 +
[[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:
 +
 
 +
<syntaxhighlight lang="pascal">
 +
    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);
 +
</syntaxhighlight>
 +
 
 +
[[Image:Tutorial6g.png]]
 +
 
 +
[[BGRABitmap tutorial 5|Previous tutorial (layers and masks)]] [[BGRABitmap tutorial 7|Next tutorial (splines)]]
  
 
[[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)