Sample Graphics
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.
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);
// Paint in Canvas btn1.Canvas.Draw(0,0,tempbmp1.Bitmap);
// 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.Free;
end;</delphi>
As you can read you need both DoubleGradient & DoubleGradientAlphaFill:
<delphi>unit doublegradient;
{$mode objfpc}{$H+}
interface
uses
Classes, Graphics, BGRABitmap, BGRABitmapTypes;
function DoubleGradientAlphaFill(ARect: TRect; AStart1,AStop1,AStart2,AStop2: TBGRAPixel;
ADirection1,ADirection2,APos: TGradientDirection; AValue: Single): TBGRABitmap;
function DoubleGradientFill(ARect: TRect; AStart1,AStop1,AStart2,AStop2: TColor;
ADirection1,ADirection2,APos: TGradientDirection; AValue: Single): TBitmap;
implementation
function DoubleGradientAlphaFill(ARect: TRect; AStart1,AStop1,AStart2,AStop2: TBGRAPixel;
ADirection1,ADirection2,APos: TGradientDirection; AValue: Single): TBGRABitmap;
var
ABitmap: TBGRABitmap; ARect1,ARect2: TRect; APoint1,APoint2,APoint3,APoint4: TPointF;
begin
ABitmap := TBGRABitmap.Create(ARect.Right,ARect.Bottom); if AValue <> 0 then ARect1:=ARect; if AValue <> 1 then ARect2:=ARect; if APos = gdVertical then begin ARect1.Bottom:=Round(ARect1.Bottom * AValue); ARect2.Top:=ARect1.Bottom; end else if APos = gdHorizontal then begin ARect1.Right:=Round(ARect1.Right * AValue); ARect2.Left:=ARect1.Right; end; if ADirection1 = gdVertical then begin APoint1:=PointF(ARect1.Left,ARect1.Top); APoint2:=PointF(ARect1.Left,ARect1.Bottom); end else if ADirection1 = gdHorizontal then begin APoint1:=PointF(ARect1.Left,ARect1.Top); APoint2:=PointF(ARect1.Right,ARect1.Top); end; if ADirection2 = gdVertical then begin APoint3:=PointF(ARect2.Left,ARect2.Top); APoint4:=PointF(ARect2.Left,ARect2.Bottom); end else if ADirection2 = gdHorizontal then begin APoint3:=PointF(ARect2.Left,ARect2.Top); APoint4:=PointF(ARect2.Right,ARect2.Top); end; if AValue <> 0 then ABitmap.GradientFill(ARect1.Left,ARect1.Top,ARect1.Right,ARect1.Bottom, AStart1,AStop1,gtLinear,APoint1,APoint2,dmDrawWithTransparency,True,False); if AValue <> 1 then ABitmap.GradientFill( ARect2.Left,ARect2.Top,ARect2.Right,ARect2.Bottom, AStart2,AStop2,gtLinear,APoint3,APoint4,dmDrawWithTransparency,True,False); Result:=ABitmap;
end;
function DoubleGradientFill(ARect: TRect; AStart1,AStop1,AStart2,AStop2: TColor;
ADirection1,ADirection2,APos: TGradientDirection; AValue: Single): TBitmap;
var
ABitmap: TBitmap; ARect1,ARect2: TRect;
begin
ABitmap := TBitmap.Create; ABitmap.Width:=ARect.Right; ABitmap.Height:=ARect.Bottom; if AValue <> 0 then ARect1:=ARect; if AValue <> 1 then ARect2:=ARect; if APos = gdVertical then begin ARect1.Bottom:=Round(ARect1.Bottom * AValue); ARect2.Top:=ARect1.Bottom; end else if APos = gdHorizontal then begin ARect1.Right:=Round(ARect1.Right * AValue); ARect2.Left:=ARect1.Right; end; if AValue <> 0 then ABitmap.Canvas.GradientFill(ARect1,AStart1,AStop1,ADirection1); if AValue <> 1 then ABitmap.Canvas.GradientFill(ARect2,AStart2,AStop2,ADirection2); Result:=ABitmap;
end;
end.</delphi>