* * *

Author Topic: BGRABitmap tutorial  (Read 237243 times)

circular

  • Hero Member
  • *****
  • Posts: 2570
    • Personal webpage
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!
 8)
« 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 »
Add some pictures :)

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.

This requires also Double Gradient ( http://wiki.lazarus.freepascal.org/Double_Gradient )

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;
  3.   gradBmp: TBitmap;
  4. begin
  5.   // Background Gradient
  6.   gradBmp := DoubleGradientFill(
  7.               btn2.ClientRect,
  8.               $FFFAF5,$FAF0E6,
  9.               $F4E6DC,$F7E9DD,
  10.               gdVertical,gdVertical,gdVertical,0.5);
  11.  
  12.   // Use as background
  13.   backBmp := TBGRABitmap.Create(gradBmp);
  14.   gradBmp.Free;
  15.  
  16.   // Light Gradient
  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: 2570
    • Personal webpage
Re: BGRABitmap tutorial
« Reply #3 on: March 12, 2011, 08:28:08 pm »
Add some pictures :)
Yes. It's a good idea.

About that line :
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: 2570
    • Personal webpage
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;
  3.   gradBmp: TBitmap;
  4. begin
  5.   // Background Gradient
  6.   gradBmp := DoubleGradientFill(
  7.               btn2.ClientRect,
  8.               $FFFAF5,$FAF0E6,
  9.               $F4E6DC,$F7E9DD,
  10.               gdVertical,gdVertical,gdVertical,0.5);
  11.  
  12.   // Use as background
  13.   backBmp := TBGRABitmap.Create(gradBmp);
  14.   gradBmp.Free;
  15.  
  16.   // Light Gradient
  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.

But your Win7 explorer toolbar button 'light gradient' doesn't have transparency.
« Last Edit: March 12, 2011, 10:13:27 pm by lainz »

circular

  • Hero Member
  • *****
  • Posts: 2570
    • Personal webpage
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: 2570
    • Personal webpage
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: 2570
    • Personal webpage
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: 2570
    • Personal webpage
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

TBGRADefaultBitmap.Init
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: 2570
    • Personal webpage
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: 2570
    • Personal webpage
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

 

Recent

Get Lazarus at SourceForge.net. Fast, secure and Free Open Source software downloads Open Hub project report for Lazarus