Difference between revisions of "BGRABitmap tutorial 6"
(mix join styles) |
(→Add a painting handler: auto-convert color type) |
||
(9 intermediate revisions by 6 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: |
− | < | + | |
+ | <syntaxhighlight lang="pascal"> | ||
+ | procedure TForm1.FormPaint(Sender: TObject); | ||
var image: TBGRABitmap; | var image: TBGRABitmap; | ||
c: TBGRAPixel; | c: TBGRAPixel; | ||
begin | begin | ||
− | image := TBGRABitmap.Create(ClientWidth,ClientHeight, | + | image := TBGRABitmap.Create(ClientWidth, ClientHeight, clBtnFace); |
− | c := | + | c := clWindowText; |
− | image.RectangleAntialias(80,80,300,200,c,50); | + | image.RectangleAntialias(80,80,300,200, c, 50); |
image.Draw(Canvas,0,0,True); | image.Draw(Canvas,0,0,True); | ||
image.free; | image.free; | ||
− | end;</ | + | 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: |
− | < | + | |
+ | <syntaxhighlight lang="pascal"> | ||
+ | image.JoinStyle := pjsRound; | ||
+ | </syntaxhighlight> | ||
=== Run the program === | === Run the program === | ||
Line 41: | Line 51: | ||
You can mix join styles for a rectangle like this: | 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. | This function use round corners by default, but you can override it with square corners or bevel corners. You should obtain the following image. | ||
Line 50: | 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 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); | ||
− | </ | + | </syntaxhighlight> |
+ | <table><tr> | ||
+ | <td bgcolor="#FFFFe0" style="border: 1px solid black; padding: 4px; text-align: center; border-radius:5px" width="30%"> | ||
+ | Note that the pen style can be defined independently of a bitmap by using the TBGRAPenStroker class of the BGRAPen[https://github.com/bgrabitmap/bgrabitmap/blob/master/bgrabitmap/bgrapen.pas] unit.</td></tr></table> | ||
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 62: | Line 79: | ||
=== 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 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); | ||
− | </ | + | </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]] |
Latest revision as of 09:42, 15 February 2024
│ 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, clBtnFace);
c := 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.
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.
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.
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);
Note that the pen style can be defined independently of a bitmap by using the TBGRAPenStroker class of the BGRAPen[1] unit. |
You should obtain the following image. Notice that line begins with a round cap.
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);
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);
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);
Previous tutorial (layers and masks) Next tutorial (splines)