Difference between revisions of "Sample Graphics"
(category) |
|||
Line 292: | Line 292: | ||
//bmp5.Free; | //bmp5.Free; | ||
end;</delphi> | end;</delphi> | ||
+ | |||
+ | [[Category:Graphics]] |
Revision as of 08:53, 17 March 2011
Graphics Gallery
This gallery is to show the designs can be created from Lazarus and drawing tools, like BGRABitmap.
gdgfx
Name: gdgfx 'Gradient Graphics'
Author: Lainz
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. Download Includes used version of BGRABitmap & DoubleGradient. 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.
Download: gdgfx.7z (60.01 KB)
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
'like lazarus about dialog'. Requires BGRABitmap.
- ToDO:
- Smooth text
Add 'Project' text down 'Lazarus'- Add red alpha gradient under 'Project' (Requires Double Gradient with Alpha)
- Add ellipse & fill ellipse
- Add footprint
- Add cheetah
- The image must be sizeable, so don't use absolute positions, instead use percentajes.
- When finished update the file lazlogo.png.
Add a new TPaintBox, set Width = 450, set Height = 300, set 'logo' as name,
- You can set another width and height (with same aspect ratio) like 900 x 600.
Go OnPaint event and add this code:
<delphi>var
bmp, bmp2, bmp3, bmp4{, bmp5}: TBGRABitmap; rct{, rct2}: TRect;
begin
// Rectangle Background bmp:= TBGRABitmap.Create(logo.Width,logo.Height); bmp.Rectangle(logo.ClientRect,BGRABlack,BGRAWhite,dmSet);
// Radial Background rct:= logo.ClientRect; rct.Left:= rct.Left+1; rct.Top:= rct.Top+1; rct.Right:= rct.Right-1; rct.Bottom:= Round(rct.Bottom*0.94);
bmp2:= TBGRABitmap.Create(rct.Right,rct.Bottom); bmp2.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.75),Round(rct.Bottom*0.50)), PointF(Round(rct.Left),Round(rct.Bottom)), dmSet);
// Internal Shadow bmp3:= TBGRABitmap.Create(logo.Width,logo.Height); bmp3.DrawLine(1,logo.Height-2,logo.Width-2,logo.Height-2,BGRA(0,0,0,25),True); bmp3.DrawLine(logo.Width-2,1,logo.Width-2,logo.Height-2,BGRA(0,0,0,25),True);
// Text bmp4:= TBGRABitmap.Create(logo.Width,logo.Height);
// 'Free Pascal' bmp4.FontStyle:=[fsBold]; bmp4.FontHeight:=Round(logo.Height*0.06); bmp4.TextOut(Round(logo.Width*0.15),Round(logo.Height*0.025),'Free Pascal',BGRAWhite);
// 'Lazarus' bmp4.FontHeight:=Round(logo.Height*0.18); bmp4.TextOut(Round(logo.Width*0.05),Round(logo.Height*0.05),'Lazarus',BGRAWhite);
// 'Project' bmp4.FontHeight:=Round(logo.Height*0.05); bmp4.TextOut(Round(logo.Width*0.20),Round(logo.Height*0.25),'Project',BGRAWhite);
// 'Write Once' bmp4.FontHeight:=Round(logo.Height*0.07); bmp4.TextOut(Round(logo.Width*0.05),Round(logo.Height*0.6),'Write Once',BGRA(255,255,255,100));
// 'Compile Anywhere' bmp4.TextOut(Round(logo.Width*0.3),Round(logo.Height*0.8),'Compile Anywhere',BGRA(255,255,255,100));
// Red Alpha Gradient {rct2:= logo.ClientRect; rct2.Left:= Round(rct2.Right*0.06); rct2.Top:= Round(rct2.Bottom*0.25); rct2.Right:= Round(rct2.Right*0.28); rct2.Bottom:= Round(rct2.Bottom*0.32);
bmp5:= DoubleGradientAlphaFill( rct2, BGRA(240,0,0,0), BGRA(240,0,0,255), BGRA(240,0,0,255), BGRA(165,0,0,255), gdHorizontal,gdHorizontal,gdHorizontal,0.5);}
// Merge Bitmaps bmp2.Draw(bmp.Canvas,0,0,True); bmp3.Draw(bmp.Canvas,0,0,False); //bmp5.Draw(bmp.Canvas,0,0,False); bmp4.Draw(bmp.Canvas,0,0,False);
// Draw in Canvas bmp.Draw(logo.Canvas,0,0,True);
// Free Bitmaps bmp.Free; bmp2.Free; bmp3.Free; bmp4.Free; //bmp5.Free;
end;</delphi>