Sample Graphics
│
English (en) │
español (es) │
Sample Graphics
This gallery is to show the designs can be created from Lazarus and drawing tools, like BGRABitmap.
Now Double Gradient 'DoubleGradientAlphaFill' & 'nGradientAlphaFill' are included in BGRABitmap in the unit 'BGRAGradients'.
Gradient Graphics
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.
Notes: Tested on Win32. Tested on Linux with Kubuntu and Qt, work fine
Win32:
Kubuntu 10.04 with Qt:
Top-Left: 'like flash player setup button' / Top-Right: 'like win7 explorer toolbar' / Bottom: double gradient with alpha / Background: same as bottom.
Flash Player Button
Add a new TPaintBox, set 'btn1' as name. Go OnPaint event and add this code:
<delphi>var
tempbmp1, tempbmp2: TBGRABitmap;
begin
// Background Gradient tempbmp1:=TBGRABitmap.Create(btn1.Width,btn1.Height,BGRA(104,104,104,255)); tempbmp1.Canvas.GradientFill(Rect(1,Round(btn1.Height*0.25),btn1.Width-1,btn1.Height-1),$686868,$404040,gdVertical);
// Frame Border tempbmp1.Canvas.Brush.Color:=$181818; tempbmp1.Canvas.FrameRect(btn1.ClientRect);
// Light Gradient tempbmp2:=TBGRABitmap.Create(btn1.Width,btn1.Height,BGRA(0,0,0,0)); tempbmp2.GradientFill(1,1,btn1.Width-1,btn1.Height-1, BGRA(255,255,255,34), BGRA(255,255,255,10), gtLinear, PointF(btn1.ClientRect.Right,btn1.ClientRect.Top), PointF(btn1.ClientRect.Right,btn1.ClientRect.Bottom), dmDrawWithTransparency,True,False); tempbmp2.AlphaFillRect(2,2,btn1.Width-2,btn1.Height-2,0);
// Merge Bitmaps //tempbmp1.Canvas.Draw(0,0,tempbmp2.Bitmap); tempbmp2.Draw(tempbmp1.Canvas,0,0,False);
// Paint in Canvas //btn1.Canvas.Draw(0,0,tempbmp1.Bitmap); tempbmp1.Draw(btn1.Canvas,0,0,False);
// Free Bitmaps tempbmp1.Free; tempbmp2.Free;
end;</delphi>
Windows 7 Explorer Toolbar
Add a new TPaintBox, set 'btn2' as name. Go OnPaint event and add this code:
<delphi>var
backBmp, lightBmp: TBGRABitmap; gradBmp: TBitmap;
begin
// Background Gradient gradBmp := DoubleGradientFill( btn2.ClientRect, $FFFAF5,$FAF0E6, $F4E6DC,$F7E9DD, gdVertical,gdVertical,gdVertical,0.5);
// Use as background backBmp := TBGRABitmap.Create(gradBmp); gradBmp.Free;
// Light Gradient lightBmp:= TBGRABitmap.Create(btn2.Width,btn2.Height,BGRA(0,0,0,0)); lightBmp.Rectangle(0,0,btn2.Width,btn2.Height-2, BGRA(255,255,255,100), dmSet); lightBmp.SetHorizLine(0,btn2.Height-1,btn2.Width-1,BGRA(160,175,195,255)); lightBmp.SetHorizLine(0,btn2.Height-2,btn2.Width-1,BGRA(205,218,234,255));
// Merge Bitmaps backBmp.PutImage(0,0,lightBmp,dmDrawWithTransparency); lightBmp.Free;
// Paint in Canvas backBmp.Draw(btn2.Canvas,0,0,True); backBmp.Free;
end;</delphi>
Double Gradient with Alpha
Add a new TPaintBox, set 'btn3' as name. Go OnPaint event and add this code:
<delphi>var
myBitmap: TBGRABitmap;
begin
myBitmap:= DoubleGradientAlphaFill( btn3.ClientRect, BGRA(0,0,0,100),BGRA(255,255,255,100), BGRA(100,100,100,100),BGRA(150,150,150,100), gdVertical,gdVertical,gdVertical,0.5); //btn3.Canvas.Draw(0,0,myBitmap.Bitmap); myBitmap.Draw(btn3.Canvas,0,0,False); myBitmap.Free;
end;</delphi>
Progress Bars
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.
Flash Player Progress Bar
'Like flash player setup progress bar'. Requires BGRABitmap and Double Gradient with Alpha.
Notes: Tested on Win32, Kubuntu 10.04 with GTK and Qt.
Add a new TPaintBox, set 'progressbar' as name. Go OnPaint event and add this code:
<delphi>var
ABitmap, ABitmap2: TBGRABitmap; ARect: TRect;
begin
// Initialization // Self.Color:=$004D4D4D; ABitmap:=TBGRABitmap.Create(progressbar.Width,progressbar.Height); ARect:=progressbar.ClientRect;
// Percent of Progress ARect.Right:=Round(ABitmap.Width*0.75);
// Background Gradient ABitmap.Canvas.GradientFill(progressbar.ClientRect,$303030,$323232,gdVertical);
// Background Border ABitmap.Rectangle(0,0,ABitmap.Width,ABitmap.Height,BGRA(28,28,28,255),dmSet);
// Progress Gradient ABitmap2:=DoubleGradientAlphaFill( ARect, BGRA(102,163,226,255),BGRA(83,135,186,255), BGRA(75,121,175,255),BGRA(56,93,135,255), gdVertical,gdVertical,gdVertical,0.5);
// Progress Border ABitmap2.Rectangle(0,0,ARect.Right,ARect.Bottom,BGRA(28,28,28,255),dmSet);
// Progress Light ABitmap2.Rectangle(1,1,ARect.Right-1,ARect.Bottom-1,BGRA(153,212,255,100),dmDrawWithTransparency);
// Merge Bitmaps //ABitmap.Canvas.Draw(0,0,ABitmap2.Bitmap); ABitmap2.Draw(ABitmap.Canvas,0,0,False);
// Draw Bitmap //progressbar.Canvas.Draw(0,0,ABitmap.Bitmap); ABitmap.Draw(progressbar.Canvas,0,0,False);
// Free Bitmap ABitmap.Free; ABitmap2.Free;
end;</delphi>
You can change the 'Percent' of progress changing this line:
<delphi> // Percent of Progress - 33%
ARect.Right:=Round(ABitmap.Width*0.33);
// Percent of Progress - 90% ARect.Right:=Round(ABitmap.Width*0.90);</delphi>
About Dialogs
"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
Lazarus About
Description: Lazarus-like about dialog.
Requires BGRABitmap.
- ToDO:
Smooth text- Bitmap with leopard
- Paw
Add a new TPaintBox, and set Width = 450, set Height = 300, set Name = 'logo'
(you can set another width and height, for example 900 x 600)
Go to OnPaint event and add this code:
<delphi>var
bmp, bmp2, bmp3, bmp4, bmp5, bmp6: TBGRABitmap; rct: TRect;
procedure DrawBackground; begin // Background bmp:= TBGRABitmap.Create(logo.Width,logo.Height,BGRAWhite);
rct:= logo.ClientRect; rct.Left:= 1; rct.Top:= 1; rct.Right:= logo.Width-1; rct.Bottom:= Round(logo.Height*0.935);
//radial bmp.GradientFill( rct.Left,rct.Top,rct.Right,rct.Bottom, BGRA(117,172,224,255), BGRA(49,74,132,255), gtRadial, PointF(Round(rct.Right*0.85),Round(rct.Bottom*0.50)), PointF(Round(rct.Left),Round(rct.Bottom)), dmSet); end;
procedure DrawEclipse; begin bmp2:= TBGRABitmap.Create(rct.Right,rct.Bottom);
bmp2.FillEllipseAntialias( Round(rct.Right*0.57), Round(rct.Bottom*0.58), Round(rct.Right*0.31), Round(rct.Bottom*0.53), BGRA(255,255,255,30));
bmp2.EraseEllipseAntialias( Round(rct.Right*0.585), Round(rct.Bottom*0.58), Round(rct.Right*0.31*0.88), Round(rct.Bottom*0.53*0.88), 255); end;
procedure ThinCircleAndFrame; var mask: TBGRABitmap; begin bmp5:= TBGRABitmap.Create(rct.Right,rct.Bottom); bmp5.GradientFill(0,0,bmp5.width,bmp5.Height, BGRA(117,172,224,255), BGRA(49,74,132,255), gtLinear, PointF(Round(rct.Right*0.5),Round(rct.Bottom*0.50)), PointF(Round(rct.Right),Round(rct.Bottom)), dmSet);
mask:= TBGRABitmap.Create(rct.Right,rct.Bottom, BGRABlack); mask.EllipseAntialias( Round(rct.Right*0.53), Round(rct.Bottom*0.50), Round(rct.Right*0.40), Round(rct.Bottom*0.65), BGRA(255,255,255,192), 0.6); bmp5.ApplyMask(mask); mask.free;
// Frame bmp6:= TBGRABitmap.Create(logo.Width,logo.Height); bmp6.Rectangle(logo.ClientRect,BGRABlack,BGRA(0,0,0,0),dmDrawWithTransparency); bmp6.DrawLine(1,logo.Height-2,logo.Width-2,logo.Height-2,BGRA(0,0,0,75),True); bmp6.DrawLine(logo.Width-2,1,logo.Width-2,logo.Height-2,BGRA(0,0,0,75),True); end;
procedure DrawText; begin // Text bmp4:= TBGRABitmap.Create(logo.Width,logo.Height);
// 'Free Pascal' bmp5.FontAntialias:=True; bmp5.FontStyle:=[fsBold]; bmp5.FontHeight:=Round(logo.Height*0.065); bmp5.TextOut(Round(logo.Width*0.15),Round(logo.Height*0.045),'Free Pascal',BGRAWhite);
// 'Lazarus' bmp5.FontHeight:=Round(logo.Height*0.18); bmp5.TextOut(Round(logo.Width*0.05),Round(logo.Height*0.07),'Lazarus',BGRAWhite);
// 'Project' bmp4.FontHeight:=Round(logo.Height*0.052); bmp4.TextOut(Round(logo.Width*0.20),Round(logo.Height*0.27),'Project',BGRAWhite);
// 'Write Once' bmp4.FontHeight:=Round(logo.Height*0.07); bmp4.TextOut(Round(logo.Width*0.02),Round(logo.Height*0.57),'Write Once',BGRA(255,255,255,100)); bmp4.GradientFill(Round(logo.Width*0.02),Round(logo.Height*0.66), Round(logo.Width*0.46),Round(logo.Height*0.66)+1, BGRA(255,255,255,20),BGRA(0,0,0,30),gtLinear, PointF(logo.Width*0.22,0),PointF(logo.Width*0.48,0), dmDrawWithTransparency);
// 'Compile Anywhere' bmp4.TextOut(Round(logo.Width*0.26),Round(logo.Height*0.8),'Compile Anywhere',BGRA(255,255,255,100)); bmp4.GradientFill(Round(logo.Width*0.26),Round(logo.Height*0.89), Round(logo.Width*0.70),Round(logo.Height*0.89)+1, BGRA(255,255,255,20),BGRA(0,0,0,50),gtLinear, PointF(logo.Width*0.26,0),PointF(logo.Width*0.70,0), dmDrawWithTransparency); end;
procedure RedRectangle; var rct2: TRect; gradInfo: array of TnGradientInfo; bmpGrad: TBGRABitmap; begin bmp3:= TBGRABitmap.Create(logo.Width,logo.Height);
rct2:= logo.ClientRect; rct2.Left:= Round(rct2.Right*0.06); rct2.Top:= Round(rct2.Bottom*0.27); rct2.Right:= Round(rct2.Right*0.48); rct2.Bottom:= Round(rct2.Bottom*0.337);
setlength(gradInfo,4); // Red Alpha Gradient gradInfo[0] := nGradientInfo(BGRAPixelTransparent, BGRA(255,0,0,255), gdHorizontal, 0.25); gradInfo[1] := nGradientInfo(BGRA(255,0,0,255), BGRA(160,0,0,180), gdHorizontal, 0.5); gradInfo[2] := nGradientInfo(BGRA(160,0,0,180), BGRA(255,0,0,255), gdHorizontal, 0.75); gradInfo[3] := nGradientInfo(BGRA(255,0,0,255), BGRAPixelTransparent, gdHorizontal, 1);
bmpGrad := nGradientAlphaFill(rct2,gdHorizontal,gradInfo); bmp3.PutImage(rct2.Left,rct2.Top,bmpGrad,dmDrawWithTransparency); bmpGrad.Free; end;
begin
DrawBackground; DrawEclipse; ThinCircleAndFrame; DrawText; RedRectangle;
// Merge Bitmaps bmp.PutImage(0,0,bmp2,dmDrawWithTransparency); bmp.PutImage(0,0,bmp3,dmDrawWithTransparency); bmp.PutImage(0,0,bmp4,dmDrawWithTransparency); bmp.PutImage(0,0,bmp5,dmDrawWithTransparency); bmp.PutImage(0,0,bmp6,dmDrawWithTransparency);
// Draw in Canvas bmp.Draw(logo.Canvas,0,0,True);
// Free Bitmaps bmp.Free; bmp2.Free; bmp3.Free; bmp4.Free; bmp5.Free; bmp6.Free;
end; </delphi>
Text Shadow
This requires BGRABitmap, BGRABitmapTypes & BGRAGradients.
Go OnPaint event and add this code:
<delphi>procedure TForm1.FormPaint(Sender: TObject); var
bmp1,bmp2: TBGRABitmap; txt: String;
begin
txt:= 'TextShadow!';
// Simple Shadow bmp1:= TextShadow(200,40,txt,32,BGRAWhite,BGRABlack,1,1); bmp1.Draw(Canvas,0,0,False); bmp1.Free;
// Blured Shadow bmp1:= TextShadow(200,40,txt,32,BGRABlack,BGRA(128,128,255,255),4,4,5); bmp1.Draw(Canvas,0,40,False); bmp1.Free;
// Neon Shadow bmp1:= TextShadow(200,40,txt,32,BGRA(255,255,255,200),BGRA(0,255,0,255),0,0,5); bmp1.Draw(Canvas,0,80,False); bmp1.Free;
// Multi Shadow bmp1:= TextShadow(250,50,txt,32,BGRAWhite,BGRA(255,0,0,255),-5,-5,4,[fsBold,fsUnderline],'Tahoma',False); bmp2:= TextShadow(250,50,txt,32,BGRAWhite,BGRA(0,0,255,255),5,5,4,[fsBold,fsUnderline],'Tahoma',True); bmp1.PutImage(0,0,bmp2,dmDrawWithTransparency); bmp1.Draw(Canvas,0,120,False); bmp1.Free; bmp2.Free;
end; </delphi>