Difference between revisions of "BGRABitmap tutorial 14"
m (→First program) |
m (Fixed syntax highlighting; typos) |
||
Line 3: | Line 3: | ||
{{BGRABitmap_tutorial_index}} | {{BGRABitmap_tutorial_index}} | ||
− | This tutorial shows how to use the Canvas2D property of BGRABitmap. Canvas2D is designed to work | + | This tutorial shows how to use the Canvas2D property of BGRABitmap. Canvas2D is designed to work like the Javascript 2D context of the HTML Canvas object. |
== First program == | == First program == | ||
− | Here is a very simple example : | + | Here is a very simple example: |
− | <syntaxhighlight> | + | |
+ | <syntaxhighlight lang="pascal"> | ||
procedure TForm1.FormPaint(Sender: TObject); | procedure TForm1.FormPaint(Sender: TObject); | ||
var bmp: TBGRABitmap; | var bmp: TBGRABitmap; | ||
Line 27: | Line 28: | ||
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 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 | + | The code above is equivalent to this Javascript code: |
+ | |||
<syntaxhighlight lang="javascript"> | <syntaxhighlight lang="javascript"> | ||
var canvas = document.getElementsByTagName("canvas")[0]; | var canvas = document.getElementsByTagName("canvas")[0]; | ||
Line 44: | Line 46: | ||
== Complex shapes == | == Complex shapes == | ||
− | To draw a complex shape, it is necessary to define a path : | + | To draw a complex shape, it is necessary to define a path: |
− | <syntaxhighlight> | + | |
+ | <syntaxhighlight lang="pascal"> | ||
+ | procedure pave(); | ||
begin | begin | ||
ctx.fillStyle ('rgb(130,100,255)'); | ctx.fillStyle ('rgb(130,100,255)'); | ||
Line 63: | Line 67: | ||
bmp.Draw(Canvas,0,0); | bmp.Draw(Canvas,0,0); | ||
bmp.Free; | bmp.Free; | ||
− | end; </syntaxhighlight> | + | end; |
+ | </syntaxhighlight> | ||
− | 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 [https://developer.mozilla.org/en/Canvas_tutorial/Drawing_shapes | + | 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 the [https://developer.mozilla.org/en/Canvas_tutorial/Drawing_shapes Javascript documentation]. |
[[Image:Tutorial14b.png]] | [[Image:Tutorial14b.png]] | ||
Line 73: | Line 78: | ||
Now we can draw the triangle six times with a rotation by calling transformation functions. | Now we can draw the triangle six times with a rotation by calling transformation functions. | ||
− | <syntaxhighlight> | + | <syntaxhighlight lang="pascal"> |
+ | procedure six(); | ||
var | var | ||
i: Integer; | i: Integer; | ||
Line 92: | Line 98: | ||
bmp.Draw(Canvas,0,0); | bmp.Draw(Canvas,0,0); | ||
bmp.Free; | bmp.Free; | ||
− | end; </syntaxhighlight> | + | end; |
+ | </syntaxhighlight> | ||
[[Image:BGRATutorial14c.png]] | [[Image:BGRATutorial14c.png]] | ||
Line 98: | Line 105: | ||
== Gradients and memory usage == | == 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 | + | 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 are no more references to them. For example: |
− | <syntaxhighlight>var | + | <syntaxhighlight lang="pascal"> |
+ | var | ||
grad: IBGRACanvasGradient2D; | grad: IBGRACanvasGradient2D; | ||
begin | begin | ||
Line 118: | Line 126: | ||
ctx.fill(); | ctx.fill(); | ||
ctx.stroke(); | ctx.stroke(); | ||
− | end; </syntaxhighlight> | + | end; |
+ | </syntaxhighlight> | ||
The grad variable is assigned with the gradient objects, but there is no call to Free. | The grad variable is assigned with the gradient objects, but there is no call to Free. | ||
Line 126: | Line 135: | ||
== More examples == | == More 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. | + | Other examples are in the testcanvas2d directory of BGRABitmap archive. Scripts are taken from the [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 15|Next tutorial (3D)]] | [[BGRABitmap tutorial 13|Previous tutorial (pixel coordinates)]] [[BGRABitmap tutorial 15|Next tutorial (3D)]] |
Revision as of 07:44, 5 January 2020
│ 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 like the Javascript 2D context of the HTML Canvas object.
First program
Here is a very simple example:
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;
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:
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);
}
Complex shapes
To draw a complex shape, it is necessary to define a path:
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;
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 the Javascript documentation.
Using transformations
Now we can draw the triangle six times with a rotation by calling transformation functions.
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;
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 are no more references to them. For example:
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;
The grad variable is assigned with the gradient objects, but there is no call to Free.
More examples
Other examples are in the testcanvas2d directory of BGRABitmap archive. Scripts are taken from the Jean-Paul Davalan web site which contains HTML Canvas examples.