Difference between revisions of "BGRABitmap tutorial 6"
(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: |
− | < | + | |
+ | <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;</ | + | 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 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: |
− | < | + | |
+ | <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> |
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: |
− | < | + | |
+ | <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]] |
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.
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);
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)