Tutorials

Andorra 2D tutorials
Canvas

Introduction
This tutorial covers the Andorra 2D canvas which exists since version 0.2. It is an object that can be drawn on similarly to the Windows GDI. Currently the following objects can be drawn with the Andorra 2D canvas:

  • Text
  • Lines
  • Arrows
  • Rectangles
  • Tetragons
  • Circles/ellipses


This doesn't sound very spectacular, but it has to be considered that most objects can be drawn with colour gradients and textures.

Use
The TAdDraw object contains its own canvas object, (just like every Andorra 2D surface derived from TAdRenderingSurface, that includes TAdTextureSurface) which can be accessed easily. To use canvas-specific types, the unit "AdCanvas" should be included.

Delphi-Code:
AdDraw1.BeginScene;
AdDraw1.ClearSurface(clBlack);

with AdDraw1.Canvas do
begin
  //This is where the canvas code will be put
  Release; //<-- If this line is left out, nothing is drawn.
end;

AdDraw1.EndScene;
AdDraw1.Flip;

Internally, the canvas manages so-called "display lists". In those, the canvas objects are stored. Upon calling "Release", the list is drawn and a new one is created.

The colour palette
The unit "AdConsts.pas" shall be briefly mentioned. It contains all the SVG colour constants defined by the W3C. (Seehttp://www.w3.org/TR/css3-color/#svg-color) These colours can be used easily.

Pens and brushes
Just like the TCanvas, the TAdCanvas has two essential objects: A pen and a brush. The pen defines how lines are supposed to look, the brush defines the appearance of the filling.
TAdBrush has the following properties:

Delphi-Code:
Color:TAndorraColor //Default colour
GradientColor:TAndorraColor
GradientDirecton:TAdCanvasGradientDirection //Direction of the gradient (gdVertical, gdHorizontal)
Style:TAdBrushStyle //Style of the filling (abClear, abSolid, abGradient)
Texture:TAd2dTexture //Texture the object is filled with
TextureMode:TAdCanvasTextureMode //Specifies the way the object is filled with the texture (tmTile, tmStretch, tmStretchAlign)
TexturePosition:TAdCanvasTexturePosition //Where the texture is supposed to be (tpStatic, tpDynamic)
BlendMode:TAd2dBlendMode

The AdPen looks similar:

Delphi-Code:
Color:TAndorraColor
Width:single
Texture:TAd2dTexture
TextureMode:TAdCanvasTextureMode //The way the line is filled with the texture (tmTile, tmStretch, tmStretchAlign)
TexturePosition:TAdCanvasTexturePosition //Specifies where the texture is supposed to be (tpStatic, tpDynamic)
PenPosition:TAdPenPosition //Specifies the line's position (ppOuter,ppMiddle,ppInner)
Style:TAdPenStyle //(apNone, apSolid)
BlendMode:TAd2dBlendMode

Drawing lines
There are two commands that are important for drawing lines:

Delphi-Code:
MoveTo(X,Y) //Positioning the pen at the specified position
LineTo(X,Y) //Draw a line from the last position or the position where the pen has been set to via MoveTo

Example 1:

Delphi-Code:
//Draws a black line from (0;0) to (100;100)
Pen.Color := AdCol32_Black; // := Ad_ARGB(255, 0, 0, 0);
MoveTo(0,0);
LineTo(100,100);

Example 2:

Delphi-Code:
//Draws a thick line with a colour gradient from (0;0) to (100;100)
Pen.Width := 4;
Pen.Color := Ad_ARGB(255,0,0,255);
MoveTo(0,0);
Pen.Color := Ad_ARGB(255,255,0,0);
LineTo(100,100);

Drawing rectangles
This is done with the command "Rectangle":

Example 1:

Delphi-Code:
//Draws a blue rectangle with brown border from (1;1) to (100;100);
Pen.Color := AdCol32_Coral;
Brush.Color := AdCol32_CornflowerBlue;
Rectangle(1,1,100,100);

Example 2:

Delphi-Code:
//Draws a rectangle with horizontal colour gradient and blue border from (1;1) to (100;100)
Pen.Color := Ad_ARGB(255,0,0,255);;
Pen.Style := apSolid;
Brush.Color := Ad_ARGB(255,255,255,0);
Brush.GradientColor := Ad_ARGB(255,255,0,255);
Brush.GradientDirecton := gdHorizontal;
Rectangle(1,1,100,100);

Drawing Circles
This is done with the commands "Circle" and "Ellipse".

Example 1:

Delphi-Code:
//Draws a circle with a colour gradient around the point (50;50) with a radius of 50px
Pen.Style := apNone;
Brush.Color := AdCol32_Azure;
Brush.GradientColor := AdCol32_Orange;
Circle(50,50,50);

Drawing text
This is done with the ocmmand "TextOut"

Example 1:

Delphi-Code:
//Draws blue text
Pen.Color := Ad_ARGB(200, 0, 0, 255);
TextOut(0,0,'Test Text!');

Example 2:

Delphi-Code:
Pen.Color := AdCol32_Black;
Font := AdDraw.Fonts.GenerateFont('Comic Sans MS',12, [afItalic]);
TextOut(0,0,'Test Text!');

Copyright and Licence
(c) by Andreas Stöckel Mai 2007
Translation by 3_of_8 (Manuel Eberl)

Revision 2: December 2007
Revision 3: July 2008

The content of this tutorial is subject to the GNU Licence for Free Documentation.

This page was generated with the help of the following PHP-Scripts: GeSHi a free PHP Syntax highlighter and StringParser_BBCode a free BBCode Parser.