Sign in Join
Wiki copytemporary

Sample Graphics: what changed

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

Title: Sample Graphics

OldNewLine
1+This gallery is to show the designs can be created from Lazarus and drawing tools, like BGRABitmap.
2+
3+Most examples are included in [[BGRABitmap]] & [[BGRAControls]] packages.
4+
5+You can grab more BGRABitmap demos here <https://github.com/bgrabitmap/bgracontest>
6+
7+### Gradient Graphics
8+
9+**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.
10+
11+**Notes:** Tested on Win32. Tested on Linux with Kubuntu and Qt, work fine
12+
13+**Win32:**
14+
15+<figure>
16+<img src="gdgfx.png" title="gdgfx.png" />
17+<figcaption>gdgfx.png</figcaption>
18+</figure>
19+
20+**Kubuntu 10.04 with Qt:**
21+
22+<figure>
23+<img src="gdgfx_qt.png" title="gdgfx_qt.png" />
24+<figcaption>gdgfx_qt.png</figcaption>
25+</figure>
26+
27+Top-Left: 'like flash player setup button' / Top-Right: 'like win7 explorer toolbar' / Bottom: double gradient with alpha / Background: same as bottom.
28+
29+#### Flash Player Button
30+
31+- Also you can use [[BGRAButton Gallery|Like Flash Player Setup Controls]] using [[BGRAControls]] to draw the button & related stuff.
32+
33+Add a new TPaintBox, set 'btn1' as name. Go OnPaint event and add this code:
34+
35+``` pascal
36+var
37+ tempbmp1, tempbmp2: TBGRABitmap;
38+begin
39+ // Background Gradient
40+ tempbmp1:=TBGRABitmap.Create(btn1.Width,btn1.Height,BGRA(104,104,104,255));
41+ tempbmp1.Canvas.GradientFill(Rect(1,Round(btn1.Height*0.25),btn1.Width-1,btn1.Height-1),$686868,$404040,gdVertical);
42+
43+ // Frame Border
44+ tempbmp1.Canvas.Brush.Color:=$181818;
45+ tempbmp1.Canvas.FrameRect(btn1.ClientRect);
46+
47+ // Light Gradient
48+ tempbmp2:=TBGRABitmap.Create(btn1.Width,btn1.Height,BGRA(0,0,0,0));
49+ tempbmp2.GradientFill(1,1,btn1.Width-1,btn1.Height-1,
50+ BGRA(255,255,255,34),
51+ BGRA(255,255,255,10), gtLinear,
52+ PointF(btn1.ClientRect.Right,btn1.ClientRect.Top),
53+ PointF(btn1.ClientRect.Right,btn1.ClientRect.Bottom),
54+ dmDrawWithTransparency,True,False);
55+ tempbmp2.AlphaFillRect(2,2,btn1.Width-2,btn1.Height-2,0);
56+
57+ // Merge Bitmaps
58+ //tempbmp1.Canvas.Draw(0,0,tempbmp2.Bitmap);
59+ tempbmp2.Draw(tempbmp1.Canvas,0,0,False);
60+
61+ // Paint in Canvas
62+ //btn1.Canvas.Draw(0,0,tempbmp1.Bitmap);
63+ tempbmp1.Draw(btn1.Canvas,0,0,False);
64+
65+ // Free Bitmaps
66+ tempbmp1.Free;
67+ tempbmp2.Free;
68+end;
69+```
70+
71+#### Windows 7 Explorer Toolbar
72+
73+- Also you can use [[BGRAButton Gallery|Like Windows 7 Explorer ToolBar Control]] using [[BGRAControls]] to draw the Button.
74+
75+<figure>
76+<img src="skintoolbar.png" title="skintoolbar.png" />
77+<figcaption>skintoolbar.png</figcaption>
78+</figure>
79+
80+Add a new TToolBar with a TToolButton and set this properties:
81+
82+`AutoSize=True; ButtonHeight=48; EdgeBorders=[]; EdgeInner=esNone; EdgeOuter=esNone; ShowCaptions=True; Transparent=True;`
83+
84+Then go Form1 OnPaint event and add this code:
85+
86+``` pascal
87+procedure TForm1.FormPaint(Sender: TObject);
88+var
89+ gradBmp: TBGRABitmap;
90+begin
91+ with ToolBar1 do begin
92+ gradBmp := DoubleGradientAlphaFill(ClientRect,BGRA(245,250,255,255),BGRA(230,240,250,255),
93+ BGRA(220,230,244,255),BGRA(221,233,247,255),gdVertical,gdVertical,gdVertical,0.50);
94+ gradBmp.Rectangle(0,0,Width,Height-2,BGRA(255,255,255,100),dmDrawWithTransparency);
95+ gradBmp.SetHorizLine(0,Height-1,Width-1,BGRA(160,175,195,255));
96+ gradBmp.SetHorizLine(0,Height-2,Width-1,BGRA(205,218,234,255));
97+ end;
98+ gradBmp.Draw(Canvas,ToolBar1.ClientRect);
99+ gradBmp.Free;
100+end;
101+```
102+
103+#### Double Gradient with Alpha
104+
105+Add a new TPaintBox, set 'btn3' as name. Go OnPaint event and add this code:
106+
107+``` pascal
108+var
109+ myBitmap: TBGRABitmap;
110+begin
111+ myBitmap:= DoubleGradientAlphaFill(
112+ btn3.ClientRect,
113+ BGRA(0,0,0,100),BGRA(255,255,255,100),
114+ BGRA(100,100,100,100),BGRA(150,150,150,100),
115+ gdVertical,gdVertical,gdVertical,0.5);
116+ //btn3.Canvas.Draw(0,0,myBitmap.Bitmap);
117+ myBitmap.Draw(btn3.Canvas,0,0,False);
118+ myBitmap.Free;
119+end;
120+```
121+
122+### Progress Bars
123+
124+A 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.
125+
126+#### Flash Player Progress Bar
127+
128+- Also you can use [[BGRAControls|BGRAFlashProgressBar]] control in [[BGRAControls]].
129+
130+![](/wiki-images/6/6c/Flprogressbar.png) 'Like flash player setup progress bar'. Requires [[BGRABitmap]] and [[Double Gradient]] with Alpha.
131+
132+**Notes:** Tested on Win32, Kubuntu 10.04 with GTK and Qt.
133+
134+Add a new TPaintBox, set 'progressbar' as name. Go OnPaint event and add this code:
135+
136+``` pascal
137+var
138+ ABitmap, ABitmap2: TBGRABitmap; ARect: TRect;
139+begin
140+ // Initialization
141+ // Self.Color:=$004D4D4D;
142+ ABitmap:=TBGRABitmap.Create(progressbar.Width,progressbar.Height);
143+ ARect:=progressbar.ClientRect;
144+
145+ // Percent of Progress
146+ ARect.Right:=Round(ABitmap.Width*0.75);
147+
148+ // Background Gradient
149+ ABitmap.Canvas.GradientFill(progressbar.ClientRect,$303030,$323232,gdVertical);
150+
151+ // Background Border
152+ ABitmap.Rectangle(0,0,ABitmap.Width,ABitmap.Height,BGRA(28,28,28,255),dmSet);
153+
154+ // Progress Gradient
155+ ABitmap2:=DoubleGradientAlphaFill(
156+ ARect,
157+ BGRA(102,163,226,255),BGRA(83,135,186,255),
158+ BGRA(75,121,175,255),BGRA(56,93,135,255),
159+ gdVertical,gdVertical,gdVertical,0.5);
160+
161+ // Progress Border
162+ ABitmap2.Rectangle(0,0,ARect.Right,ARect.Bottom,BGRA(28,28,28,255),dmSet);
163+
164+ // Progress Light
165+ ABitmap2.Rectangle(1,1,ARect.Right-1,ARect.Bottom-1,BGRA(153,212,255,100),dmDrawWithTransparency);
166+
167+ // Merge Bitmaps
168+ //ABitmap.Canvas.Draw(0,0,ABitmap2.Bitmap);
169+ ABitmap2.Draw(ABitmap.Canvas,0,0,False);
170+
171+ // Draw Bitmap
172+ //progressbar.Canvas.Draw(0,0,ABitmap.Bitmap);
173+ ABitmap.Draw(progressbar.Canvas,0,0,False);
174+
175+ // Free Bitmap
176+ ABitmap.Free;
177+ ABitmap2.Free;
178+end;
179+```
180+
181+You can change the 'Percent' of progress changing this line:
182+
183+``` pascal
184+ // Percent of Progress - 33%
185+ ARect.Right:=Round(ABitmap.Width*0.33);
186+
187+ // Percent of Progress - 90%
188+ ARect.Right:=Round(ABitmap.Width*0.90);
189+```
190+
191+### About Dialogs
192+
193+"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)
194+
195+#### Lazarus About
196+
197+Description: Lazarus-like about dialog.
198+
199+<figure>
200+<img src="lazlogo.png" title="lazlogo.png" />
201+<figcaption>lazlogo.png</figcaption>
202+</figure>
203+
204+Requires [[BGRABitmap]].
205+
206+- **ToDO:**
207+ - <s>Smooth text</s>
208+ - <s>Paw</s>
209+ - Bitmap with leopard
210+
211+Add a new TPaintBox, and set Width = 450, set Height = 300, set Name = 'logo'
212+
213+(you can set another width and height, for example 900 x 600)
214+
215+Go to OnPaint event and add this code:
216+
217+``` pascal
218+
219+uses BGRABitmap, BGRABitmapTypes, BGRAGradients;
220+
221+procedure TForm1.logoPaint(Sender: TObject);
222+var
223+ bmp, bmp2, bmp3, bmp4, bmp5, bmp6: TBGRABitmap;
224+ rct: TRect;
225+
226+ procedure DrawBackground;
227+ begin
228+ // Background
229+ bmp:= TBGRABitmap.Create(logo.Width,logo.Height,BGRAWhite);
230+
231+ rct:= logo.ClientRect;
232+ rct.Left:= 1;
233+ rct.Top:= 1;
234+ rct.Right:= logo.Width-1;
235+ rct.Bottom:= Round(logo.Height*0.935);
236+
237+ //radial
238+ bmp.GradientFill( rct.Left, rct.Top, rct.Right, rct.Bottom,
239+ BGRA(117,172,224,255), BGRA(49,74,132,255), gtRadial,
240+ PointF(Round(rct.Right*0.85), Round(rct.Bottom*0.50)),
241+ PointF(Round(rct.Left), Round(rct.Bottom)), dmSet );
242+ end;
243+
244+ procedure DrawEclipse;
245+ begin
246+ bmp2:= TBGRABitmap.Create(rct.Right,rct.Bottom);
247+ bmp2.FillEllipseAntialias( Round(rct.Right*0.57), Round(rct.Bottom*0.58),
248+ Round(rct.Right*0.31), Round(rct.Bottom*0.53),
249+ BGRA(255,255,255,30) );
250+ bmp2.EraseEllipseAntialias( Round(rct.Right*0.585), Round(rct.Bottom*0.58),
251+ Round(rct.Right*0.31*0.88), Round(rct.Bottom*0.53*0.88),
252+ 255 );
253+ end;
254+
255+ procedure ThinCircleAndFrame;
256+ var mask: TBGRABitmap;
257+ begin
258+ bmp5:= TBGRABitmap.Create( rct.Right, rct.Bottom );
259+ bmp5.GradientFill( 0, 0, bmp5.width, bmp5.Height,
260+ BGRA(117,172,224,255), BGRA(49,74,132,255), gtLinear,
261+ PointF(Round(rct.Right*0.5),Round(rct.Bottom*0.50)),
262+ PointF(Round(rct.Right),Round(rct.Bottom)), dmSet);
263+ mask:= TBGRABitmap.Create( rct.Right, rct.Bottom, BGRABlack );
264+ mask.EllipseAntialias( Round(rct.Right*0.53), Round(rct.Bottom*0.50),
265+ Round(rct.Right*0.40), Round(rct.Bottom*0.65),
266+ BGRA(255,255,255,192), 0.6 );
267+ bmp5.ApplyMask( mask );
268+ mask.free;
269+
270+ // Frame
271+ bmp6 := TBGRABitmap.Create( logo.Width,logo.Height );
272+ bmp6.Rectangle( logo.ClientRect,BGRABlack, BGRA(0,0,0,0), dmDrawWithTransparency );
273+ bmp6.DrawLine( 1, logo.Height-2, logo.Width-2, logo.Height-2, BGRA(0,0,0,75), True );
274+ bmp6.DrawLine( logo.Width-2, 1, logo.Width-2, logo.Height-2, BGRA(0,0,0,75), True );
275+ end;
276+
277+ procedure DrawText;
278+ begin
279+ // Text
280+ bmp4 := TBGRABitmap.Create( logo.Width, logo.Height );
281+ // 'Free Pascal'
282+ bmp5.FontAntialias := True;
283+ bmp5.FontStyle := [fsBold];
284+ bmp5.FontHeight := Round(logo.Height*0.065);
285+ bmp5.TextOut( Round(logo.Width*0.15), Round(logo.Height*0.045), 'Free Pascal', BGRAWhite );
286+
287+ // 'Lazarus'
288+ bmp5.FontHeight := Round(logo.Height*0.18);
289+ bmp5.TextOut( Round(logo.Width*0.05), Round(logo.Height*0.07),'Lazarus',BGRAWhite );
290+
291+ // 'Project'
292+ bmp4.FontHeight := Round(logo.Height*0.052);
293+ bmp4.TextOut( Round(logo.Width*0.20), Round(logo.Height*0.27), 'Project', BGRAWhite );
294+
295+ // 'Write Once'
296+ bmp4.FontHeight := Round(logo.Height*0.07);
297+ bmp4.TextOut( Round(logo.Width*0.02), Round(logo.Height*0.57), 'Write Once', BGRA(255,255,255,100) );
298+ bmp4.GradientFill( Round(logo.Width*0.02), Round(logo.Height*0.66),
299+ Round(logo.Width*0.46), Round(logo.Height*0.66)+1,
300+ BGRA(255,255,255,20), BGRA(0,0,0,30), gtLinear,
301+ PointF(logo.Width*0.22,0), PointF(logo.Width*0.48,0),
302+ dmDrawWithTransparency );
303+
304+ // 'Compile Anywhere'
305+ bmp4.TextOut( Round(logo.Width*0.26), Round(logo.Height*0.8), 'Compile Anywhere', BGRA(255,255,255,100) );
306+ bmp4.GradientFill( Round(logo.Width*0.26), Round(logo.Height*0.89),
307+ Round(logo.Width*0.70), Round(logo.Height*0.89)+1,
308+ BGRA(255,255,255,20), BGRA(0,0,0,50), gtLinear,
309+ PointF(logo.Width*0.26,0), PointF(logo.Width*0.70,0),
310+ dmDrawWithTransparency );
311+ end;
312+
313+ procedure RedRectangle;
314+ var
315+ rct2: TRect;
316+ gradInfo: array of TnGradientInfo;
317+ bmpGrad: TBGRABitmap;
318+ begin
319+ bmp3 := TBGRABitmap.Create(logo.Width,logo.Height);
320+
321+ rct2 := logo.ClientRect;
322+ rct2.Left := Round(rct2.Right*0.06);
323+ rct2.Top := Round(rct2.Bottom*0.27);
324+ rct2.Right := Round(rct2.Right*0.48);
325+ rct2.Bottom := Round(rct2.Bottom*0.337);
326+
327+ setlength(gradInfo,4); // Red Alpha Gradient
328+ gradInfo[0] := nGradientInfo(BGRAPixelTransparent, BGRA(255,0,0,255), gdHorizontal, 0.25);
329+ gradInfo[1] := nGradientInfo(BGRA(255,0,0,255), BGRA(160,0,0,180), gdHorizontal, 0.5);
330+ gradInfo[2] := nGradientInfo(BGRA(160,0,0,180), BGRA(255,0,0,255), gdHorizontal, 0.75);
331+ gradInfo[3] := nGradientInfo(BGRA(255,0,0,255), BGRAPixelTransparent, gdHorizontal, 1);
332+
333+ bmpGrad := nGradientAlphaFill( rct2, gdHorizontal, gradInfo );
334+ bmp3.PutImage( rct2.Left, rct2.Top, bmpGrad, dmDrawWithTransparency );
335+ bmpGrad.Free;
336+ end;
337+
338+ procedure DrawPaw(bmp: TBGRABitmap; center: TPointF);
339+ begin
340+ with bmp.Canvas2D do
341+ begin
342+ save;
343+ translate(center.X-93,center.Y-83);
344+ globalAlpha := 0.4;
345+ fillStyle ('#3f5e99');
346+ beginPath();
347+ moveTo(89.724698,11.312043);
348+ bezierCurveTo(95.526308,14.494575,100.52322000000001,18.838808,102.75144,24.966412);
349+ bezierCurveTo(114.24578,26.586847,123.07072,43.010127999999995,118.71826,54.504664);
350+ bezierCurveTo(114.77805000000001,64.910473,93.426098,68.10145299999999,89.00143800000001,59.252123);
351+ bezierCurveTo(86.231818,53.712894999999996,90.877898,48.213108999999996,88.853498,42.139906999999994);
352+ bezierCurveTo(87.401408,37.78364299999999,82.208048,33.87411899999999,85.595888,27.098436999999993);
353+ bezierCurveTo(87.071858,24.146481999999992,94.76621800000001,25.279547999999995,94.863658,23.444067999999994);
354+ bezierCurveTo(95.066728,19.618834999999994,92.648878,18.165403999999995,90.221828,15.326465999999995);
355+ closePath();
356+ fill();
357+ beginPath();
358+ moveTo(53.024288,20.876975);
359+ bezierCurveTo(50.128958,26.827119000000003,48.561707999999996,33.260252,50.284608,39.548662);
360+ bezierCurveTo(41.840728,47.513997,44.130318,66.017003,54.325338,72.88213300000001);
361+ bezierCurveTo(63.554708000000005,79.09700300000002,82.823918,69.36119300000001,81.320528,59.58223300000001);
362+ bezierCurveTo(80.379498,53.461101000000006,73.409408,51.65791100000001,71.551608,45.53168800000001);
363+ bezierCurveTo(70.219018,41.13739400000001,72.197818,34.94548700000001,65.517188,31.373877000000007);
364+ bezierCurveTo(62.606638000000004,29.817833000000007,56.98220800000001,35.18931200000001,55.841908000000004,33.74771500000001);
365+ bezierCurveTo(53.465478000000004,30.743354000000007,54.598668,28.159881000000006,54.938648,24.44039800000001);
366+ closePath();
367+ fill();
368+ beginPath();
369+ moveTo(16.284108,78.650993);
370+ bezierCurveTo(16.615938,85.259863,18.344168,91.651623,22.885208,96.330453);
371+ bezierCurveTo(19.327327999999998,107.37975,30.253377999999998,122.48687000000001,42.495058,123.58667);
372+ bezierCurveTo(53.577238,124.58229,65.765908,106.76307,59.734438,98.920263);
373+ bezierCurveTo(55.959047999999996,94.01106300000001,48.983098,95.791453,44.402058,91.319753);
374+ bezierCurveTo(41.116108,88.112233,39.864737999999996,81.73340300000001,32.289848,81.824883);
375+ bezierCurveTo(28.989708,81.864783,26.651538,89.282293,24.957518,88.569003);
376+ bezierCurveTo(21.427108,87.08246299999999,21.174458,84.272723,19.679208,80.85010299999999);
377+ closePath();
378+ fill();
379+ beginPath();
380+ moveTo(152.77652,37.616125);
381+ bezierCurveTo(156.68534,42.955439,159.37334,49.006564,158.79801,55.501293);
382+ bezierCurveTo(168.5256,61.835313,169.5682,80.450283,160.75895,89.021463);
383+ bezierCurveTo(152.78409,96.780823,132.08894,90.63274299999999,131.82654,80.742363);
384+ bezierCurveTo(131.6623,74.551503,138.19976,71.535693,138.93671,65.17653299999999);
385+ bezierCurveTo(139.46532,60.615162999999995,136.41531,54.87470199999999,142.35299,50.170306999999994);
386+ bezierCurveTo(144.93985,48.12074299999999,151.43107,52.404562999999996,152.29636,50.78291599999999);
387+ bezierCurveTo(154.09968999999998,47.403324999999995,152.52446999999998,45.062994999999994,151.52745,41.463536999999995);
388+ closePath();
389+ fill();
390+ beginPath();
391+ moveTo(139.65359,109.38478);
392+ bezierCurveTo(179.13505,123.79982000000001,142.51298,146.31478,119.19800000000001,151.55864);
393+ bezierCurveTo(95.883018,156.8025,41.93790800000001,157.82316,75.508908,123.02183);
394+ bezierCurveTo(78.980078,119.42344999999999,79.61785800000001,104.19731999999999,82.074898,99.283253);
395+ bezierCurveTo(86.361158,93.329663,106.23528,86.908083,113.13709,88.929193);
396+ bezierCurveTo(128.23085,93.960443,125.96716,106.89633,139.65359,109.38478);
397+ closePath();
398+ fill();
399+ restore;
400+ end;
401+ end;
402+
403+begin
404+ DrawBackground;
405+ DrawEclipse;
406+ ThinCircleAndFrame;
407+ DrawText;
408+ RedRectangle;
409+
410+ // Merge Bitmaps
411+ bmp.PutImage(0,0,bmp2,dmDrawWithTransparency);
412+ bmp.PutImage(0,0,bmp3,dmDrawWithTransparency);
413+ bmp.PutImage(0,0,bmp4,dmDrawWithTransparency);
414+ bmp.PutImage(0,0,bmp5,dmDrawWithTransparency);
415+ bmp.PutImage(0,0,bmp6,dmDrawWithTransparency);
416+ DrawPaw(bmp,PointF(258,161));
417+
418+ // Draw in Canvas
419+ bmp.Draw(logo.Canvas,0,0,True);
420+
421+ // Free Bitmaps
422+ bmp.Free;
423+ bmp2.Free;
424+ bmp3.Free;
425+ bmp4.Free;
426+ bmp5.Free;
427+ bmp6.Free;
428+end;
429+```
430+
431+### Shadow
432+
433+<figure>
434+<img src="shadowmoon.png" title="shadowmoon.png" />
435+<figcaption>shadowmoon.png</figcaption>
436+</figure>
437+
438+Using the same code in BGRABitmap Tutorial 5 we can make a moon with shadow using the Shadow function.
439+
440+Go OnPaint event and add this code:
441+
442+``` pascal
443+procedure TForm1.FormPaint(Sender: TObject);
444+var image: TBGRABitmap;
445+ size: single;
446+
447+ // Shadow Function
448+ function Shadow(ASource: TBGRABitmap; AShadowColor: TBGRAPixel; AOffSetX,AOffSetY: Integer; ARadius: Integer; AShowSource: Boolean = True): TBGRABitmap;
449+ var
450+ bmpOut: TBGRABitmap;
451+ n: integer;
452+ p: PBGRAPixel;
453+ begin
454+ bmpOut:= TBGRABitmap.Create(ASource.Width+2*ARadius+AOffSetX,ASource.Height+2*ARadius+AOffSetY);
455+
456+ bmpOut.PutImage(AOffSetX,AOffSetY,ASource,dmDrawWithTransparency);
457+
458+ p := bmpOut.Data;
459+ for n := 1 to bmpOut.NbPixels do begin
460+ if p^.alpha <> 0 then begin
461+ p^.red := AShadowColor.red;
462+ p^.green := AShadowColor.green;
463+ p^.blue := AShadowColor.blue;
464+ end;
465+ inc(p);
466+ end;
467+
468+ BGRAReplace(bmpOut,bmpOut.FilterBlurRadial(ARadius,rbFast));
469+
470+ if AShowSource = True then bmpOut.PutImage(0,0,ASource,dmDrawWithTransparency);
471+
472+ Result:= bmpOut;
473+ end;
474+
475+ procedure DrawMoon;
476+ var layer: TBGRABitmap;
477+ begin
478+ layer := TBGRABitmap.Create(image.Width,image.Height);
479+ layer.FillEllipseAntialias(layer.Width/2,layer.Height/2,size*0.4,size*0.4,BGRA(224,224,224,128));
480+ layer.EraseEllipseAntialias(layer.Width/2+size*0.15,layer.Height/2,size*0.3,size*0.3,255);
481+ BGRAReplace(layer,Shadow(layer,BGRABlack,5,5,5));
482+ image.PutImage(0,0,layer,dmDrawWithTransparency);
483+ layer.Free;
484+ end;
485+
486+begin
487+ image := TBGRABitmap.Create(ClientWidth,ClientHeight);
488+
489+ //Compute available space in both directions
490+ if image.Height < image.Width then
491+ size := image.Height
492+ else
493+ size := image.Width;
494+
495+ image.GradientFill(0,0,image.Width,image.Height,
496+ BGRA(128,192,255),BGRA(0,0,255),
497+ gtLinear,PointF(0,0),PointF(0,image.Height),
498+ dmSet);
499+
500+ DrawMoon;
501+
502+ image.Draw(Canvas,0,0,True);
503+ image.free;
504+end;
505+```
506+
507+### Text Shadow
508+
509+Usage of BGRABitmap TextShadow function, create cool text with blured shadows and custom font properties.
510+
511+#### Single & Multi-Shadow
512+
513+<figure>
514+<img src="textshadow.png" title="textshadow.png" />
515+<figcaption>textshadow.png</figcaption>
516+</figure>
517+
518+This requires BGRABitmap, BGRABitmapTypes & BGRAGradients.
519+
520+Go OnPaint event and add this code:
521+
522+``` pascal
523+procedure TForm1.FormPaint(Sender: TObject);
524+var
525+ bmp1,bmp2: TBGRABitmap; txt: String;
526+begin
527+ txt:= 'TextShadow!';
528+
529+ // Simple Shadow
530+ bmp1:= TextShadow(200,40,txt,32,BGRAWhite,BGRABlack,1,1);
531+ bmp1.Draw(Canvas,0,0,False);
532+ bmp1.Free;
533+
534+ // Blured Shadow
535+ bmp1:= TextShadow(200,40,txt,32,BGRABlack,BGRA(128,128,255,255),4,4,5);
536+ bmp1.Draw(Canvas,0,40,False);
537+ bmp1.Free;
538+
539+ // Neon Shadow ''(better with Black background)''
540+ bmp1:= TextShadow(200,40,txt,32,BGRA(255,255,255,200),BGRA(0,255,0,255),0,0,5);
541+ bmp1.Draw(Canvas,0,80,False);
542+ bmp1.Free;
543+
544+ // Multi Shadow
545+ bmp1:= TextShadow(250,50,txt,32,BGRAWhite,BGRA(255,0,0,255),-5,-5,4,[fsBold,fsUnderline],'Tahoma',False);
546+ bmp2:= TextShadow(250,50,txt,32,BGRAWhite,BGRA(0,0,255,255),5,5,4,[fsBold,fsUnderline],'Tahoma',True);
547+ bmp1.PutImage(0,0,bmp2,dmDrawWithTransparency);
548+ bmp1.Draw(Canvas,0,120,False);
549+ bmp1.Free;
550+ bmp2.Free;
551+end;
552+```
553+
554+#### Stretch to Form height
555+
556+<figure>
557+<img src="shadow.png" title="shadow.png" />
558+<figcaption>shadow.png</figcaption>
559+</figure>
560+
561+Go OnPaint event and add this code:
562+
563+``` pascal
564+procedure TForm1.FormPaint(Sender: TObject);
565+var
566+ bmp: TBGRABitmap;
567+begin
568+ Color:= clBlack;
569+ bmp:= TextShadow(Width,Height,'Shadow',Round(Height*0.5),BGRA(128,0,0,255),BGRAWhite,10,10,5,[fsBold],'Chiller');
570+ bmp.Draw(Canvas,0,0,False);
571+ bmp.Free;
572+end;
573+```
574+
575+### Text Outline
576+
577+If you need quality text outline use BGRABitmap Text Effect unit.
578+
579+<figure>
580+<img src="textoutline.png" title="textoutline.png" />
581+<figcaption>textoutline.png</figcaption>
582+</figure>
583+
584+Go OnPaint event and add this code:
585+
586+``` pascal
587+uses Types;
588+
589+procedure TForm1.FormPaint(Sender: TObject);
590+const textContent = 'Some text'; fontheight = 30;
591+var image,textBmp,outline: TBGRABitmap;
592+ size: TSize;
593+ p: PBGRAPixel;
594+ n: Integer;
595+begin
596+ image := TBGRABitmap.Create(ClientWidth,ClientHeight, ColorToBGRA(ColorToRGB(clBtnFace)) );
597+
598+ //define font param
599+ image.FontAntialias := true;
600+ image.FontHeight := fontheight;
601+ image.FontStyle := [fsBold];
602+
603+ //create text image
604+ size := image.TextSize(textContent);
605+ textBmp := TBGRABitmap.Create(size.cx+2,size.cy+2,BGRAWhite);
606+ image.CopyPropertiesTo(textBmp);
607+ textBmp.TextOut(1,1,textContent,BGRABlack);
608+
609+ //create outline
610+ outline := textbmp.FilterContour as TBGRABitmap;
611+ textBmp.Free;
612+ p := outline.data;
613+ for n := 0 to outline.NbPixels-1 do
614+ begin
615+ p^.alpha := 255-(GammaExpansionTab[p^.red] shr 8);
616+ p^.red := 0; //outline color
617+ p^.green := 0;
618+ p^.blue := 192;
619+ inc(p);
620+ end;
621+
622+ //draw outline
623+ image.PutImage(20-1,20-1,outline,dmDrawWithTransparency);
624+ outline.Free;
625+
626+ //draw inner text
627+ image.TextOut(20,20,textContent,BGRAWhite);
628+
629+ image.Draw(Canvas,0,0,True);
630+ image.free;
631+end;
632+```
633+
634+### Three-State Button
635+
636+This 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]].
637+
638+<figure>
639+<img src="statebutton.png" title="statebutton.png" />
640+<figcaption>statebutton.png</figcaption>
641+</figure>
642+
643+This is how to create a 3 state button ('Normal','Enter','Pressed') with a [[PaintBox]] & [[BGRABitmap]].
644+
645+**1) Add a new PaintBox:**
646+
647+Name=btn
648+
649+Width=128
650+
651+Height=64
652+
653+**2) Add this code:**
654+
655+``` pascal
656+unit Unit1;
657+
658+{$mode objfpc}{$H+}
659+
660+interface
661+
662+uses
663+ Classes, SysUtils, FileUtil, Forms, Controls, Graphics, Dialogs, ExtCtrls,
664+ BGRABitmap, BGRABitmapTypes, BGRAGradients;
665+
666+type
667+
668+ { TForm1 }
669+
670+ TForm1 = class(TForm)
671+ btn: TPaintBox;
672+ procedure btnPaint(Sender: TObject);
673+ procedure btnMouseDown(Sender: TObject; Button: TMouseButton; Shift: TShiftState; X, Y: Integer);
674+ procedure btnMouseEnter(Sender: TObject);
675+ procedure btnMouseLeave(Sender: TObject);
676+ procedure btnMouseUp(Sender: TObject; Button: TMouseButton; Shift: TShiftState; X, Y: Integer);
677+ procedure FormCreate(Sender: TObject);
678+ procedure FormDestroy(Sender: TObject);
679+ private
680+ { private declarations }
681+ btnCaption: String;
682+ btnState: String;
683+ public
684+ { public declarations }
685+ end;
686+
687+ function DrawButton(ARect: TRect; AText: String; cl1,cl2,cl3,cl4: TBGRAPixel; AValue: Single): TBGRABitmap;
688+
689+var
690+ Form1: TForm1;
691+
692+implementation
693+
694+function DrawButton(ARect: TRect; AText: String; cl1,cl2,cl3,cl4: TBGRAPixel; AValue: Single): TBGRABitmap;
695+var
696+ bmpBtn,bmpTxt: TBGRABitmap;
697+begin
698+ bmpBtn:= DoubleGradientAlphaFill(ARect,cl1,cl2,cl3,cl4,gdVertical,gdVertical,gdVertical,AValue);
699+ bmpBtn.Rectangle(0,0,ARect.Right,ARect.Bottom,BGRA(0,0,0,150),dmDrawWithTransparency);
700+ bmpTxt:= TextShadow(ARect.Right,ARect.Bottom,AText,Round(ARect.Bottom*0.5),BGRAWhite,BGRABlack,1,1,1);
701+ bmpBtn.PutImage(0,0,bmpTxt,dmDrawWithTransparency);
702+ bmpTxt.Free;
703+ Result:=bmpBtn;
704+end;
705+
706+{$R *.lfm}
707+
708+{ TForm1 }
709+
710+procedure TForm1.btnPaint(Sender: TObject);
711+var
712+ bmpBtn: TBGRABitmap;
713+begin
714+ if btnState = 'Normal' then begin
715+ bmpBtn:= DrawButton(btn.ClientRect,btnCaption,BGRABlack,BGRAWhite,BGRAWhite,BGRABlack,0.5); end
716+ else if btnState = 'Pressed' then begin
717+ bmpBtn:= DrawButton(btn.ClientRect,btnCaption,BGRAWhite,BGRABlack,BGRABlack,BGRAWhite,0.5); end
718+ else if btnState = 'Enter' then begin
719+ bmpBtn:= DrawButton(btn.ClientRect,btnCaption,BGRA(100,100,100,255),BGRAWhite,BGRAWhite,BGRA(100,100,100,255),0.5);
720+ end;
721+ bmpBtn.Draw(btn.Canvas,0,0,False);
722+ bmpBtn.Free;
723+end;
724+
725+procedure TForm1.btnMouseDown(Sender: TObject; Button: TMouseButton; Shift: TShiftState; X, Y: Integer);
726+begin
727+ btnState:= 'Pressed';
728+ btnPaint(nil);
729+end;
730+
731+procedure TForm1.btnMouseEnter(Sender: TObject);
732+begin
733+ btnState:= 'Enter';
734+ btnPaint(nil);
735+end;
736+
737+procedure TForm1.btnMouseLeave(Sender: TObject);
738+begin
739+ btnState:= 'Normal';
740+ btnPaint(nil);
741+end;
742+
743+procedure TForm1.btnMouseUp(Sender: TObject; Button: TMouseButton; Shift: TShiftState; X, Y: Integer);
744+begin
745+ btnState:= 'Enter';
746+ btnPaint(nil);
747+end;
748+
749+procedure TForm1.FormCreate(Sender: TObject);
750+begin
751+ btnCaption:= 'Button';
752+ btnState:= 'Normal';
753+end;
754+
755+procedure TForm1.FormDestroy(Sender: TObject);
756+begin
757+ btn.Free;
758+end;
759+
760+end.
761+```
762+
763+---
764+*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