### Bookstore

 Computer Math and Games in Pascal Lazarus, the complete guide (only a few left)

### Author Topic: BGRABitmap tutorial  (Read 244209 times)

#### circular

• Hero Member
• Posts: 2592
##### BGRABitmap tutorial
« on: March 12, 2011, 02:47:08 pm »
Hello people.

BGRABitmap is a drawing library to draw antialiased and alphablended graphics, gradients, textures etc.
It's beginning to work fine. So I've written some tutorials on Lazarus wiki for BGRABitmap library. It starts here :

http://wiki.lazarus.freepascal.org/BGRABitmap_tutorial

There are also examples in testbgrafunc folder of LazPaint archives :

http://sourceforge.net/projects/lazpaint/files/lazpaint/

Have fun!

« Last Edit: April 11, 2011, 01:58:31 pm by circular »
Conscience is the debugger of the mind

#### lainz

• Guest
##### Re: BGRABitmap tutorial
« Reply #1 on: March 12, 2011, 03:10:38 pm »

Here is an example with BGRABitmap to create 'like flash player setup' single gradient button.

Add a PaintBox and set name to 'btn1', then go to 'On Paint' event and add this code:

Code: [Select]
`  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;`
« Last Edit: March 12, 2011, 10:10:50 pm by lainz »

#### lainz

• Guest
##### Re: BGRABitmap tutorial
« Reply #2 on: March 12, 2011, 07:34:57 pm »
Here is another example with BGRABitmap to create 'like windows 7' explorer toolbar.

Add a PaintBox and set name to 'btn2', then go to 'On Paint' event and add this code:

Code: Pascal  [Select]
1. var
2.   backBmp, lightBmp: TBGRABitmap;
4. begin
7.               btn2.ClientRect,
8.               \$FFFAF5,\$FAF0E6,
9.               \$F4E6DC,\$F7E9DD,
10.               gdVertical,gdVertical,gdVertical,0.5);
11.
12.   // Use as background
15.
17.   lightBmp:= TBGRABitmap.Create(btn2.Width,btn2.Height,BGRA(0,0,0,0));
18.    lightBmp.Rectangle(0,0,btn2.Width,btn2.Height-2,
19.      BGRA(255,255,255,100),
20.      dmSet);
21.    lightBmp.SetHorizLine(0,btn2.Height-1,btn2.Width-1,BGRA(160,175,195,255));
22.    lightBmp.SetHorizLine(0,btn2.Height-2,btn2.Width-1,BGRA(205,218,234,255));
23.
24.   // Merge Bitmaps
25.   backBmp.PutImage(0,0,lightBmp,dmDrawWithTransparency);
26.   lightBmp.Free;
27.
28.   // Paint in Canvas
29.   backBmp.Draw(btn2.Canvas,0,0,True);
30.   backBmp.Free;
31. end;
32.
« Last Edit: March 13, 2011, 01:16:45 pm by lainz »

#### circular

• Hero Member
• Posts: 2592
##### Re: BGRABitmap tutorial
« Reply #3 on: March 12, 2011, 08:28:08 pm »
Yes. It's a good idea.

Quote
tempbmp1.Canvas.Draw(0,0,tempbmp2.Bitmap);
It does not work on gtk, because TBitmap cannot be drawn with alpha channel. Instead, use :

Quote
tempbmp2.Draw(tempbmp1.Canvas,0,0,False);

Edit: i've added images to the tutorial
« Last Edit: March 12, 2011, 08:48:00 pm by circular »
Conscience is the debugger of the mind

#### circular

• Hero Member
• Posts: 2592
##### Re: BGRABitmap tutorial
« Reply #4 on: March 12, 2011, 09:01:13 pm »
For the Win7 explorer toolbar button, I recommend you to do it this way:
Code: Pascal  [Select]
1. var
2.   backBmp, lightBmp: TBGRABitmap;
4. begin
7.               btn2.ClientRect,
8.               \$FFFAF5,\$FAF0E6,
9.               \$F4E6DC,\$F7E9DD,
10.               gdVertical,gdVertical,gdVertical,0.5);
11.
12.   // Use as background
15.
17.   lightBmp:= TBGRABitmap.Create(btn2.Width,btn2.Height);
18.   lightBmp.Rectangle(0,0,btn2.Width,btn2.Height-2,
19.     BGRA(255,255,255,100),
20.     BGRA(255,255,255,0),
21.     dmDrawWithTransparency);
22.   lightBmp.DrawLine(0,btn2.Height-1,btn2.Width,btn2.Height-1,BGRA(160,175,195,255),True);
23.   lightBmp.DrawLine(0,btn2.Height-2,btn2.Width,btn2.Height-2,BGRA(205,218,234,255),True);
24.
25.   // Merge Bitmaps
26.   backBmp.PutImage(0,0,lightBmp,dmDrawWithTransparency);
27.   lightBmp.Free;
28.
29.   // Paint in Canvas
30.   backBmp.Draw(btn2.Canvas,0,0,True);
31.   backBmp.Free;
32. end;
Conscience is the debugger of the mind

#### lainz

• Guest
##### Re: BGRABitmap tutorial
« Reply #5 on: March 12, 2011, 09:57:35 pm »
Thankyou, I been updated two codes.

« Last Edit: March 12, 2011, 10:13:27 pm by lainz »

#### circular

• Hero Member
• Posts: 2592
##### Re: BGRABitmap tutorial
« Reply #6 on: March 13, 2011, 02:12:21 am »
What do you mean?
Conscience is the debugger of the mind

#### lainz

• Guest
##### Re: BGRABitmap tutorial
« Reply #7 on: March 13, 2011, 04:01:26 am »
What do you mean?

See the attached picture, the 'light gradient' must be alpha 100, but is 100% white, no transparency.
« Last Edit: March 13, 2011, 04:09:31 am by lainz »

#### circular

• Hero Member
• Posts: 2592
##### Re: BGRABitmap tutorial
« Reply #8 on: March 13, 2011, 11:28:46 am »
Ok. There was a problem when importing TBitmap. By default, a TBitmap is completely transparent because alpha = 0. I've fixed it on subversion.

By the way, you can simplify the drawing this way :
Code: Pascal  [Select]
1.    lightBmp.Rectangle(0,0,btn2.Width,btn2.Height-2,
2.      BGRA(255,255,255,100),
3.      dmSet);
4.    lightBmp.SetHorizLine(0,btn2.Height-1,btn2.Width-1,BGRA(160,175,195,255));
5.    lightBmp.SetHorizLine(0,btn2.Height-2,btn2.Width-1,BGRA(205,218,234,255));
Conscience is the debugger of the mind

#### circular

• Hero Member
• Posts: 2592
##### Re: BGRABitmap tutorial
« Reply #9 on: March 19, 2011, 11:53:56 pm »
Conscience is the debugger of the mind

#### Dibo

• Hero Member
• Posts: 1044
##### Re: BGRABitmap tutorial
« Reply #10 on: March 20, 2011, 12:08:41 am »
I am impressed what BGRABitmap can do. It has potential. We could create interesting components (like gradient panels, etc) with design mode. I am now creating descendant of components which have no alpha support on GTK. TBGRAImageList done, now I am working on TBGRASpeedButton.

#### circular

• Hero Member
• Posts: 2592
##### Re: BGRABitmap tutorial
« Reply #11 on: March 20, 2011, 11:01:39 pm »
Now i've added phong shading (on subversion). You could do pretty buttons with it.
Conscience is the debugger of the mind

#### Imants

• Full Member
• Posts: 151
##### Re: BGRABitmap tutorial
« Reply #12 on: March 21, 2011, 03:13:34 pm »
I notice that there is memory leak in

Begin
...

FFont     := TFont.Create; //<<here
FontName  := 'Arial';
....

When I compiled with Heaptrc it showed this line. An after quick check I didn't find any line where he is destroyed

#### circular

• Hero Member
• Posts: 2592
##### Re: BGRABitmap tutorial
« Reply #13 on: March 21, 2011, 04:36:10 pm »
You're right. I've taken your remark into account.
Conscience is the debugger of the mind

#### circular

• Hero Member
• Posts: 2592
##### Re: BGRABitmap tutorial
« Reply #14 on: March 22, 2011, 01:31:55 am »
I noticed that there is a start of Canvas drawing in FreePascal in unit FPImgCanv. In my distribution, theses Canvas functions are aliased and far from being finished, but anyway, I've added support for it in BGRABitmap. To use it, just write Bitmap.CanvasFP :
Code: Pascal  [Select]
1. var bmp: TBGRABitmap;
2. begin
3.    ...
4.    bmp.CanvasFP.Rectangle(20,20,500,500);
5. end;

Thus, the connection with FreePascal is complete. If it's still not finished, I suppose some functions of BGRABitmap could be easily translated to FPCanvas.
Conscience is the debugger of the mind