Sign in Join
Wiki copytemporary

BGRABitmap tutorial 6: what changed

Revision 0 to 1. Removed lines have a minus sign; added lines have a plus sign.

Title: BGRABitmap tutorial 6

OldNewLine
1+This tutorial shows you how to use different line styles and shapes.
2+
3+### Create a new project
4+
5+Create a new project and add a reference to [[BGRABitmap]], the same way as in [[BGRABitmap tutorial|the first tutorial]].
6+
7+### Add a painting handler
8+
9+With the object inspector, add an OnPaint handler and write:
10+
11+``` pascal
12+procedure TForm1.FormPaint(Sender: TObject);
13+var image: TBGRABitmap;
14+ c: TBGRAPixel;
15+begin
16+ image := TBGRABitmap.Create(ClientWidth, ClientHeight, clBtnFace);
17+ c := clWindowText;
18+
19+ image.RectangleAntialias(80,80,300,200, c, 50);
20+
21+ image.Draw(Canvas,0,0,True);
22+ image.free;
23+end;
24+```
25+
26+### Run the program
27+
28+This should draw a rectangle with a wide black pen.
29+
30+<figure>
31+<img src="BGRATutorial6a.png" title="BGRATutorial6a.png" />
32+<figcaption>BGRATutorial6a.png</figcaption>
33+</figure>
34+
35+### Change join style
36+
37+If you want round corners, you can specify:
38+
39+``` pascal
40+ image.JoinStyle := pjsRound;
41+```
42+
43+### Run the program
44+
45+This should draw a rectangle with a wide black pen with rounded corners.
46+
47+<figure>
48+<img src="BGRATutorial6b.png" title="BGRATutorial6b.png" />
49+<figcaption>BGRATutorial6b.png</figcaption>
50+</figure>
51+
52+### Mix join styles
53+
54+You can mix join styles for a rectangle like this:
55+
56+``` pascal
57+ image.FillRoundRectAntialias(80,80,300,200, 20,20, c, [rrTopRightSquare,rrBottomLeftSquare]);
58+```
59+
60+This function use round corners by default, but you can override it with square corners or bevel corners. You should obtain the following image.
61+
62+<figure>
63+<img src="BGRATutorial6e.png" title="BGRATutorial6e.png" />
64+<figcaption>BGRATutorial6e.png</figcaption>
65+</figure>
66+
67+### Change pen style
68+
69+You can draw a dotted line like this:
70+
71+``` pascal
72+ image.JoinStyle := pjsBevel;
73+ image.PenStyle := psDot;
74+ image.DrawPolyLineAntialias([PointF(40,200), PointF(120,100), PointF(170,140), PointF(250,60)],c,10);
75+```
76+
77+<table>
78+
79+<tr>
80+
81+<td bgcolor="#FFFFe0" style="border: 1px solid black; padding: 4px; text-align: center; border-radius:5px" width="30%">
82+
83+Note that the pen style can be defined independently of a bitmap by using the TBGRAPenStroker class of the BGRAPen[1](https://github.com/bgrabitmap/bgrabitmap/blob/master/bgrabitmap/bgrapen.pas) unit.
84+
85+</td>
86+
87+</tr>
88+
89+</table>
90+
91+You should obtain the following image. Notice that line begins with a round cap.
92+
93+<figure>
94+<img src="Tutorial6c.png" title="Tutorial6c.png" />
95+<figcaption>Tutorial6c.png</figcaption>
96+</figure>
97+
98+### Change line cap
99+
100+You can draw a polyline with a square cap like this:
101+
102+``` pascal
103+ image.JoinStyle := pjsBevel;
104+ image.LineCap := pecSquare;
105+ image.PenStyle := psSolid;
106+ image.DrawPolyLineAntialias([PointF(40,200), PointF(120,100), PointF(170,140), PointF(250,60)],c,10);
107+```
108+
109+<figure>
110+<img src="BGRATutorial6d.png" title="BGRATutorial6d.png" />
111+<figcaption>BGRATutorial6d.png</figcaption>
112+</figure>
113+
114+### Opened line drawing
115+
116+You can draw a line which is opened, i.e. the end of the line is rounded inside.
117+
118+``` pascal
119+ image.DrawPolyLineAntialias([PointF(40,200), PointF(120,100), PointF(170,140), PointF(250,60)],c,10,False);
120+```
121+
122+<figure>
123+<img src="BGRATutorial6f.png" title="BGRATutorial6f.png" />
124+<figcaption>BGRATutorial6f.png</figcaption>
125+</figure>
126+
127+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:
128+
129+``` pascal
130+ c := BGRA(0,0,0,128);
131+
132+ image.DrawLineAntialias(40,150, 120,50, c, 10);
133+ image.DrawLineAntialias(120,50, 170,90, c, 10);
134+ image.DrawLineAntialias(170,90, 250,10, c, 10);
135+
136+ image.DrawLineAntialias(40,250, 120,150, c, 10, False);
137+ image.DrawLineAntialias(120,150, 170,190, c, 10, False);
138+ image.DrawLineAntialias(170,190, 250,110, c, 10, True);
139+```
140+
141+<figure>
142+<img src="Tutorial6g.png" title="Tutorial6g.png" />
143+<figcaption>Tutorial6g.png</figcaption>
144+</figure>
145+
146+[[BGRABitmap tutorial 5|Previous tutorial (layers and masks)]] [[BGRABitmap tutorial 7|Next tutorial (splines)]]
147+
148+---
149+*From the Free Pascal wiki, page "BGRABitmap tutorial 6", as it stood on 2024-02-15 after a change by Circular, out of the wiki's dump of 2024-05-26. Copyright stays with the author who wrote it, according to the old wiki's [[Licensing]] page. If you have concerns about this material, [message the admin](/wiki-contact).*
150+Category: BGRABitmap
151+Category: Graphics

Back to history