Difference between revisions of "BGRABitmap tutorial 14"

From Free Pascal wiki
Jump to navigationJump to search
m (typos)
Line 128: Line 128:
 
Other examples are in the testcanvas2d directory of BGRABitmap archive. Scripts are taken from [http://jean-paul.davalan.pagesperso-orange.fr/lang/jsc/js09.html Jean-Paul Davalan web site] which contains HTML Canvas examples.
 
Other examples are in the testcanvas2d directory of BGRABitmap archive. Scripts are taken from [http://jean-paul.davalan.pagesperso-orange.fr/lang/jsc/js09.html Jean-Paul Davalan web site] which contains HTML Canvas examples.
  
[[BGRABitmap tutorial 13|Previous tutorial (pixel coordinates)]]
+
[[BGRABitmap tutorial 13|Previous tutorial (pixel coordinates)]] [[BGRABitmap tutorial 15|Next tutorial (3D)]]
  
 
[[Category:Graphics]]
 
[[Category:Graphics]]

Revision as of 16:07, 5 July 2011

Deutsch (de) English (en)


Home | Tutorial 1 | Tutorial 2 | Tutorial 3 | Tutorial 4 | Tutorial 5 | Tutorial 6 | Tutorial 7 | Tutorial 8 | Tutorial 9 | Tutorial 10 | Tutorial 11 | Tutorial 12 | Tutorial 13 | Tutorial 14 | Tutorial 15 | Tutorial 16 | Edit

This tutorial shows how to use the Canvas2D property of BGRABitmap. Canvas2D is designed to work as the javascript 2d context of the HTML Canvas object.

First program

Here is a very simple example : <delphi> procedure TForm1.FormPaint(Sender: TObject); var bmp: TBGRABitmap;

   ctx: TBGRACanvas2D;   

begin

 bmp := TBGRABitmap.Create(ClientWidth,ClientHeight,BGRA(210,210,210));
 ctx := bmp.Canvas2D;
 ctx.fillStyle('rgb(240,128,0)');
 ctx.fillRect(30,30,80,60);
 ctx.strokeRect(50,50,80,60);  
 bmp.Draw(Canvas,0,0);
 bmp.Free;

end; </delphi>

The bitmap has a Canvas2D property which provides the fillRect and strokeRect function. The fillStyle is defined to orange by specifying a css color string. When the shape is filled, it uses the fill style, and when the border is drawn, it uses the stroke style.

The code above is equivalent to this javascript code : <javascript>

var canvas = document.getElementsByTagName("canvas")[0];
canvas.width = 200
canvas.height = 200
if (canvas.getContext){
  var ctx = canvas.getContext("2d"); 
  ctx.fillStyle = "rgb(240,128,0)";
  ctx.fillRect(30,30,80,60);
  ctx.strokeRect(50,50,80,60);
}

</javascript>

BGRATutorial14a.png

Complex shapes

To draw a complex shape, it is necessary to define a path : <delphi> procedure pave();

 begin
   ctx.fillStyle ('rgb(130,100,255)');
   ctx.strokeStyle ('rgb(0,0,255)');
   ctx.beginPath();
   ctx.lineWidth:=2;
   ctx.moveTo(5,5);ctx.lineTo(20,10);ctx.lineTo(55,5);ctx.lineTo(45,18);ctx.lineTo(30,50);
   ctx.closePath();
   ctx.stroke();
   ctx.fill();
 end;  

begin

 bmp := TBGRABitmap.Create(ClientWidth,ClientHeight,BGRA(210,210,210));
 ctx := bmp.Canvas2D;
 pave();
 bmp.Draw(Canvas,0,0);
 bmp.Free;

end; </delphi>

Notice that the line width is defined by the property lineWidth and that the path begins with a beginPath call. If you want more information on the way path works, see javascript documentation.

Tutorial14b.png

Using transformations

Now we can draw the triangle six times with a rotation by calling transformation functions.

<delphi> procedure six();

 var
   i: Integer;
 begin
    ctx.save();
    for i := 0 to 5 do
    begin
       ctx.rotate(2*PI/6);
       pave();
    end;
    ctx.restore();
 end;

begin

 bmp := TBGRABitmap.Create(ClientWidth,ClientHeight,BGRA(210,210,210));
 ctx := bmp.Canvas2D;
 ctx.translate(80,80);
 six;
 bmp.Draw(Canvas,0,0);
 bmp.Free;

end; </delphi>

BGRATutorial14c.png

Gradients and memory usage

To use gradients, Canvas2D provides the createLinearGradient and createPattern functions. Theses functions return an interfaced object. You must not free them explicitely. They are freed when there is no more reference to them. For example :

<delphi>var

 grad: IBGRACanvasGradient2D;

begin

 grad := ctx.createLinearGradient(0,0,320,240);
 grad.addColorStop(0.3, '#ff0000');
 grad.addColorStop(0.6, '#0000ff');
 ctx.fillStyle(grad);
 grad := ctx.createLinearGradient(0,0,320,240);
 grad.addColorStop(0.3, '#ffffff');
 grad.addColorStop(0.6, '#000000');
 ctx.strokeStyle(grad);
 ctx.lineWidth := 5;
 ctx.moveto(160,120);
 ctx.arc(160,120,100,Pi/6,-Pi/6,false);
 ctx.fill();
 ctx.stroke();

end; </delphi>

The grad variable is assigned with the gradient objects, but there is no call to Free.

BGRATutorial14d.png

More examples

Other examples are in the testcanvas2d directory of BGRABitmap archive. Scripts are taken from Jean-Paul Davalan web site which contains HTML Canvas examples.

Previous tutorial (pixel coordinates) Next tutorial (3D)