BGRABitmap tutorial

[circular]

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!
 

[lainz]

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;


[lainz]

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]

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;


[circular]

Add some pictures

Yes. It's a good idea.

About that line :

tempbmp1.Canvas.Draw(0,0,tempbmp2.Bitmap);

It does not work on gtk, because TBitmap cannot be drawn with alpha channel. Instead, use :

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

Edit: i've added images to the tutorial

[circular]

For the Win7 explorer toolbar button, I recommend you to do it this way:

Code: (Pascal) [Select]

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);
  lightBmp.Rectangle(0,0,btn2.Width,btn2.Height-2,
    BGRA(255,255,255,100),
    BGRA(255,255,255,0),
    dmDrawWithTransparency);
  lightBmp.DrawLine(0,btn2.Height-1,btn2.Width,btn2.Height-1,BGRA(160,175,195,255),True);
  lightBmp.DrawLine(0,btn2.Height-2,btn2.Width,btn2.Height-2,BGRA(205,218,234,255),True);

  // Merge Bitmaps
  backBmp.PutImage(0,0,lightBmp,dmDrawWithTransparency);
  lightBmp.Free;

  // Paint in Canvas
  backBmp.Draw(btn2.Canvas,0,0,True);
  backBmp.Free;
end;

[lainz]

Thankyou, I been updated two codes.

But your Win7 explorer toolbar button 'light gradient' doesn't have transparency.

[circular]

What do you mean?

[lainz]

What do you mean?

See the attached picture, the 'light gradient' must be alpha 100, but is 100% white, no transparency.

[circular]

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]

   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));

[circular]

I've added a tutorial for layers :
http://wiki.lazarus.freepascal.org/BGRABitmap_tutorial_5

[Dibo]

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]

Now i've added phong shading (on subversion). You could do pretty buttons with it. 

[Imants]

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]

You're right. I've taken your remark into account.

[circular]

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]

var bmp: TBGRABitmap;
begin
   ...
   bmp.CanvasFP.Rectangle(20,20,500,500);
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.