Sign in Join
Wiki copytemporary

Sample Graphics: what changed

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

OldNewLine
11This gallery is to show the designs can be created from Lazarus and drawing tools, like BGRABitmap.
22
33Most examples are included in [[BGRABitmap]] & [[BGRAControls]] packages.
44
55You can grab more BGRABitmap demos here <https://github.com/bgrabitmap/bgracontest>
66
77### Gradient Graphics
88
99**Description:** Shows how to create buttons and gradients with and without transparency in Lazarus using [[BGRABitmap]] and an enhanced version of [[Double Gradient]] that supports alpha.
1010
1111**Notes:** Tested on Win32. Tested on Linux with Kubuntu and Qt, work fine
1212
1313**Win32:**
1414
15-<figure>
16-<img src="gdgfx.png" title="gdgfx.png" />
17-<figcaption>gdgfx.png</figcaption>
18-</figure>
15+![](/wiki-images/5/52/Gdgfx.png)
1916
2017**Kubuntu 10.04 with Qt:**
2118
22-<figure>
23-<img src="gdgfx_qt.png" title="gdgfx_qt.png" />
24-<figcaption>gdgfx_qt.png</figcaption>
25-</figure>
19+![](/wiki-images/1/15/Gdgfx_qt.png)
2620
2721Top-Left: 'like flash player setup button' / Top-Right: 'like win7 explorer toolbar' / Bottom: double gradient with alpha / Background: same as bottom.
2822
2923#### Flash Player Button
3024
3125- Also you can use [[BGRAButton Gallery|Like Flash Player Setup Controls]] using [[BGRAControls]] to draw the button & related stuff.
3226
3327Add a new TPaintBox, set 'btn1' as name. Go OnPaint event and add this code:
3428
3529``` pascal
3630var
3731 tempbmp1, tempbmp2: TBGRABitmap;
3832begin
3933 // Background Gradient
4034 tempbmp1:=TBGRABitmap.Create(btn1.Width,btn1.Height,BGRA(104,104,104,255));
4135 tempbmp1.Canvas.GradientFill(Rect(1,Round(btn1.Height*0.25),btn1.Width-1,btn1.Height-1),$686868,$404040,gdVertical);
4236
4337 // Frame Border
4438 tempbmp1.Canvas.Brush.Color:=$181818;
4539 tempbmp1.Canvas.FrameRect(btn1.ClientRect);
4640
4741 // Light Gradient
4842 tempbmp2:=TBGRABitmap.Create(btn1.Width,btn1.Height,BGRA(0,0,0,0));
4943 tempbmp2.GradientFill(1,1,btn1.Width-1,btn1.Height-1,
5044 BGRA(255,255,255,34),
5145 BGRA(255,255,255,10), gtLinear,
5246 PointF(btn1.ClientRect.Right,btn1.ClientRect.Top),
5347 PointF(btn1.ClientRect.Right,btn1.ClientRect.Bottom),
5448 dmDrawWithTransparency,True,False);
5549 tempbmp2.AlphaFillRect(2,2,btn1.Width-2,btn1.Height-2,0);
5650
5751 // Merge Bitmaps
5852 //tempbmp1.Canvas.Draw(0,0,tempbmp2.Bitmap);
5953 tempbmp2.Draw(tempbmp1.Canvas,0,0,False);
6054
6155 // Paint in Canvas
6256 //btn1.Canvas.Draw(0,0,tempbmp1.Bitmap);
6357 tempbmp1.Draw(btn1.Canvas,0,0,False);
6458
6559 // Free Bitmaps
6660 tempbmp1.Free;
6761 tempbmp2.Free;
6862end;
6963```
7064
7165#### Windows 7 Explorer Toolbar
7266
7367- Also you can use [[BGRAButton Gallery|Like Windows 7 Explorer ToolBar Control]] using [[BGRAControls]] to draw the Button.
7468
75-<figure>
76-<img src="skintoolbar.png" title="skintoolbar.png" />
77-<figcaption>skintoolbar.png</figcaption>
78-</figure>
69+![](/wiki-images/1/15/Skintoolbar.png)
7970
8071Add a new TToolBar with a TToolButton and set this properties:
8172
8273`AutoSize=True; ButtonHeight=48; EdgeBorders=[]; EdgeInner=esNone; EdgeOuter=esNone; ShowCaptions=True; Transparent=True;`
8374
8475Then go Form1 OnPaint event and add this code:
8576
8677``` pascal
8778procedure TForm1.FormPaint(Sender: TObject);
8879var
8980 gradBmp: TBGRABitmap;
9081begin
9182 with ToolBar1 do begin
9283 gradBmp := DoubleGradientAlphaFill(ClientRect,BGRA(245,250,255,255),BGRA(230,240,250,255),
9384 BGRA(220,230,244,255),BGRA(221,233,247,255),gdVertical,gdVertical,gdVertical,0.50);
9485 gradBmp.Rectangle(0,0,Width,Height-2,BGRA(255,255,255,100),dmDrawWithTransparency);
9586 gradBmp.SetHorizLine(0,Height-1,Width-1,BGRA(160,175,195,255));
9687 gradBmp.SetHorizLine(0,Height-2,Width-1,BGRA(205,218,234,255));
9788 end;
9889 gradBmp.Draw(Canvas,ToolBar1.ClientRect);
9990 gradBmp.Free;
10091end;
10192```
10293
10394#### Double Gradient with Alpha
10495
10596Add a new TPaintBox, set 'btn3' as name. Go OnPaint event and add this code:
10697
10798``` pascal
10899var
109100 myBitmap: TBGRABitmap;
110101begin
111102 myBitmap:= DoubleGradientAlphaFill(
112103 btn3.ClientRect,
113104 BGRA(0,0,0,100),BGRA(255,255,255,100),
114105 BGRA(100,100,100,100),BGRA(150,150,150,100),
115106 gdVertical,gdVertical,gdVertical,0.5);
116107 //btn3.Canvas.Draw(0,0,myBitmap.Bitmap);
117108 myBitmap.Draw(btn3.Canvas,0,0,False);
118109 myBitmap.Free;
119110end;
120111```
121112
122113### Progress Bars
123114
124115A progress bar is a component in a graphical user interface used to convey the progress of a task, such as a download or file transfer.
125116
126117#### Flash Player Progress Bar
127118
128119- Also you can use [[BGRAControls|BGRAFlashProgressBar]] control in [[BGRAControls]].
129120
130121![](/wiki-images/6/6c/Flprogressbar.png) 'Like flash player setup progress bar'. Requires [[BGRABitmap]] and [[Double Gradient]] with Alpha.
131122
132123**Notes:** Tested on Win32, Kubuntu 10.04 with GTK and Qt.
133124
134125Add a new TPaintBox, set 'progressbar' as name. Go OnPaint event and add this code:
135126
136127``` pascal
137128var
138129 ABitmap, ABitmap2: TBGRABitmap; ARect: TRect;
139130begin
140131 // Initialization
141132 // Self.Color:=$004D4D4D;
142133 ABitmap:=TBGRABitmap.Create(progressbar.Width,progressbar.Height);
143134 ARect:=progressbar.ClientRect;
144135
145136 // Percent of Progress
146137 ARect.Right:=Round(ABitmap.Width*0.75);
147138
148139 // Background Gradient
149140 ABitmap.Canvas.GradientFill(progressbar.ClientRect,$303030,$323232,gdVertical);
150141
151142 // Background Border
152143 ABitmap.Rectangle(0,0,ABitmap.Width,ABitmap.Height,BGRA(28,28,28,255),dmSet);
153144
154145 // Progress Gradient
155146 ABitmap2:=DoubleGradientAlphaFill(
156147 ARect,
157148 BGRA(102,163,226,255),BGRA(83,135,186,255),
158149 BGRA(75,121,175,255),BGRA(56,93,135,255),
159150 gdVertical,gdVertical,gdVertical,0.5);
160151
161152 // Progress Border
162153 ABitmap2.Rectangle(0,0,ARect.Right,ARect.Bottom,BGRA(28,28,28,255),dmSet);
163154
164155 // Progress Light
165156 ABitmap2.Rectangle(1,1,ARect.Right-1,ARect.Bottom-1,BGRA(153,212,255,100),dmDrawWithTransparency);
166157
167158 // Merge Bitmaps
168159 //ABitmap.Canvas.Draw(0,0,ABitmap2.Bitmap);
169160 ABitmap2.Draw(ABitmap.Canvas,0,0,False);
170161
171162 // Draw Bitmap
172163 //progressbar.Canvas.Draw(0,0,ABitmap.Bitmap);
173164 ABitmap.Draw(progressbar.Canvas,0,0,False);
174165
175166 // Free Bitmap
176167 ABitmap.Free;
177168 ABitmap2.Free;
178169end;
179170```
180171
181172You can change the 'Percent' of progress changing this line:
182173
183174``` pascal
184175 // Percent of Progress - 33%
185176 ARect.Right:=Round(ABitmap.Width*0.33);
186177
187178 // Percent of Progress - 90%
188179 ARect.Right:=Round(ABitmap.Width*0.90);
189180```
190181
191182### About Dialogs
192183
193184"The Generic application includes an About dialog box. Every application should include an About dialog box. The dialog box displays such information as the application's name and copyright information." [Definition](http://msdn.microsoft.com/en-us/library/aa383735%28v=vs.85%29.aspx)
194185
195186#### Lazarus About
196187
197188Description: Lazarus-like about dialog.
198189
199-<figure>
200-<img src="lazlogo.png" title="lazlogo.png" />
201-<figcaption>lazlogo.png</figcaption>
202-</figure>
190+![](/wiki-images/4/4a/Lazlogo.png)
203191
204192Requires [[BGRABitmap]].
205193
206194- **ToDO:**
207- - <s>Smooth text</s>
208- - <s>Paw</s>
195+ - Smooth text
196+ - Paw
209197 - Bitmap with leopard
210198
211199Add a new TPaintBox, and set Width = 450, set Height = 300, set Name = 'logo'
212200
213201(you can set another width and height, for example 900 x 600)
214202
215203Go to OnPaint event and add this code:
216204
217205``` pascal
218206
219207uses BGRABitmap, BGRABitmapTypes, BGRAGradients;
220208
221209procedure TForm1.logoPaint(Sender: TObject);
222210var
223211 bmp, bmp2, bmp3, bmp4, bmp5, bmp6: TBGRABitmap;
224212 rct: TRect;
225213
226214 procedure DrawBackground;
227215 begin
228216 // Background
229217 bmp:= TBGRABitmap.Create(logo.Width,logo.Height,BGRAWhite);
230218
231219 rct:= logo.ClientRect;
232220 rct.Left:= 1;
233221 rct.Top:= 1;
234222 rct.Right:= logo.Width-1;
235223 rct.Bottom:= Round(logo.Height*0.935);
236224
237225 //radial
238226 bmp.GradientFill( rct.Left, rct.Top, rct.Right, rct.Bottom,
239227 BGRA(117,172,224,255), BGRA(49,74,132,255), gtRadial,
240228 PointF(Round(rct.Right*0.85), Round(rct.Bottom*0.50)),
241229 PointF(Round(rct.Left), Round(rct.Bottom)), dmSet );
242230 end;
243231
244232 procedure DrawEclipse;
245233 begin
246234 bmp2:= TBGRABitmap.Create(rct.Right,rct.Bottom);
247235 bmp2.FillEllipseAntialias( Round(rct.Right*0.57), Round(rct.Bottom*0.58),
248236 Round(rct.Right*0.31), Round(rct.Bottom*0.53),
249237 BGRA(255,255,255,30) );
250238 bmp2.EraseEllipseAntialias( Round(rct.Right*0.585), Round(rct.Bottom*0.58),
251239 Round(rct.Right*0.31*0.88), Round(rct.Bottom*0.53*0.88),
252240 255 );
253241 end;
254242
255243 procedure ThinCircleAndFrame;
256244 var mask: TBGRABitmap;
257245 begin
258246 bmp5:= TBGRABitmap.Create( rct.Right, rct.Bottom );
259247 bmp5.GradientFill( 0, 0, bmp5.width, bmp5.Height,
260248 BGRA(117,172,224,255), BGRA(49,74,132,255), gtLinear,
261249 PointF(Round(rct.Right*0.5),Round(rct.Bottom*0.50)),
262250 PointF(Round(rct.Right),Round(rct.Bottom)), dmSet);
263251 mask:= TBGRABitmap.Create( rct.Right, rct.Bottom, BGRABlack );
264252 mask.EllipseAntialias( Round(rct.Right*0.53), Round(rct.Bottom*0.50),
265253 Round(rct.Right*0.40), Round(rct.Bottom*0.65),
266254 BGRA(255,255,255,192), 0.6 );
267255 bmp5.ApplyMask( mask );
268256 mask.free;
269257
270258 // Frame
271259 bmp6 := TBGRABitmap.Create( logo.Width,logo.Height );
272260 bmp6.Rectangle( logo.ClientRect,BGRABlack, BGRA(0,0,0,0), dmDrawWithTransparency );
273261 bmp6.DrawLine( 1, logo.Height-2, logo.Width-2, logo.Height-2, BGRA(0,0,0,75), True );
274262 bmp6.DrawLine( logo.Width-2, 1, logo.Width-2, logo.Height-2, BGRA(0,0,0,75), True );
275263 end;
276264
277265 procedure DrawText;
278266 begin
279267 // Text
280268 bmp4 := TBGRABitmap.Create( logo.Width, logo.Height );
281269 // 'Free Pascal'
282270 bmp5.FontAntialias := True;
283271 bmp5.FontStyle := [fsBold];
284272 bmp5.FontHeight := Round(logo.Height*0.065);
285273 bmp5.TextOut( Round(logo.Width*0.15), Round(logo.Height*0.045), 'Free Pascal', BGRAWhite );
286274
287275 // 'Lazarus'
288276 bmp5.FontHeight := Round(logo.Height*0.18);
289277 bmp5.TextOut( Round(logo.Width*0.05), Round(logo.Height*0.07),'Lazarus',BGRAWhite );
290278
291279 // 'Project'
292280 bmp4.FontHeight := Round(logo.Height*0.052);
293281 bmp4.TextOut( Round(logo.Width*0.20), Round(logo.Height*0.27), 'Project', BGRAWhite );
294282
295283 // 'Write Once'
296284 bmp4.FontHeight := Round(logo.Height*0.07);
297285 bmp4.TextOut( Round(logo.Width*0.02), Round(logo.Height*0.57), 'Write Once', BGRA(255,255,255,100) );
298286 bmp4.GradientFill( Round(logo.Width*0.02), Round(logo.Height*0.66),
299287 Round(logo.Width*0.46), Round(logo.Height*0.66)+1,
300288 BGRA(255,255,255,20), BGRA(0,0,0,30), gtLinear,
301289 PointF(logo.Width*0.22,0), PointF(logo.Width*0.48,0),
302290 dmDrawWithTransparency );
303291
304292 // 'Compile Anywhere'
305293 bmp4.TextOut( Round(logo.Width*0.26), Round(logo.Height*0.8), 'Compile Anywhere', BGRA(255,255,255,100) );
306294 bmp4.GradientFill( Round(logo.Width*0.26), Round(logo.Height*0.89),
307295 Round(logo.Width*0.70), Round(logo.Height*0.89)+1,
308296 BGRA(255,255,255,20), BGRA(0,0,0,50), gtLinear,
309297 PointF(logo.Width*0.26,0), PointF(logo.Width*0.70,0),
310298 dmDrawWithTransparency );
311299 end;
312300
313301 procedure RedRectangle;
314302 var
315303 rct2: TRect;
316304 gradInfo: array of TnGradientInfo;
317305 bmpGrad: TBGRABitmap;
318306 begin
319307 bmp3 := TBGRABitmap.Create(logo.Width,logo.Height);
320308
321309 rct2 := logo.ClientRect;
322310 rct2.Left := Round(rct2.Right*0.06);
323311 rct2.Top := Round(rct2.Bottom*0.27);
324312 rct2.Right := Round(rct2.Right*0.48);
325313 rct2.Bottom := Round(rct2.Bottom*0.337);
326314
327315 setlength(gradInfo,4); // Red Alpha Gradient
328316 gradInfo[0] := nGradientInfo(BGRAPixelTransparent, BGRA(255,0,0,255), gdHorizontal, 0.25);
329317 gradInfo[1] := nGradientInfo(BGRA(255,0,0,255), BGRA(160,0,0,180), gdHorizontal, 0.5);
330318 gradInfo[2] := nGradientInfo(BGRA(160,0,0,180), BGRA(255,0,0,255), gdHorizontal, 0.75);
331319 gradInfo[3] := nGradientInfo(BGRA(255,0,0,255), BGRAPixelTransparent, gdHorizontal, 1);
332320
333321 bmpGrad := nGradientAlphaFill( rct2, gdHorizontal, gradInfo );
334322 bmp3.PutImage( rct2.Left, rct2.Top, bmpGrad, dmDrawWithTransparency );
335323 bmpGrad.Free;
336324 end;
337325
338326 procedure DrawPaw(bmp: TBGRABitmap; center: TPointF);
339327 begin
340328 with bmp.Canvas2D do
341329 begin
342330 save;
343331 translate(center.X-93,center.Y-83);
344332 globalAlpha := 0.4;
345333 fillStyle ('#3f5e99');
346334 beginPath();
347335 moveTo(89.724698,11.312043);
348336 bezierCurveTo(95.526308,14.494575,100.52322000000001,18.838808,102.75144,24.966412);
349337 bezierCurveTo(114.24578,26.586847,123.07072,43.010127999999995,118.71826,54.504664);
350338 bezierCurveTo(114.77805000000001,64.910473,93.426098,68.10145299999999,89.00143800000001,59.252123);
351339 bezierCurveTo(86.231818,53.712894999999996,90.877898,48.213108999999996,88.853498,42.139906999999994);
352340 bezierCurveTo(87.401408,37.78364299999999,82.208048,33.87411899999999,85.595888,27.098436999999993);
353341 bezierCurveTo(87.071858,24.146481999999992,94.76621800000001,25.279547999999995,94.863658,23.444067999999994);
354342 bezierCurveTo(95.066728,19.618834999999994,92.648878,18.165403999999995,90.221828,15.326465999999995);
355343 closePath();
356344 fill();
357345 beginPath();
358346 moveTo(53.024288,20.876975);
359347 bezierCurveTo(50.128958,26.827119000000003,48.561707999999996,33.260252,50.284608,39.548662);
360348 bezierCurveTo(41.840728,47.513997,44.130318,66.017003,54.325338,72.88213300000001);
361349 bezierCurveTo(63.554708000000005,79.09700300000002,82.823918,69.36119300000001,81.320528,59.58223300000001);
362350 bezierCurveTo(80.379498,53.461101000000006,73.409408,51.65791100000001,71.551608,45.53168800000001);
363351 bezierCurveTo(70.219018,41.13739400000001,72.197818,34.94548700000001,65.517188,31.373877000000007);
364352 bezierCurveTo(62.606638000000004,29.817833000000007,56.98220800000001,35.18931200000001,55.841908000000004,33.74771500000001);
365353 bezierCurveTo(53.465478000000004,30.743354000000007,54.598668,28.159881000000006,54.938648,24.44039800000001);
366354 closePath();
367355 fill();
368356 beginPath();
369357 moveTo(16.284108,78.650993);
370358 bezierCurveTo(16.615938,85.259863,18.344168,91.651623,22.885208,96.330453);
371359 bezierCurveTo(19.327327999999998,107.37975,30.253377999999998,122.48687000000001,42.495058,123.58667);
372360 bezierCurveTo(53.577238,124.58229,65.765908,106.76307,59.734438,98.920263);
373361 bezierCurveTo(55.959047999999996,94.01106300000001,48.983098,95.791453,44.402058,91.319753);
374362 bezierCurveTo(41.116108,88.112233,39.864737999999996,81.73340300000001,32.289848,81.824883);
375363 bezierCurveTo(28.989708,81.864783,26.651538,89.282293,24.957518,88.569003);
376364 bezierCurveTo(21.427108,87.08246299999999,21.174458,84.272723,19.679208,80.85010299999999);
377365 closePath();
378366 fill();
379367 beginPath();
380368 moveTo(152.77652,37.616125);
381369 bezierCurveTo(156.68534,42.955439,159.37334,49.006564,158.79801,55.501293);
382370 bezierCurveTo(168.5256,61.835313,169.5682,80.450283,160.75895,89.021463);
383371 bezierCurveTo(152.78409,96.780823,132.08894,90.63274299999999,131.82654,80.742363);
384372 bezierCurveTo(131.6623,74.551503,138.19976,71.535693,138.93671,65.17653299999999);
385373 bezierCurveTo(139.46532,60.615162999999995,136.41531,54.87470199999999,142.35299,50.170306999999994);
386374 bezierCurveTo(144.93985,48.12074299999999,151.43107,52.404562999999996,152.29636,50.78291599999999);
387375 bezierCurveTo(154.09968999999998,47.403324999999995,152.52446999999998,45.062994999999994,151.52745,41.463536999999995);
388376 closePath();
389377 fill();
390378 beginPath();
391379 moveTo(139.65359,109.38478);
392380 bezierCurveTo(179.13505,123.79982000000001,142.51298,146.31478,119.19800000000001,151.55864);
393381 bezierCurveTo(95.883018,156.8025,41.93790800000001,157.82316,75.508908,123.02183);
394382 bezierCurveTo(78.980078,119.42344999999999,79.61785800000001,104.19731999999999,82.074898,99.283253);
395383 bezierCurveTo(86.361158,93.329663,106.23528,86.908083,113.13709,88.929193);
396384 bezierCurveTo(128.23085,93.960443,125.96716,106.89633,139.65359,109.38478);
397385 closePath();
398386 fill();
399387 restore;
400388 end;
401389 end;
402390
403391begin
404392 DrawBackground;
405393 DrawEclipse;
406394 ThinCircleAndFrame;
407395 DrawText;
408396 RedRectangle;
409397
410398 // Merge Bitmaps
411399 bmp.PutImage(0,0,bmp2,dmDrawWithTransparency);
412400 bmp.PutImage(0,0,bmp3,dmDrawWithTransparency);
413401 bmp.PutImage(0,0,bmp4,dmDrawWithTransparency);
414402 bmp.PutImage(0,0,bmp5,dmDrawWithTransparency);
415403 bmp.PutImage(0,0,bmp6,dmDrawWithTransparency);
416404 DrawPaw(bmp,PointF(258,161));
417405
418406 // Draw in Canvas
419407 bmp.Draw(logo.Canvas,0,0,True);
420408
421409 // Free Bitmaps
422410 bmp.Free;
423411 bmp2.Free;
424412 bmp3.Free;
425413 bmp4.Free;
426414 bmp5.Free;
427415 bmp6.Free;
428416end;
429417```
430418
431419### Shadow
432420
433-<figure>
434-<img src="shadowmoon.png" title="shadowmoon.png" />
435-<figcaption>shadowmoon.png</figcaption>
436-</figure>
421+![](/wiki-images/0/08/Shadowmoon.png)
437422
438423Using the same code in BGRABitmap Tutorial 5 we can make a moon with shadow using the Shadow function.
439424
440425Go OnPaint event and add this code:
441426
442427``` pascal
443428procedure TForm1.FormPaint(Sender: TObject);
444429var image: TBGRABitmap;
445430 size: single;
446431
447432 // Shadow Function
448433 function Shadow(ASource: TBGRABitmap; AShadowColor: TBGRAPixel; AOffSetX,AOffSetY: Integer; ARadius: Integer; AShowSource: Boolean = True): TBGRABitmap;
449434 var
450435 bmpOut: TBGRABitmap;
451436 n: integer;
452437 p: PBGRAPixel;
453438 begin
454439 bmpOut:= TBGRABitmap.Create(ASource.Width+2*ARadius+AOffSetX,ASource.Height+2*ARadius+AOffSetY);
455440
456441 bmpOut.PutImage(AOffSetX,AOffSetY,ASource,dmDrawWithTransparency);
457442
458443 p := bmpOut.Data;
459444 for n := 1 to bmpOut.NbPixels do begin
460445 if p^.alpha <> 0 then begin
461446 p^.red := AShadowColor.red;
462447 p^.green := AShadowColor.green;
463448 p^.blue := AShadowColor.blue;
464449 end;
465450 inc(p);
466451 end;
467452
468453 BGRAReplace(bmpOut,bmpOut.FilterBlurRadial(ARadius,rbFast));
469454
470455 if AShowSource = True then bmpOut.PutImage(0,0,ASource,dmDrawWithTransparency);
471456
472457 Result:= bmpOut;
473458 end;
474459
475460 procedure DrawMoon;
476461 var layer: TBGRABitmap;
477462 begin
478463 layer := TBGRABitmap.Create(image.Width,image.Height);
479464 layer.FillEllipseAntialias(layer.Width/2,layer.Height/2,size*0.4,size*0.4,BGRA(224,224,224,128));
480465 layer.EraseEllipseAntialias(layer.Width/2+size*0.15,layer.Height/2,size*0.3,size*0.3,255);
481466 BGRAReplace(layer,Shadow(layer,BGRABlack,5,5,5));
482467 image.PutImage(0,0,layer,dmDrawWithTransparency);
483468 layer.Free;
484469 end;
485470
486471begin
487472 image := TBGRABitmap.Create(ClientWidth,ClientHeight);
488473
489474 //Compute available space in both directions
490475 if image.Height < image.Width then
491476 size := image.Height
492477 else
493478 size := image.Width;
494479
495480 image.GradientFill(0,0,image.Width,image.Height,
496481 BGRA(128,192,255),BGRA(0,0,255),
497482 gtLinear,PointF(0,0),PointF(0,image.Height),
498483 dmSet);
499484
500485 DrawMoon;
501486
502487 image.Draw(Canvas,0,0,True);
503488 image.free;
504489end;
505490```
506491
507492### Text Shadow
508493
509494Usage of BGRABitmap TextShadow function, create cool text with blured shadows and custom font properties.
510495
511496#### Single & Multi-Shadow
512497
513-<figure>
514-<img src="textshadow.png" title="textshadow.png" />
515-<figcaption>textshadow.png</figcaption>
516-</figure>
498+![](/wiki-images/a/aa/Textshadow.png)
517499
518500This requires BGRABitmap, BGRABitmapTypes & BGRAGradients.
519501
520502Go OnPaint event and add this code:
521503
522504``` pascal
523505procedure TForm1.FormPaint(Sender: TObject);
524506var
525507 bmp1,bmp2: TBGRABitmap; txt: String;
526508begin
527509 txt:= 'TextShadow!';
528510
529511 // Simple Shadow
530512 bmp1:= TextShadow(200,40,txt,32,BGRAWhite,BGRABlack,1,1);
531513 bmp1.Draw(Canvas,0,0,False);
532514 bmp1.Free;
533515
534516 // Blured Shadow
535517 bmp1:= TextShadow(200,40,txt,32,BGRABlack,BGRA(128,128,255,255),4,4,5);
536518 bmp1.Draw(Canvas,0,40,False);
537519 bmp1.Free;
538520
539521 // Neon Shadow ''(better with Black background)''
540522 bmp1:= TextShadow(200,40,txt,32,BGRA(255,255,255,200),BGRA(0,255,0,255),0,0,5);
541523 bmp1.Draw(Canvas,0,80,False);
542524 bmp1.Free;
543525
544526 // Multi Shadow
545527 bmp1:= TextShadow(250,50,txt,32,BGRAWhite,BGRA(255,0,0,255),-5,-5,4,[fsBold,fsUnderline],'Tahoma',False);
546528 bmp2:= TextShadow(250,50,txt,32,BGRAWhite,BGRA(0,0,255,255),5,5,4,[fsBold,fsUnderline],'Tahoma',True);
547529 bmp1.PutImage(0,0,bmp2,dmDrawWithTransparency);
548530 bmp1.Draw(Canvas,0,120,False);
549531 bmp1.Free;
550532 bmp2.Free;
551533end;
552534```
553535
554536#### Stretch to Form height
555537
556-<figure>
557-<img src="shadow.png" title="shadow.png" />
558-<figcaption>shadow.png</figcaption>
559-</figure>
538+![](/wiki-images/8/8e/Shadow.png)
560539
561540Go OnPaint event and add this code:
562541
563542``` pascal
564543procedure TForm1.FormPaint(Sender: TObject);
565544var
566545 bmp: TBGRABitmap;
567546begin
568547 Color:= clBlack;
569548 bmp:= TextShadow(Width,Height,'Shadow',Round(Height*0.5),BGRA(128,0,0,255),BGRAWhite,10,10,5,[fsBold],'Chiller');
570549 bmp.Draw(Canvas,0,0,False);
571550 bmp.Free;
572551end;
573552```
574553
575554### Text Outline
576555
577556If you need quality text outline use BGRABitmap Text Effect unit.
578557
579-<figure>
580-<img src="textoutline.png" title="textoutline.png" />
581-<figcaption>textoutline.png</figcaption>
582-</figure>
558+![](/wiki-images/6/64/Textoutline.png)
583559
584560Go OnPaint event and add this code:
585561
586562``` pascal
587563uses Types;
588564
589565procedure TForm1.FormPaint(Sender: TObject);
590566const textContent = 'Some text'; fontheight = 30;
591567var image,textBmp,outline: TBGRABitmap;
592568 size: TSize;
593569 p: PBGRAPixel;
594570 n: Integer;
595571begin
596572 image := TBGRABitmap.Create(ClientWidth,ClientHeight, ColorToBGRA(ColorToRGB(clBtnFace)) );
597573
598574 //define font param
599575 image.FontAntialias := true;
600576 image.FontHeight := fontheight;
601577 image.FontStyle := [fsBold];
602578
603579 //create text image
604580 size := image.TextSize(textContent);
605581 textBmp := TBGRABitmap.Create(size.cx+2,size.cy+2,BGRAWhite);
606582 image.CopyPropertiesTo(textBmp);
607583 textBmp.TextOut(1,1,textContent,BGRABlack);
608584
609585 //create outline
610586 outline := textbmp.FilterContour as TBGRABitmap;
611587 textBmp.Free;
612588 p := outline.data;
613589 for n := 0 to outline.NbPixels-1 do
614590 begin
615591 p^.alpha := 255-(GammaExpansionTab[p^.red] shr 8);
616592 p^.red := 0; //outline color
617593 p^.green := 0;
618594 p^.blue := 192;
619595 inc(p);
620596 end;
621597
622598 //draw outline
623599 image.PutImage(20-1,20-1,outline,dmDrawWithTransparency);
624600 outline.Free;
625601
626602 //draw inner text
627603 image.TextOut(20,20,textContent,BGRAWhite);
628604
629605 image.Draw(Canvas,0,0,True);
630606 image.free;
631607end;
632608```
633609
634610### Three-State Button
635611
636612This way to create a Three-State Button is obsolete. Now you can use [[BGRAControls]] and add TBGRAButton that is a fully customizable button. You can see some examples in the [[BGRAButton Gallery]].
637613
638-<figure>
639-<img src="statebutton.png" title="statebutton.png" />
640-<figcaption>statebutton.png</figcaption>
641-</figure>
614+![](/wiki-images/4/42/Statebutton.png)
642615
643616This is how to create a 3 state button ('Normal','Enter','Pressed') with a [[PaintBox]] & [[BGRABitmap]].
644617
645618**1) Add a new PaintBox:**
646619
647620Name=btn
648621
649622Width=128
650623
651624Height=64
652625
653626**2) Add this code:**
654627
655628``` pascal
656629unit Unit1;
657630
658631{$mode objfpc}{$H+}
659632
660633interface
661634
662635uses
663636 Classes, SysUtils, FileUtil, Forms, Controls, Graphics, Dialogs, ExtCtrls,
664637 BGRABitmap, BGRABitmapTypes, BGRAGradients;
665638
666639type
667640
668641 { TForm1 }
669642
670643 TForm1 = class(TForm)
671644 btn: TPaintBox;
672645 procedure btnPaint(Sender: TObject);
673646 procedure btnMouseDown(Sender: TObject; Button: TMouseButton; Shift: TShiftState; X, Y: Integer);
674647 procedure btnMouseEnter(Sender: TObject);
675648 procedure btnMouseLeave(Sender: TObject);
676649 procedure btnMouseUp(Sender: TObject; Button: TMouseButton; Shift: TShiftState; X, Y: Integer);
677650 procedure FormCreate(Sender: TObject);
678651 procedure FormDestroy(Sender: TObject);
679652 private
680653 { private declarations }
681654 btnCaption: String;
682655 btnState: String;
683656 public
684657 { public declarations }
685658 end;
686659
687660 function DrawButton(ARect: TRect; AText: String; cl1,cl2,cl3,cl4: TBGRAPixel; AValue: Single): TBGRABitmap;
688661
689662var
690663 Form1: TForm1;
691664
692665implementation
693666
694667function DrawButton(ARect: TRect; AText: String; cl1,cl2,cl3,cl4: TBGRAPixel; AValue: Single): TBGRABitmap;
695668var
696669 bmpBtn,bmpTxt: TBGRABitmap;
697670begin
698671 bmpBtn:= DoubleGradientAlphaFill(ARect,cl1,cl2,cl3,cl4,gdVertical,gdVertical,gdVertical,AValue);
699672 bmpBtn.Rectangle(0,0,ARect.Right,ARect.Bottom,BGRA(0,0,0,150),dmDrawWithTransparency);
700673 bmpTxt:= TextShadow(ARect.Right,ARect.Bottom,AText,Round(ARect.Bottom*0.5),BGRAWhite,BGRABlack,1,1,1);
701674 bmpBtn.PutImage(0,0,bmpTxt,dmDrawWithTransparency);
702675 bmpTxt.Free;
703676 Result:=bmpBtn;
704677end;
705678
706679{$R *.lfm}
707680
708681{ TForm1 }
709682
710683procedure TForm1.btnPaint(Sender: TObject);
711684var
712685 bmpBtn: TBGRABitmap;
713686begin
714687 if btnState = 'Normal' then begin
715688 bmpBtn:= DrawButton(btn.ClientRect,btnCaption,BGRABlack,BGRAWhite,BGRAWhite,BGRABlack,0.5); end
716689 else if btnState = 'Pressed' then begin
717690 bmpBtn:= DrawButton(btn.ClientRect,btnCaption,BGRAWhite,BGRABlack,BGRABlack,BGRAWhite,0.5); end
718691 else if btnState = 'Enter' then begin
719692 bmpBtn:= DrawButton(btn.ClientRect,btnCaption,BGRA(100,100,100,255),BGRAWhite,BGRAWhite,BGRA(100,100,100,255),0.5);
720693 end;
721694 bmpBtn.Draw(btn.Canvas,0,0,False);
722695 bmpBtn.Free;
723696end;
724697
725698procedure TForm1.btnMouseDown(Sender: TObject; Button: TMouseButton; Shift: TShiftState; X, Y: Integer);
726699begin
727700 btnState:= 'Pressed';
728701 btnPaint(nil);
729702end;
730703
731704procedure TForm1.btnMouseEnter(Sender: TObject);
732705begin
733706 btnState:= 'Enter';
734707 btnPaint(nil);
735708end;
736709
737710procedure TForm1.btnMouseLeave(Sender: TObject);
738711begin
739712 btnState:= 'Normal';
740713 btnPaint(nil);
741714end;
742715
743716procedure TForm1.btnMouseUp(Sender: TObject; Button: TMouseButton; Shift: TShiftState; X, Y: Integer);
744717begin
745718 btnState:= 'Enter';
746719 btnPaint(nil);
747720end;
748721
749722procedure TForm1.FormCreate(Sender: TObject);
750723begin
751724 btnCaption:= 'Button';
752725 btnState:= 'Normal';
753726end;
754727
755728procedure TForm1.FormDestroy(Sender: TObject);
756729begin
757730 btn.Free;
758731end;
759732
760733end.
761734```
762735
763736---
764737*From the Free Pascal wiki, page "Sample Graphics", as it stood on 2020-02-26 after a change by Trev, 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).*

Back to history