TAgg2D is a simple API for AggPas vector graphics library. This API was originally written and published by Maxim Shemanarev © 2005 - 2006 for the C/C++ version of the library.

This documentation tries to provide a complete resource about vector graphics in relation to the AggPas open source library. Each API command (over 100) is documented, almost all have also a commented example. Some examples can be downloaded directly, and for the others the drawing routine can be copy and pasted into your project, to see it in action.

Where apropriate, I link directly to the articles on www.antigrain.com site containing excellent information on some of the topics.

If you are a vector graphics beginner, you can read this documentation from top to bottom. Try out all of the examples, and at the end, you should understand all important concepts. On top of that, if you read this document carefully, you will also discover how to do some nice little tricks (like reflections).

Enjoy, Milano.

• Rendering of arbitrary polygons with Anti-Aliasing and Subpixel Accuracy
• Affine matrix transformations (Rotate, Scale, Skew, Translate, Viewport)
• User to World and vice versa coordinates conversions
• Clipping to the rectangular area
• Works with pf24bit & pf32bit TBitmap surfaces
• Master Alpha Transparency
• Master Anti Aliasing Gamma correction
• Master Composition Mode (all SVG compositing modes)
• Supports Linear & Radial gradients from two or three colors
• Lines can be None, Solid color or Gradients (linear or radial)
• Line caps (Butt, Square, Round)
• Line joins (Miter, Round, Bevel)
• Fill can be None, Solid color or Gradients (linear or radial)
• Fill rules (NonZero /Winding/ and EvenOdd)
• Basic shapes (Line, Triangle, Rectangle, Rounded Rectangle, Ellipse, Arc, Star, Bezier Cubic or Quadratic curves, Polygon, Polyline)
• Path rendering compliant with SVG specification
• Path commands (Move, Line, Arc, QuadricCurve, CubicCurve, Close)
• Path can consist of more subpaths
• Text font glyphs source engine is Windows TrueType API or FreeType 2
• Automatic caching of text glyphs
• Support for raster text font cache (fast)
• Font properties (Normal, Bold, Italic, Rotation)
• Text alignment on X & Y axis around origin point
• Support for text hinting (grid fitting)
• Image rendering (any TBitmap) with arbitrary transformations
• Image resampling filters (NN, Bilinear, Hanning, Hermite, Quadric, Bicubic, Catrom, Spline, Blackman)
• Image rendering to the custom path

1. Create TAgg2D instance.
2. Attach instance of TAgg2D to pf24bit or pf32bit TBitmap (or descendant).
3. Perform drawing routine (issue API drawing commands).

It is recommended to create each instance of TAgg2D just once for the whole life of TForm. More instances of TAgg2D can coexist simultaneously and they can be attached to the same TBitmap surface at the same time. It's sence is in having a different states of vector engine in one place (each instance can have a different state of coordinates transformations for example, or anything that can be set up). TAgg2D is not thread safe, so each thread should own it's own vector engine.

After attachement (to the TBitmap) the state of the vector engine becomes default. It's due to achieving the same starting conditions for the drawing routine. So you have to set up the line color, fill rule, transformations, clipping, etc.

Since TAgg2D renders on fly directly to the physical surface of TBitmap, the drawing routine (after attachement) can be performed anytime it is required. It can be outside the OnPaint method and also outside WM_PAINT windows message. But as well it can be also a part of those painting methods.

Here is an introductory example of drawing with TAgg2D:

 
 if VG.Attach(Image1.Picture.Bitmap ) then
  begin
   VG.ClearAll (255 ,255 ,255 );
   VG.LineWidth(10 );
   VG.LineColor($32 ,$cd ,$32 );
   VG.FillColor($ff ,$d7 ,$00 );

   VG.Star(100 ,100 ,30 ,70 ,55 ,5 );
  
  end;
  

Example download:
tagg2d_example02.zip
tagg2d_example02.exe

Attach (bitmap, flip_y ) : boolean

ClearAll (c )
ClearAll (r, g, b, a )

BlendMode (m )
BlendMode : TAggBlendMode [*]

MasterAlpha (a )
MasterAlpha : double

AntiAliasGamma (g )
AntiAliasGamma : double

NoFill
NoLine

FillColor (c )
FillColor (r, g, b, a )
FillColor : TAggColor [*]

LineColor (c )
LineColor (r, g, b, a )
LineColor : TAggColor [*]

FillLinearGradient (x1, y1, x2, y2, c1, c2, profile )
LineLinearGradient (x1, y1, x2, y2, c1, c2, profile )

FillRadialGradient (x, y, r, c1, c2, profile )
LineRadialGradient (x, y, r, c1, c2, profile )

FillRadialGradient (x, y, r, c1, c2, c3 )
LineRadialGradient (x, y, r, c1, c2, c3 )

FillRadialGradient (x, y, r )
LineRadialGradient (x, y, r )

LineWidth (w )
LineWidth : double

LineCap (cap )
LineCap : TAggLineCap [*]

LineJoin (join )
LineJoin : TAggLineJoin [*]

FillEvenOdd (evenOddFlag )
FillEvenOdd : boolean

Transformations : TAggTransformations [*]
Transformations (tr )
ResetTransformations

Affine (tr )

Rotate (angle )
Scale (sx, sy )
Skew (sx, sy )
Translate (x, y )

Parallelogram (x1, y1, x2, y2, para )

Viewport (worldX1, worldY1, worldX2, wordlY2, screenX1, screenY1, screenX2, screenY2, opt )

WorldToScreen (x, y )
ScreenToWorld (x, y )
WorldToScreen (scalar ) : double
ScreenToWorld (x, y )

AlignPoint (x, y )

ClipBox (x1, y1, x2, y2 )
ClipBox : TAggRectD [*]

ClearClipBox (c )
ClearClipBox (r, g, b, a )

InBox (worldX, worldY ) : boolean

Line (x1, y1, x2, y2 )
Triangle (x1, y1, x2, y2, x3, y3 )
Rectangle (x1, y1, x2, y2 )

RoundedRect (x1, y1, x2, y2, r )
RoundedRect (x1, y1, x2, y2, rx, ry )
RoundedRect (x1, y1, x2, y2, rxBottom, ryBottom, rxTop, ryTop )

Ellipse (cx, cy, rx, ry )

Arc (cx, cy, rx, ry, start, sweep )
Star (cx, cy, r1, r2, startAngle, numRays )

Curve (x1, y1, x2, y2, x3, y3 )
Curve (x1, y1, x2, y2, x3, y3, x4, y4 )

Polygon (xy, numPoints )
Polyline (xy, numPoints )

ResetPath

MoveTo (x, y )
MoveRel (dx, dy )

LineTo (x, y )
LineRel (dx, dy )

HorLineTo (x )
HorLineRel (dx )

VerLineTo (y )
VerLineRel (dy )

ArcTo (rx, ry, angle, largeArcFlag, sweepFlag, x, y )
ArcRel (rx, ry, angle, largeArcFlag, sweepFlag, dx, dy )

QuadricCurveTo (xCtrl, yCtrl, xTo, yTo )
QuadricCurveRel (dxCtrl, dyCtrl, dxTo, dyTo )
QuadricCurveTo (xTo, yTo )
QuadricCurveRel (dxTo, dyTo )

CubicCurveTo (xCtrl1, yCtrl1, xCtrl2, yCtrl2, xTo, yTo )
CubicCurveRel (dxCtrl1, dyCtrl1, dxCtrl2, dyCtrl2, dxTo, dyTo )
CubicCurveTo (xCtrl2, yCtrl2, xTo, yTo )
CubicCurveRel (dxCtrl2, dyCtrl2, dxTo, dyTo )

AddEllipse (cx, cy, rx, ry, dir )
ClosePolygon

DrawPath (flag )

FlipText (flip )

Font (fileName, height, bold, italic, cache, angle )

FontHeight : double

TextAlignment (alignX, alignY )

TextHints : boolean
TextHints (hints )
TextWidth (str ) : double

Text (x, y, str, roundOff, ddx, ddy )

ImageFilter (f )
ImageFilter : TAggImageFilter [*]

ImageResample (f )
ImageResample : TAggImageResample [*]

TransformImage (bitmap, imgX1, imgY1, imgX2, imgY2, dstX1, dstY1, dstX2, dstY2 )

TransformImage (bitmap, dstX1, dstY1, dstX2, dstY2 )

TransformImage (bitmap, imgX1, imgY1, imgX2, imgY2, parallelo )

TransformImage (bitmap, parallelo )

TransformImagePath (bitmap, imgX1, imgY1, imgX2, imgY2, dstX1, dstY1, dstX2, dstY2 )

TransformImagePath (bitmap, dstX1, dstY1, dstX2, dstY2 )

TransformImagePath (bitmap, imgX1, imgY1, imgX2, imgY2, parallelo )

TransformImagePath (bitmap, parallelo )

CopyImage (bitmap, imgX1, imgY1, imgX2, imgY2, dstX, dstY )

CopyImage (bitmap, dstX, dstY )

Deg2Rad (v ) : double
Rad2Deg (v ) : double

Agg2DUsesFreeType : boolean

BitmapAlphaTransparency (bitmap, alpha ) : boolean

TAggColor
TAggRectD
TAggDirection
TAggLineJoin
TAggLineCap
TAggBlendMode
TAggTextAlignment
TAggDrawPathFlag
TAggViewportOption
TAggImageFilter
TAggImageResample
TAggFontCacheType
TAggTransformations

This method associates vector engine object with bitmap image for the purpose of rendering vector graphics onto it's surface.

bitmap : TBitmap

A valid reference to non empty Device Independent Bitmap in pf24bit or pf32bit format. Bitmap can already contain some image data (eg. photo). In that case all renderings will take place over the existing image data.

flip_y : boolean = false

Indicates if coordinate system on Y axis originates in Bottom Left corner. Otherwise coordinates on Y axis originate in Top Left corner.

If True, vector engine was successfully connected to the bitmap surface and drawing routine can be immediately performed.

If False, there was an error connecting to the surface. Check if bitmap image has required DIB format or if it's not empty.

 
 if VG.Attach(Image1.Picture.Bitmap ) then
  begin
  // Drawing Routine ...

  end;
  

Restricts the rendering area to the given rectangle.

x1 : double

X coordinate of clipping rectangle Top Left corner [in pixels].

y1 : double

Y coordinate of clipping rectangle Top Left corner [in pixels].

x2 : double

X coordinate of clipping rectangle Bottom Right corner [in pixels].

y2 : double

Y coordinate of clipping rectangle Bottom Right corner [in pixels].

    
 if VG.Attach(Image1.Picture.Bitmap ) then
  begin
   VG.ClearAll (255 ,255 ,255 );
   VG.LineWidth(10 );
   VG.LineColor($32 ,$cd ,$32 );
   VG.FillColor($ff ,$d7 ,$00 );

   VG.ClipBox(50 ,50 ,140 ,140 );

   VG.Star(100 ,100 ,30 ,70 ,55 ,5 );

  end;
  

Retrieves the current clipping area rectangle.

Returned is data structure with clipping rectangle coordinates [in pixels].

Erases the whole surface of attached TBitmap to the color provided.

c : TAggColor [*]

Erase color in one data structure (r,g,b,a).

r : byte

Red channel of Erase color [0..255].

g : byte

Green channel of Erase color [0..255].

b : byte

Blue channel of Erase color [0..255].

a : byte = 255 (Opaque)

Alpha transparency of Erase color [ (transparent) 0 .. 255 (opaque) ]

 
 if VG.Attach(Image1.Picture.Bitmap ) then
  begin
  // Erasing whole background to Fuchsia
   VG.ClearAll(255 ,0 ,255 );

  end;

Erases the area defined by clipping rectangle with provided color. If there is no clipping rectangle defined yet, whole surface of attached TBitmap is considered to be the clipping rectangle.

c : TAggColor [*]

Erase color in one data structure (r,g,b,a).

r : byte

Red channel of Erase color [0..255].

g : byte

Green channel of Erase color [0..255].

b : byte

Blue channel of Erase color [0..255].

a : byte = 255 (Opaque)

Alpha transparency of Erase color [ (transparent) 0 .. 255 (opaque) ]

 
 if VG.Attach(Image1.Picture.Bitmap ) then
  begin
   VG.ClearAll (255 ,255 ,255 );

   VG.ClipBox(50 ,50 ,140 ,140 );

  // Erasing clipping box to Fuchsia
   VG.ClearClipBox(255 ,0 ,255 );

  end;

Transforms world (user) coordinates into surface (screen) coordinates.

World (user) coordinates are units of measure [in subpixels] in which developer defines the positions and dimensions of objects willing to be drawn.

Surface (screen) coordinates are computed by vector graphics engine from world (user) coordinates in the process of rendering by multiplying with affine matrix.

Resulting screen coordinates are fractional numbers [in subpixels] despite the fact, that the destination surface (eg. screen) has a final non-fractional integer displaying units (pixels). The effect of fractional shift in position is then achieved optically with Anti Aliasing.

Converting coordinates from world to screen units is good for calculating the resulting positions and dimensions of objects being drawn on screen.

x : PDouble

Pointer to the world X coordinate [in subpixels]. This parameter receives also the result of conversion - screen X coordinate [in subpixels].

y : PDouble

Pointer to the world Y coordinate [in subpixels]. This parameter receives also the result of conversion - screen Y coordinate [in subpixels].

 
 var
  x ,y : double;

 if VG.Attach(Image1.Picture.Bitmap ) then
  begin
   VG.ClearAll (255 ,255 ,255 );

  // Coordinates system shift (on X + 10, on Y + 20)
   VG.Translate(10 ,20 );

  // Find out, where on screen x & y will be
   x:=15;
   y:=15;

   VG.WorldToScreen(@x ,@y );

  // X should be 25 (15 + 10), Y should be 35 (15 + 20)

  end;

Transforms surface (screen) coordinates into world (user) coordinates.

This method is useful for hit test detection. Typically operating system sends informations about position of the mouse in surface (screen) coordinates, but the output on screen might come from totally different coordinates, which were transformed by the vector engine during the rendering process.

x : PDouble

Pointer to the screen X coordinate [in subpixels]. This parameter receives also the result of conversion - world X coordinate [in subpixels].

y : PDouble

Pointer to the screen Y coordinate [in subpixels]. This parameter receives also the result of conversion - world Y coordinate [in subpixels].

 
 var
  x ,y : double;

 if VG.Attach(Image1.Picture.Bitmap ) then
  begin
   VG.ClearAll (255 ,255 ,255 );

  // Coordinates system shift (on X + 10, on Y + 20)
   VG.Translate(10 ,20 );

  // Find out where the mouse position X & Y is targetting
  // our user drawing (before rendering transformations)
   x:=25;
   y:=35;

   VG.ScreenToWorld(@x ,@y );

  // X should be 15 (25 - 10), Y should be 15 (35 - 20)

  end;

Transforms the length in world (user) units into the length in surface (screen) units.

This method can be used to find out, how many subpixels takes some length in final rendering. When developer compares input length with output length, the result is the zoom ratio (from definition to screen).

scalar : double

Length in units of world (user) system [in subpixels].

Returned is the length in units of screen (surface) system [in subpixels].

 
 var
  l : double;

 if VG.Attach(Image1.Picture.Bitmap ) then
  begin
   VG.ClearAll(255 ,255 ,255 );

  // Coordinates system shift (on X + 2, on Y + 2)
   VG.Translate(2 ,2 );

  // "l" is still the same (10), because coordinate system
  // zoom ratio is not affected by previous translation
   l:=VG.WorldToScreen(10 );

  // Coordinates system scale up by 2x
   VG.Scale(2 ,2 );

  // Now "l" is double (20), because previous up-scale
  // changed the coordinate system zoom ratio by 2x
   l:=VG.WorldToScreen(10 );

  end;

It might seem confusing that both world (user) and screen (surface) coordinates are referred here as [in subpixels].

Developer has to realize, that everything defined in drawing routine is [in subpixels] and when there are no transformations explicitely defined, output on screen is being rendered in 1:1 transformations (everything gets drawn in the same [subpixels]).

After defining some additional transformations (like up/down scaling, rotation, skew, ...) the location and dimension of objects will be different from original definition, but the values are still being computed [in subpixels].

Coordinates transformations changes positions and dimensions / lenghts, but units still remains the same [subpixels].

Transforms the length in surface (screen) units into the length in world (user) units.

This method can be used to find out the original dimension of something, that has a certain length on screen.

scalar : double

Length in units of screen (surface) system [in subpixels].

Returned is the length in units of world (user) system [in subpixels].

Due to the Anti Aliasing technique (that's heavily used in AGG), it may be sometimes hard to achieve rendering of lines, that are eg. exactly 1 pixel wide.

You can read more about this issue here.

This line alignment problem can be partially solved by aligning the coordinates to the 0.5 subpixels (in screen coordinates), so that the lines would always have 100% opaque area.

Basic formula to do this alignment is: x = floor(x) + 0.5

This method is a helper method for reversely calculating world coordinates in such a way, that after the current transformations they become aligned on 0.5 fractional subpixel boundary.

x : PDouble

Initial X world (user) system coordinate. This parameter receives aligned value of X coordinate (in world coordinates system), that will snap to the 0.5 subpixel boundary on X axis when rendering on screen.

y : PDouble

Initial Y world (user) system coordinate. This parameter receives aligned value of Y coordinate (in world coordinates system), that will snap to the 0.5 subpixel boundary on Y axis when rendering on screen.

 
 var
  x1 ,y1 ,x2 ,y2 : double;

 if VG.Attach(Image1.Picture.Bitmap ) then
  begin
   VG.ClearAll(255 ,255 ,255 );

  // Initial coordinates
   x1:=10;
   y1:=30;
   x2:=150;
   y2:=30;

  // This line seems to be bold with line width = 1
   VG.Line(x1 ,y1 ,x2 ,y2 );

  // We correct coordinates
   VG.AlignPoint(@x1 ,@y1 );
   VG.AlignPoint(@x2 ,@y2 );

  // We shift coordinates down to see the result beneath
   VG.Translate(0 ,50 );

  // After correction,
  // this line seems to be ok with line width = 1
   VG.Line(x1 ,y1 ,x2 ,y2 );

  end;

Cheks out, if coordinates are within the clipping rectangle.

worldX : double

X world (user) coordinate [in subpixels].

worldY : double

Y world (user) coordinate [in subpixels].

If True, coordinates are inside the clipping rectangle (visible after rendering).

If False, coordinates are not inside the clipping rectangle.

Changes the general rendering composition mode (compliant with SVG). This method applies only to the TBitmap surfaces with Alpha channel present (pf32bit).

Default composition mode is AGG_BlendAlpha, in which each pixel is rendered to the surface with the intensity of it's Alpha Transparency value.

m : TAggBlendMode [*]

A new general composition mode.

 
 if VG.Attach(Image1.Picture.Bitmap ) then
  begin
   VG.ClearAll(255 ,255 ,255 );

  // Draw basic blue rectangle
   VG.NoLine;
   VG.FillColor(0 ,0 ,255 );

   VG.Rectangle(50 ,50 ,150 ,150 );

  // Rotate coordinates by 45 degrees
   VG.Translate(-ClientWidth / 2 ,-ClientHeight / 2 );
   VG.Rotate   (Deg2Rad(45 ) );
   VG.Translate(ClientWidth / 2 ,ClientHeight / 2 );

  // Changing the general composition mode
   VG.BlendMode(AGG_BlendContrast );

  // Draw the same blue rectangle but with red color
  // Result comes from applying composition mode
   VG.FillColor(255 ,0 ,0 );
   VG.Rectangle(50 ,50 ,150 ,150 );

  end;

Example download:
tagg2d_example08.zip
tagg2d_example08.exe

Retrieves the current general composition mode.

Returned is constant identifying the current general composition mode.

Changes the general Alpha Transparency value used on all renderings.

a : double

A new value of general alpha transparency [ (transparent) 0 .. 1 (opaque) ].

For Alpha Transparency demo see the example 08 above.

Retrieves the current value of general Alpha Transparency.

If 1, everything being rendered is fully opaque. This don't applies if individual state parameters (like eg. line color) have defined it's own transparency, in which case the parameter's value is used.

If < 0, everything being rendered is semitransparent with given level of transparency. Individual state parameters have trasparency level multiplied by this general level.

If 0, nothing is being visible even if individual state parameter has a full opacity.

 
 if VG.Attach(Image1.Picture.Bitmap ) then
  begin
   VG.ClearAll (255 ,255 ,255 );
   VG.LineWidth(20 );

  // Full Master Alpha, Full LineColor opacity
   VG.Translate(0 ,30 );
   VG.LineColor(255 ,0 ,0 ,255 );
   VG.Line     (20 ,10 ,150 ,10 );

  // Full Master Alpha, Half LineColor opacity
   VG.Translate(0 ,30 );
   VG.LineColor(255 ,0 ,0 ,128 );
   VG.Line     (20 ,10 ,150 ,10 );

  // Half Master Alpha, Full LineColor opacity
   VG.MasterAlpha(0.5 );

   VG.Translate(0 ,30 );
   VG.LineColor(255 ,0 ,0 ,255 );
   VG.Line     (20 ,10 ,150 ,10 );

  // Half Master Alpha, Half LineColor opacity
   VG.Translate(0 ,30 );
   VG.LineColor(255 ,0 ,0 ,128 );
   VG.Line     (20 ,10 ,150 ,10 );

  // No Master Alpha, Full LineColor opacity
  // NOT VISIBLE
   VG.MasterAlpha(0 );

   VG.Translate(0 ,30 );
   VG.LineColor(255 ,0 ,0 ,255 );
   VG.Line     (20 ,10 ,150 ,10 );

  end;

Changes the value of Anti Alias Gamma correction.

Gamma correction means doing graphics color math accounting for the distortion that the color will eventually go through when displayed on a monitor.

Phosphors of monitors don't react linearly with the intensity of the electron beam. If they did, a linear input ramp would result in linear light intensity. Instead, the input value is effectively raised to an exponent called gamma.

You can read a whole article related to gamma issues in AGG here.

Default gamma in TAgg2D is 1.

g : double

A new Gamma correction coefficient [ 0.1 .. 3 ~ 4 ]

For Gamma correction demo see the example 08 above.

Retrieves the current value of Anti Aliasing Gamma correction.

Returned is the current value of Anti Aliasing Gamma correction.

Reasonable values are in the range of [ 0.1 .. 3 ~ 4 ].

Changes the color used to fill interior of objects being drawn.

Default fill color is White (r:255;r:255;b:255;a:255).

Fill color doesn't apply if fill gradient is in place.

c : TAggColor [*]

Fill color in one data structure (r,g,b,a).

r : byte

Red channel of Fill color [0..255].

g : byte

Green channel of Fill color [0..255].

b : byte

Blue channel of Fill color [0..255].

a : byte = 255 (Opaque)

Alpha transparency of Fill color [ (transparent) 0 .. 255 (opaque) ].

 
 if VG.Attach(Image1.Picture.Bitmap ) then
  begin
   VG.ClearAll(255 ,255 ,255 );

  // Changing fill color to HTML color Gold #FFD700
   VG.FillColor($FF ,$D7 ,$00 );
   VG.Rectangle(30 ,30 ,180 ,80 );

  // Adding Alpha Transparency to previous fill color
   VG.Translate(0 ,80 );
   VG.FillColor($FF ,$D7 ,$00 ,128 );
   VG.Rectangle(30 ,30 ,180 ,80 );

  end;

Retrieves the current color used to fill interior of objects being drawn.

Returned is Fill color in one data structure (r,g,b,a).

This method turns off filling of interior of objects being drawn. It turns off both fill color and gradient fill. From now, all rendering will look like there is a hole in them.

 
 if VG.Attach(Image1.Picture.Bitmap ) then
  begin
   VG.ClearAll(255 ,255 ,255 );

  // Turn filling Off
   VG.NoFill;

  // HTML color Lime Green #32CD32
   VG.LineColor($32 ,$CD ,$32 );
   VG.Rectangle(10 ,10 ,140 ,140 );

  // HTML color Indian Red #CD5C5C
   VG.Translate(20 ,20 );
   VG.LineColor($CD ,$5C ,$5C );
   VG.Rectangle(10 ,10 ,140 ,140 );

  // HTML color Dark Orchid #9932CC
   VG.Translate(20 ,20 );
   VG.LineColor($99 ,$32 ,$CC );
   VG.Rectangle(10 ,10 ,140 ,140 );

  end;

Changes the color used on stroke of objects being drawn.

Default line color is Black (r:0; g:0; b:0; a:255 ).

Line color doesn't apply if line gradient is in place.

c : TAggColor [*]

Line color in one data structure (r,g,b,a).

r : byte

Red channel of Line color [0..255].

g : byte

Green channel of Line color [0..255].

b : byte

Blue channel of Line color [0..255].

a : byte = 255 (Opaque)

Alpha transparency of Line color [ (transparent) 0 .. 255 (opaque) ].

 
 if VG.Attach(Image1.Picture.Bitmap ) then
  begin
   VG.ClearAll(255 ,255 ,255 );

  // Changing Line color to HTML color Medium Blue #0000CD
   VG.LineColor($00 ,$00 ,$CD );
   VG.Rectangle(30 ,30 ,180 ,80 );

  // Adding Alpha Transparency to previous Line color
   VG.Translate(0 ,80 );
   VG.LineColor($00 ,$00 ,$CD ,128 );
   VG.Rectangle(30 ,30 ,180 ,80 );

  end;

Retrieves the current color used on stroke of objects being drawn.

Returned is Line color in one data structure (r,g,b,a).

This method turns off stroking of objects being drawn. It turns off both line color and gradient lines. From now, all rendering will be done without border around.

 
 if VG.Attach(Image1.Picture.Bitmap ) then
  begin
   VG.ClearAll(255 ,255 ,255 );

  // Turn stroking Off
   VG.NoLine;

  // HTML color Lime Green #32CD32
   VG.FillColor($32 ,$CD ,$32 );
   VG.Rectangle(10 ,10 ,140 ,140 );

  // HTML color Indian Red #CD5C5C
   VG.Translate(20 ,20 );
   VG.FillColor($CD ,$5C ,$5C );
   VG.Rectangle(10 ,10 ,140 ,140 );

  // HTML color Dark Orchid #9932CC
   VG.Translate(20 ,20 );
   VG.FillColor($99 ,$32 ,$CC );
   VG.Rectangle(10 ,10 ,140 ,140 );

  end;

Linear fill gradient increases linearly along the line from starting to ending point and it is constant along perpendicular lines.

Starting point is defined by x1:y1 couple and ending point by x2:y2 couple.

Method internally computes an angle at which the line goes, and gradient gets sloped by that angle all the way.

Linear fill gradient is consequently used to fill interior of objects being drawn. If there is a need to get the filling before gradient's starting point, the c1 color is used as a solid color fill up to the starting point. Similarly space after the ending point is filled with solid c2 color fill.

x1 : double

X coordinate of gradient starting point [in subpixels].

y1 : double

Y coordinate of gradient starting point [in subpixels].

x2 : double

X coordinate of gradient ending point [in subpixels].

y2 : double

Y coordinate of gradient ending point [in subpixels].

c1 : TAggColor [*]

First color of the gradient ramp [data sructure (r,g,b,a)].

c2 : TAggColor [*]

Last color of the gradient ramp [data sructure (r,g,b,a)].

profile : double = 1.0

Defines, how to distribute the color transitions beginning from the halfway between starting and ending points of gradient color ramp. A value of 1 means to distribute colors proportionally on the whole lenght. Values less than 1 approximating to 0 define the ratio by which the transition is distributed more to the halfway position. Values more than 1 define expansion from halfway position, (to a maximum of starting and ending points boundaries).

 
 if VG.Attach(Image1.Picture.Bitmap ) then
  begin
   VG.ClearAll(255 ,255 ,255 );

  // Gradient colors - from Red to Yellow
   c1.Construct(255 ,0 ,0 );
   c2.Construct(255 ,255 ,0 );

  // Gradient proceeds from Top Left corner (10:10)
  // to the Bottom Right corner
  // (ClientWidth - 10:ClientHeight - 10)
   VG.FillLinearGradient(
    10 ,10 ,
    ClientWidth - 10 ,
    ClientHeight - 10 ,
    c1 ,c2 ,0.9 );

  // Gradient appears as a filling of objects
  // consequently being drawn 
   VG.Rectangle(
    10 ,10 ,
    ClientWidth - 10 ,
    ClientHeight - 10 );

  end;
  

One important note about gradients in TAgg2D is that gradients are defined per surface and not per rendering object. Gradient location and dimensions relates to origin of surface and coordinates transformations transform also gradients definition. So after setup of one gradient (for fill or stroke) a series of drawing shapes will render across the last defined gradient.

Linear line gradient increases linearly along the line from starting to ending point and it is constant along perpendicular lines.

Starting point is defined by x1:y1 couple and ending point by x2:y2 couple.

Method internally computes an angle at which the line goes, and gradient gets sloped by that angle all the way.

Linear line gradient is consequently used to fill strokes of objects being drawn. If there is a need to get the stroke filling before gradient's starting point, the c1 color is used as a solid color fill up to the starting point. Similarly space after the ending point is filled with solid c2 color fill.

x1 : double

X coordinate of gradient starting point [in subpixels].

y1 : double

Y coordinate of gradient starting point [in subpixels].

x2 : double

X coordinate of gradient ending point [in subpixels].

y2 : double

Y coordinate of gradient ending point [in subpixels].

c1 : TAggColor [*]

First color of the gradient ramp [data sructure (r,g,b,a)].

c2 : TAggColor [*]

Last color of the gradient ramp [data sructure (r,g,b,a)].

profile : double = 1.0

Defines, how to distribute the color transitions beginning from the halfway between starting and ending points of gradient color ramp. A value of 1 means to distribute colors proportionally on the whole lenght. Values less than 1 approximating to 0 define the ratio by which the transition is distributed more to the halfway position. Values more than 1 define expansion from halfway position, (to a maximum of starting and ending points boundaries).

 
 if VG.Attach(Image1.Picture.Bitmap ) then
  begin
   VG.ClearAll(255 ,255 ,255 );

  // Turn off filling & Set wide stroke
   VG.NoFill;
   VG.LineWidth(20 );

  // Gradient colors
  // from DeepSkyBlue #00BFFF - DarkRed #8B0000
   c1.Construct($00 ,$BF ,$FF );
   c2.Construct($8B ,$00 ,$00 );

  // Gradient proceeds from Top Left corner (20:20)
  // to the Bottom Right corner
  // (ClientWidth - 20:ClientHeight - 20)
   VG.LineLinearGradient(
    20 ,20 ,
    ClientWidth - 20 ,
    ClientHeight - 20 ,
    c1 ,c2 ,0.9 );

  // Gradient appears as a filling of objects stroke
   VG.Rectangle(
    20 ,20 ,
    ClientWidth - 20 ,
    ClientHeight - 20 );

  end;

Radial fill gradient produces equally proportioned circles of colors increasing from the origin to the outer bound.

Gradient's origin (center point) is defined by the x:y couple and the extent of the gradient is defined with radius r.

Radial fill gradient is consequently used to fill interior of objects being drawn. If there is a need to get the filling beyond gradient radius boundary, the c2 color is used as a solid color fill.

x : double

X coordinate of gradient center point [in subpixels].

y : double

Y coordinate of gradient center point [in subpixels].

r : double

Radius of gradient outer bound circle [in subpixels].

c1 : TAggColor [*]

First color of the gradient ramp used at center point
[data sructure (r,g,b,a)].

c2 : TAggColor [*]

Last color of the gradient ramp used at gradient circle bound
[data sructure (r,g,b,a)].

profile : double = 1.0

Defines, how to distribute the color transitions beginning from the halfway between center point and gradient circle outer bound. A value of 1 means to distribute colors proportionally on the whole radius. Values less than 1 approximating to 0 define the ratio by which the transition is distributed more to the halfway position. Values more than 1 define expansion from halfway position, (to a maximum of gradient circle outer bound).

 
 if VG.Attach(Image1.Picture.Bitmap ) then
  begin
   VG.ClearAll(255 ,255 ,255 );

  // Gradient colors
  // from DeepSkyBlue #00BFFF - Red #FF0000
   c1.Construct($00 ,$BF ,$FF );
   c2.Construct($FF ,$00 ,$00 );

  // Gradient proceeds from center point
  // (ClientWidth / 2:ClientHeight / 2 )
  // with extent of (ClientWidth - 30 ) / 2
   VG.FillRadialGradient(
    ClientWidth / 2 ,ClientHeight / 2 ,
    (ClientWidth - 30 ) / 2 ,
    c1 ,c2 ,1.0 );

  // Gradient appears as a filling of objects being drawn
   VG.Ellipse(
    ClientWidth / 2 ,ClientHeight / 2 ,
    (ClientWidth - 30 ) / 2 ,
    (ClientWidth - 30 ) / 2 );

  end;

Radial line gradient produces equally proportioned circles of colors increasing from the origin to the outer bound.

Gradient's origin (center point) is defined by the x:y couple and the extent of the gradient is defined with radius r.

Radial line gradient is consequently used to fill strokes of objects being drawn. If there is a need to get the filling beyond gradient radius boundary, the c2 color is used as a solid color fill.

x : double

X coordinate of gradient center point [in subpixels].

y : double

Y coordinate of gradient center point [in subpixels].

r : double

Radius of gradient outer bound circle [in subpixels].

c1 : TAggColor [*]

First color of the gradient ramp used at center point
[data sructure (r,g,b,a)].

c2 : TAggColor [*]

Last color of the gradient ramp used at gradient circle bound
[data sructure (r,g,b,a)].

profile : double = 1.0

Defines, how to distribute the color transitions beginning from the halfway between center point and gradient circle outer bound. A value of 1 means to distribute colors proportionally on the whole radius. Values less than 1 approximating to 0 define the ratio by which the transition is distributed more to the halfway position. Values more than 1 define expansion from halfway position, (to a maximum of gradient circle outer bound).

 
 if VG.Attach(Image1.Picture.Bitmap ) then
  begin
   VG.ClearAll(255 ,255 ,255 );

  // Turn off fill & set bold line
   VG.NoFill;
   VG.LineWidth(15 );

  // Gradient colors from Red to Blue
   c1.Construct($FF ,$00 ,$00 );
   c2.Construct($00 ,$00 ,$FF );

  // Gradient proceeds from center point
  // (ClientWidth / 2:ClientHeight / 2 )
  // with extent of (ClientWidth + 70 ) / 2
  // Concentration profile of 0.2 helps
  // to place gradient on the stroke of circle
   VG.LineRadialGradient(
    ClientWidth / 2 ,ClientHeight / 2 ,
    (ClientWidth + 70 ) / 2 ,
    c1 ,c2 ,0.2 );

  // Circle  
   VG.Ellipse(
    ClientWidth / 2 ,ClientHeight / 2 ,
    (ClientWidth - 80 ) / 2 ,
    (ClientWidth - 80 ) / 2 );

  end;
  

Radial fill gradient produces equally proportioned circles of colors increasing from the origin to the outer bound.

Gradient's origin (center point) is defined by the x:y couple and the extent of the gradient is defined with radius r.

This gradient variant has a transition consisting of three colors equally distributed from the center point to the outer circle bound.

Radial fill gradient is consequently used to fill interior of objects being drawn. If there is a need to get the filling beyond gradient radius boundary, the c3 color is used as a solid color fill.

x : double

X coordinate of gradient center point [in subpixels].

y : double

Y coordinate of gradient center point [in subpixels].

r : double

Radius of gradient outer bound circle [in subpixels].

c1 : TAggColor [*]

First color of the gradient ramp used at center point
[data sructure (r,g,b,a)].

c2 : TAggColor [*]

Second color of the gradient ramp used at middle
[data sructure (r,g,b,a)].

c3 : TAggColor [*]

Last color of the gradient ramp used at gradient circle bound
[data sructure (r,g,b,a)].

 
 if VG.Attach(Image1.Picture.Bitmap ) then
  begin
   VG.ClearAll(255 ,255 ,255 );

  // Gradient colors Blue - Green - Red
   c1.Construct($00 ,$00 ,$FF );
   c2.Construct($00 ,$FF ,$00 );
   c3.Construct($FF ,$00 ,$00 );

  // Gradient proceeds from center point
  // (ClientWidth / 2:ClientHeight / 2 )
  // with extent of (ClientWidth - 30 ) / 2
   VG.FillRadialGradient(
    ClientWidth / 2 ,ClientHeight / 2 ,
    (ClientWidth - 30 ) / 2 ,
    c1 ,c2 ,c3 );

  // Circle
   VG.Ellipse(
    ClientWidth / 2 ,ClientHeight / 2 ,
    (ClientWidth - 30 ) / 2 ,
    (ClientWidth - 30 ) / 2 );

  end;

Radial line gradient produces equally proportioned circles of colors increasing from the origin to the outer bound.

Gradient's origin (center point) is defined by the x:y couple and the extent of the gradient is defined with radius r.

This gradient variant has a transition consisting of three colors equally distributed from the center point to the outer circle bound.

Radial line gradient is consequently used to fill strokes of objects being drawn. If there is a need to get the filling beyond gradient radius boundary, the c3 color is used as a solid color fill.

x : double

X coordinate of gradient center point [in subpixels].

y : double

Y coordinate of gradient center point [in subpixels].

r : double

Radius of gradient outer bound circle [in subpixels].

c1 : TAggColor [*]

First color of the gradient ramp used at center point
[data sructure (r,g,b,a)].

c2 : TAggColor [*]

Second color of the gradient ramp used at middle
[data sructure (r,g,b,a)].

c3 : TAggColor [*]

Last color of the gradient ramp used at gradient circle bound
[data sructure (r,g,b,a)].

 
 if VG.Attach(Image1.Picture.Bitmap ) then
  begin
   VG.ClearAll(255 ,255 ,255 );

  // Turn fill off & set bold line
   VG.NoFill;
   VG.LineWidth(15 );

  // Gradient colors Blue - Green - Red
   c1.Construct($00 ,$00 ,$FF );
   c2.Construct($00 ,$FF ,$00 );
   c3.Construct($FF ,$00 ,$00 );

  // Gradient proceeds from center point
  // (ClientWidth / 2:ClientHeight / 2 )
  // with extent of (ClientWidth - 30 ) / 2
   VG.LineRadialGradient(
    ClientWidth / 2 ,ClientHeight / 2 ,
    (ClientWidth - 30 ) / 2 ,
    c1 ,c2 ,c3 );

  // Cross lines
   VG.Line(
    10 ,ClientHeight / 2 ,
    ClientWidth - 10 ,ClientHeight / 2 );

   VG.Line(
    ClientWidth / 2 ,10 ,
    ClientWidth / 2 ,ClientHeight - 10 );

  // Rotate +45 degrees
   VG.Translate(-ClientWidth / 2 ,-ClientHeight / 2 );
   VG.Rotate   (Deg2Rad(45 ) );
   VG.Translate(ClientWidth / 2 ,ClientHeight / 2 );

  // Same cross lines
   VG.Line(
    10 ,ClientHeight / 2 ,
    ClientWidth - 10 ,ClientHeight / 2 );

   VG.Line(
    ClientWidth / 2 ,10 ,
    ClientWidth / 2 ,ClientHeight - 10 );

  end;

This method redefines the physical geometry of already defined radial fill gradient. It's useful when you draw a series of objects filled with seemingly own radial gradients based on the same color ramp.

x : double

X coordinate of gradient center point [in subpixels].

y : double

Y coordinate of gradient center point [in subpixels].

r : double

Radius of gradient outer bound circle [in subpixels].

 
 if VG.Attach(Image1.Picture.Bitmap ) then
  begin
   VG.ClearAll(255 ,255 ,255 );

  // Turn off stroking 
   VG.NoLine;

  // Gradient colors Blue - Green - Red
   c1.Construct($00 ,$00 ,$FF );
   c2.Construct($00 ,$FF ,$00 );
   c3.Construct($FF ,$00 ,$00 );

  // First 3color radial gradient & circle filled with
   VG.FillRadialGradient(50 ,50 ,40 ,c1 ,c2 ,c3 );
   VG.Ellipse           (50 ,50 ,40 ,40 );

  // Redefine gradient geometry
   VG.FillRadialGradient(105 ,105 ,30 );
   VG.Ellipse           (105 ,105 ,30 ,30 );

  // Redefine gradient geometry
   VG.FillRadialGradient(150 ,150 ,20 );
   VG.Ellipse           (150 ,150 ,20 ,20 );

  // Redefine gradient geometry
   VG.FillRadialGradient(180 ,180 ,10 );
   VG.Ellipse           (180 ,180 ,10 ,10 );

  end;

This method redefines the physical geometry of already defined radial line gradient. It's useful when you draw a series of objects with strokes filled with seemingly own radial gradients based on the same color ramp.

x : double

X coordinate of gradient center point [in subpixels].

y : double

Y coordinate of gradient center point [in subpixels].

r : double

Radius of gradient outer bound circle [in subpixels].

 
 if VG.Attach(Image1.Picture.Bitmap ) then
  begin
   VG.ClearAll(255 ,255 ,255 );

  // Turn off fill & set bold line
   VG.NoFill;
   VG.LineWidth(20 );

  // Gradient colors Blue - Yellow - Red
   c1.Construct($00 ,$00 ,$FF );
   c2.Construct($FF ,$FF ,$00 );
   c3.Construct($FF ,$00 ,$00 );

  // First 3color radial gradient & circle filled with
   VG.LineRadialGradient(20 ,30 ,120 ,c1 ,c2 ,c3 );
   VG.Line              (20 ,30 ,120 + 20 ,30 );

  // Redefine gradient geometry
   VG.LineRadialGradient(70 ,90 ,100 );
   VG.Line              (70 ,90 ,100 + 70 ,90 );

  // Redefine gradient geometry
   VG.LineRadialGradient(110 ,150 ,80 );
   VG.Line              (110 ,150 ,80 + 110 ,150 );

  end;

Changes the thickness of strokes of objects being drawn. This apply only if stroking is enabled (some color or gradient is defined for lines).

w : double

A new width of line (stroke) [in subpixels].

 
 if VG.Attach(Image1.Picture.Bitmap ) then
  begin
   VG.ClearAll(255 ,255 ,255 );

  // Draw lines with increasing width 
   VG.Translate(0 ,10 );
   VG.LineWidth(0.1 );
   VG.Line     (30 ,10.5 ,180 ,10.5 );

   VG.Translate(0 ,10 );
   VG.LineWidth(0.5 );
   VG.Line     (30 ,10.5 ,180 ,10.5 );

   VG.Translate(0 ,10 );
   VG.LineWidth(1 );
   VG.Line     (30 ,10.5 ,180 ,10.5 );

   VG.Translate(0 ,10 );
   VG.LineWidth(2 );
   VG.Line     (30 ,10.5 ,180 ,10.5 );

   VG.Translate(0 ,15 );
   VG.LineWidth(5 );
   VG.Line     (30 ,10.5 ,180 ,10.5 );

   VG.Translate(0 ,20 );
   VG.LineWidth(10 );
   VG.Line     (30 ,10.5 ,180 ,10.5 );

   VG.Translate(0 ,30 );
   VG.LineWidth(20 );
   VG.Line     (30 ,10.5 ,180 ,10.5 );

   VG.Translate(0 ,40 );
   VG.LineWidth(40 );
   VG.Line     (30 ,10.5 ,180 ,10.5 );

  end;

Retrieves the current width of line.

Returned is the width of strokes (lines) [in subpixels].

Changes the current type of stroke (line) ending.

The default value is AGG_CapRound.

cap : TAggLineCap [*]

Constant specifying a new value of line cap.

 
 if VG.Attach(Image1.Picture.Bitmap ) then
  begin
   VG.ClearAll(255 ,255 ,255 );

  // Bold line 
   VG.LineWidth(30 );

  // Default AGG_CapRound
   VG.Line(40 ,40 ,180 ,40 );

  // Change to AGG_CapSquare
   VG.LineCap  (AGG_CapSquare );
   VG.Translate(0 ,55 );

   VG.Line(40 ,40 ,180 ,40 );

  // Change to AGG_CapButt
   VG.LineCap  (AGG_CapButt );
   VG.Translate(0 ,55 );

   VG.Line(40 ,40 ,180 ,40 );

  end;

Retrieves the current type of line (stroke) cap.

Returned is constant specifying the current type of line (stroke) cap.

Changes the current type of bending on corners of stroke (line).

The default value is AGG_JoinRound.

join : TAggLineJoin [*]

Constant specifying a new value of line join.

 
 if VG.Attach(Image1.Picture.Bitmap ) then
  begin
   VG.ClearAll(255 ,255 ,255 );

  // Bold line & drawing path
   VG.LineWidth(25 );

   VG.ResetPath;
   VG.MoveTo(30 ,90 );
   VG.LineTo(90 ,30 );
   VG.LineTo(150 ,90 );

  // Default AGG_JoinRound
   VG.Translate(10 ,-10 );
   VG.DrawPath(AGG_StrokeOnly );

  // Change to AGG_JoinMiter
   VG.LineJoin (AGG_JoinMiter );
   VG.Translate(0 ,50 );
   VG.DrawPath (AGG_StrokeOnly );

  // Change to AGG_JoinBevel
   VG.LineJoin (AGG_JoinBevel );
   VG.Translate(0 ,50 );
   VG.DrawPath (AGG_StrokeOnly );

  end;

Retrieves the current type of bending on corners of stroke (line).

Returned is constant specifying the current type of bending on corners of stroke (line).

Changes the current type of rasterizer's filling rule.

The default value if FALSE that represents the NonZero (Winding) filling rule.

evenOddFlag : boolean

A new value for filling rule.

TRUE represents Even/Odd rule.

FALSE represents NonZero (Winding) rule.

 
 if VG.Attach(Image1.Picture.Bitmap ) then
  begin
   VG.ClearAll(255 ,255 ,255 );

  // Red fill & drawing path
   VG.FillColor(255 ,0 ,0 );

   VG.ResetPath;
   VG.MoveTo(12 ,40 );
   VG.LineTo(132 ,112 );
   VG.LineTo(72 ,6 );
   VG.LineTo(12 ,112 );
   VG.LineTo(132 ,40 );
   VG.ClosePolygon;

  // Default fill rule - NonZero
   VG.DrawPath;

  // Change to Even/Odd
   VG.FillEvenOdd(true );
   VG.Translate(140 ,0 );
   VG.DrawPath;

  end;

Retrieves the current state of rasterizer's filling rule.

If True, rasterizer's rule is Even/Odd.

If False, rasterizer's rule is NonZero (Winding).

Retrieves the currently used affine transformations matrix.

Returned is data structure containing currently used affine transformations matrix.

 
 var
  af : TAggTransformations;

 if VG.Attach(Image1.Picture.Bitmap ) then
  begin
   VG.ClearAll(255 ,255 ,255 );

  // Transform coordinates
   VG.Translate(10 ,10 );
   VG.Scale    (2 ,2 );

  // Retrieve matrix containing transformations 
   af:=VG.Transformations;

  // af.affineMatrix is now 2,0,0,2,20,20 

  end;

Replaces currently used affine transformations matrix with the one supplied by user. This allows for applying a user defined non standard transformations.

tr : PAggTransformations

Pointer to the data structure containing custom affine transformations matrix.

 
 var
  x ,y ,nx ,ny : double;

 if VG.Attach(Image1.Picture.Bitmap ) then
  begin
   VG.ClearAll(255 ,255 ,255 );
   VG.NoLine;

  // Red Arrow
   VG.FillColor(255 ,0 ,0 ,128 );
   VG.Triangle (100 ,20 ,40 ,100 ,160 ,100 );
   VG.Rectangle(70 ,100 ,130 ,170 );

  // Coordinates will be reflected along line
  // defined as from 0:0 to 90:85
   x:=90;
   y:=85;

   nx:=x / Sqrt(x * x + y * y );
   ny:=y / Sqrt(x * x + y * y );

   af.affineMatrix[0 ]:=2.0 * nx * nx - 1.0;
   af.affineMatrix[1 ]:=2.0 * nx * ny;
   af.affineMatrix[2 ]:=2.0 * nx * ny;
   af.affineMatrix[3 ]:=2.0 * ny * ny - 1.0;
   af.affineMatrix[4 ]:=0.0;
   af.affineMatrix[5 ]:=0.0;

  // Add Reflection Transformation by utilizing
  // custom matrix set-up function
   VG.Transformations(@af );

  // Blue Arrow (same as Red)
   VG.FillColor(0 ,0 ,255 ,128 );
   VG.Triangle (100 ,20 ,40 ,100 ,160 ,100 );
   VG.Rectangle(70 ,100 ,130 ,170 );

  end;

Initiates the vector engine transformations to the state, as if there were none. Mathematically internal affine matrix is set to be an identity matrix.

You can use this method to begin defining a new transformations after some drawing with some transformations was already performed.

Multiplies currently used affine transformations matrix with the one supplied by user.

This method, similarly to the Transformations(tr ) method, allows for applying a user defined non standard transformations, but with the difference it won't replace but rather multiply (adds more transformation to the existing transformations).

tr : PAggTransformations

Pointer to the data structure containing custom affine transformations matrix.

Rotates coordinates system around the center of rotation by a given angle. Rotation preserves orientations, distances, ratios and angles.

When no transformations are applied, center of rotation is either in Top Left or Bottom Left corner of TBitmap surface (depending on how was the flip_y parameter set in call to the Attach method). Center of rotation may change with Translation or Skewing.

angle : double

A value defining the angle of rotation [in radians].

If user wish to define the angle value in degrees, the Deg2Rad standalone API function can be used for this.

 
 if VG.Attach(Image1.Picture.Bitmap ) then
  begin
   VG.ClearAll(255 ,255 ,255 );
   VG.NoFill;

  // First rectangle
   VG.Rectangle(70 ,40 ,170 ,140 );

  // Rotate by 15 degrees
   VG.Rotate(Deg2Rad(15 ) );

  // The same rectangle in a new coordinates 
   VG.LineColor($FF ,$00 ,$00 );
   VG.Rectangle(70 ,40 ,170 ,140 );

  end;

One frequent case for rotation transformation is rotating something around it's own axis. For example, if user wants to rotate the whole TBitmap surface (around it's axis), two more translations must be involved, because before rotation the center of rotation is in coordinates origin (which is Top Left or Bottom Left corner). So the transformation sequence changes like this:

 
 if VG.Attach(Image1.Picture.Bitmap ) then
  begin
   VG.ClearAll(255 ,255 ,255 );
   VG.NoFill;

  // First rectangle
   VG.Rectangle(70 ,40 ,170 ,140 );

  // [!] set center point to the middle of TBitmap surface
   VG.Translate(-ClientWidth / 2 ,-ClientHeight / 2 );

  // Rotate by 15 degrees
   VG.Rotate(Deg2Rad(15 ) );

  // [!] return coordinates system back 
   VG.Translate(ClientWidth / 2 ,ClientHeight / 2 );

  // The same rectangle in a new coordinates
   VG.LineColor($FF ,$00 ,$00 );
   VG.Rectangle(70 ,40 ,170 ,140 );

  end;
  

Enlarges or diminishes coordinates system by a scale factors in two directions focusing around the center of scaling. Scaling may change orientations (in the case of reflections). If scaling is uniform (both factors equals), it preserves ratios and angles, otherwise not. Scaling always changes distances (lengths).

When no transformations are applied, center of scaling is either in Top Left or Bottom Left corner of TBitmap surface (depending on how was the flip_y parameter set in call to the Attach method). Center of scaling may change with Translation or Skewing.

Zooming around some exact point involves two more translations similarly to the case with rotation around own axis.

sx : double

Scale factor for X axis direction (1 = no scale).

sy : double

Scale factor for Y axis direction (1 = no scale).

 
 if VG.Attach(Image1.Picture.Bitmap ) then
  begin
   VG.ClearAll(255 ,255 ,255 );
   VG.NoFill;

  // First rectangle
   VG.Rectangle(30 ,30 ,130 ,130 );

  // Scale 40% on X axis and 20% on Y axis 
   VG.Scale(1.4 ,1.2 );

  // The same rectangle in a new coordinates
   VG.LineColor($FF ,$00 ,$00 );
   VG.Rectangle(30 ,40 ,130 ,130 );

  end;

Scaling with negative factors generates reflections. That can be utilized to create a mirror-like effects. (One additional translation must be involved to get the effect.)

 
 if VG.Attach(Image1.Picture.Bitmap ) then
  begin
   VG.ClearAll(255 ,255 ,255 );
   VG.NoFill;

  // First triangle
   VG.Triangle(100 ,20 ,20 ,100 ,180 ,100 );

  // Reflect along X axis
   VG.Scale    (1 ,-1 );
   VG.Translate(0 ,210 );

  // The same triangle reflected in a new coordinates
   VG.LineColor($FF ,$00 ,$00 );
   VG.Triangle(100 ,20 ,20 ,100 ,180 ,100 );

  end;
  

Moves coordinates system in one direction that's proportional to the distance away from the origin in the other dimension by a skew factors in horizontal and vertical directions focusing around the center of skewing. Skew (also called shear) preserves only orientations and changes ratios, angles and distances.

When no transformations are applied, center of skewing is either in Top Left or Bottom Left corner of TBitmap surface (depending on how was the flip_y parameter set in call to the Attach method). Center of skewing may change with Translation or another Skewing.

Skewing around some exact point involves two more translations similarly to the case with rotation and scale around own axis.

sx : double

Horizontal skew factor (0 = no skew) [Values from -1 to 1 are reasonable].

sy : double

Vertical skew factor (0 = no skew) [Values from -1 to 1 are reasonable].

 
 if VG.Attach(Image1.Picture.Bitmap ) then
  begin
   VG.ClearAll(255 ,255 ,255 );
   VG.NoFill;

  // First rectangle
   VG.Rectangle(40 ,40 ,150 ,150 );

  // Skew horizontally by 20% and vertically by 10% 
   VG.Skew(0.2 ,0.1 );

  // The same rectangle in a new skewed coordinates
   VG.LineColor($FF ,$00 ,$00 );
   VG.Rectangle(40 ,40 ,150 ,150 );

  end;

Moves all points of coordinates system in the same direction by a specified distance (shifts the origin of the coordinates system). Translation preserves orientations, distances, ratios and angles.

x : double

Shift distance of X axis direction [in subpixels].

y : double

Shift distance of Y axis direction [in subpixels].

 
 if VG.Attach(Image1.Picture.Bitmap ) then
  begin
   VG.ClearAll(255 ,255 ,255 );
   VG.NoFill;

  // First rectangle
   VG.Rectangle(40 ,40 ,150 ,150 );

  // Shift by 30 subpixels on X and 10 subpixels on Y
   VG.Translate(30 ,10 );

  // The same rectangle in a new translated coordinates
   VG.LineColor($FF ,$00 ,$00 );
   VG.Rectangle(40 ,40 ,150 ,150 );

  end;

Transforms source coordinates system rectangle into the destination parallelogram. Parallelogram transformation preserves orientations and changes ratios, angles and distances.

x1 : double

X coordinate of Top Left corner of source rectangle [in subpixels].

y1 : double

Y coordinate of Top Left corner of source rectangle [in subpixels].

x2 : double

X coordinate of Bottom Right corner of source rectangle [in subpixels].

y2 : double

Y coordinate of Bottom Right corner of source rectangle [in subpixels].

para : PDouble

Pointer to the first element of an array containing six values defining the destination parallelogram [in subpixels].

Individual corners of parallelogram are in this order: Top Left (x,y), Top Right (x,y) and Bottom Right (x,y). The fourth corner (Bottom Left) is internally computed from the three others.

 
 if VG.Attach(Image1.Picture.Bitmap ) then
  begin
   VG.ClearAll(255 ,255 ,255 );
   VG.NoFill;

  // First rectangle
   VG.Rectangle(40 ,40 ,150 ,150 );

  // Define destination parallelogram
   para[1 ]:=50;
   para[2 ]:=50;
   para[3 ]:=150;
   para[4 ]:=50;
   para[5 ]:=220;
   para[6 ]:=150;

  // Parallelogram transformation 
   VG.Parallelogram(0 ,0 ,ClientWidth ,ClientHeight ,@para[1 ] );

  // The same rectangle in a new parallelogram coordinates
   VG.LineColor($FF ,$00 ,$00 );
   VG.Rectangle(40 ,40 ,150 ,150 );

  end;

Transforms source coordinates system rectangle into the destination coordinates system rectangle. Viewport transformation includes translation and scaling in one step. Viewport may change orientations, ratios, angles and distances. If the scaling part of transformation is uniform, orientations, ratios and angles are preserved.

worldX1 : double

X coordinate of Top Left corner of source rectangle [in subpixels].

worldY1 : double

Y coordinate of Top Left corner of source rectangle [in subpixels].

worldX2 : double

X coordinate of Bottom Right corner of source rectangle [in subpixels].

worldY2 : double

Y coordinate of Bottom Right corner of source rectangle [in subpixels].

screenX1 : double

X coordinate of Top Left corner of destination rectangle [in subpixels].

screenY1 : double

Y coordinate of Top Left corner of destination rectangle [in subpixels].

screenX2 : double

X coordinate of Bottom Right corner of destination rectangle [in subpixels].

screenY2 : double

Y coordinate of Bottom Right corner of destination rectangle [in subpixels].

opt : TAggViewportOption [*] = AGG_XMidYMid

Additional type of sub-translation (sub-positioning) for the cases, when the aspect ratio of destination rectangle differs from the aspect ratio of source rectangle.

If an isotropic sub-translation is selected, scaling part of transformation is uniform. Otherwise an anisotropic scaling is used, which changes ratios, angles and distances.

 
 if VG.Attach(Image1.Picture.Bitmap ) then
  begin
   VG.ClearAll(255 ,255 ,255 );
   VG.NoFill;
   VG.LineWidth(10 );

  // First rectangle
   VG.Rectangle(0 ,0 ,ClientWidth ,ClientHeight );

  // Set viewport to the rectangle in middle 
   VG.Viewport(
    0 ,0 ,ClientWidth ,ClientHeight ,
    50 ,50 ,170 ,170 ,
    AGG_XMidYMid );

  // The same rectangle in a new viewport coordinates
   VG.LineColor($FF ,$00 ,$00 );
   VG.Rectangle(0 ,0 ,ClientWidth ,ClientHeight );

  // This blue triangle would be drawn in some parts
  // offscreen in original coordinates system 
   VG.LineColor($00 ,$00 ,$FF );
   VG.Triangle (100 ,-50 ,-50 ,140 ,ClientWidth + 50 ,140 );

  end;

Setting a Viewport with this transformation doesn't automatically crop the area around the destination rectangle (Viewport is just a composite transformation of translation and scaling). So if user wishes to achieve a true Viewport-like effect including cropping around, the clipbox located at the destination rectangle must be applied.

 
 if VG.Attach(Image1.Picture.Bitmap ) then
  begin
   VG.ClearAll(255 ,255 ,255 );
   VG.NoFill;
   VG.LineWidth(10 );

  // First rectangle
   VG.Rectangle(0 ,0 ,ClientWidth ,ClientHeight );

  // Set viewport to the rectangle in middle 
   VG.Viewport(
    0 ,0 ,ClientWidth ,ClientHeight ,
    50 ,50 ,170 ,170 ,
    AGG_XMidYMid );

  // [!] Applying clipbox on same rectangle as the destination
  // rectangle, to achieve a true Viewport-like effect
   VG.ClipBox(50 ,50 ,170 ,170 );

  // The same rectangle in a new viewport coordinates
   VG.LineColor($FF ,$00 ,$00 );
   VG.Rectangle(0 ,0 ,ClientWidth ,ClientHeight );

  // This blue triangle is cropped in some parts
  // in the same way, as if it would be offscreen
  // in original coordinates system
   VG.LineColor($00 ,$00 ,$FF );
   VG.Triangle (100 ,-50 ,-50 ,140 ,ClientWidth + 50 ,140 );

  end;

Draws line from the start point (including) to the end point (including).

Start and end points must be different to render a visible line.

x1 : double

X coordinate of line start point [in subpixels].

y1 : double

Y coordinate of line start point [in subpixels].

x2 : double

X coordinate of line end point [in subpixels].

y2 : double

Y coordinate of line end point [in subpixels].

 
 if VG.Attach(Image1.Picture.Bitmap ) then
  begin
   VG.ClearAll(255 ,255 ,255 );

   Randomize;

  // Draw 100 random lines 
   for i:=1 to 100 do
    begin
     VG.LineColor(
      random(255 ) ,
      random(255 ) ,
      random(255 ) ,
      random(255 ) );
      
     VG.LineWidth(random(100 ) / 10 );

     VG.Line(
      random(ClientWidth - 20 ) + 10.5 ,
      random(ClientHeight - 20 ) + 10.5 ,
      random(ClientWidth - 20 ) + 10.5 ,
      random(ClientHeight - 20 ) + 10.5 );

    end;

  end;

Draws triangle at defined coordinates.

x1 : double

X coordinate of triangle's first corner [in subpixels].

y1 : double

Y coordinate of triangle's first corner [in subpixels].

x2 : double

X coordinate of triangle's second corner [in subpixels].

y2 : double

Y coordinate of triangle's second corner [in subpixels].

x3 : double

X coordinate of triangle's third corner [in subpixels].

y3 : double

Y coordinate of triangle's third corner [in subpixels].

 
 if VG.Attach(Image1.Picture.Bitmap ) then
  begin
   VG.ClearAll(255 ,255 ,255 );

   Randomize;

  // Draw 100 random triangles
   for i:=1 to 100 do
    begin
     VG.LineColor(
      random(255 ) ,
      random(255 ) ,
      random(255 ) ,
      random(255 ) );

     VG.FillColor(
      random(255 ) ,
      random(255 ) ,
      random(255 ) ,
      random(255 ) );

     VG.LineWidth(random(100 ) / 10 );

     VG.Triangle(
      random(ClientWidth - 20 ) + 10.5 ,
      random(ClientHeight - 20 ) + 10.5 ,
      random(ClientWidth - 20 ) + 10.5 ,
      random(ClientHeight - 20 ) + 10.5 ,
      random(ClientWidth - 20 ) + 10.5 ,
      random(ClientHeight - 20 ) + 10.5 );

    end;

  end;

Draws rectangle at defined coordinates.

x1 : double

X coordinate of rectangle's Top Left corner [in subpixels].

y1 : double

Y coordinate of rectangle's Top Left corner [in subpixels].

x2 : double

X coordinate of rectangle's Bottom Right corner [in subpixels].

y2 : double

Y coordinate of rectangle's Bottom Right corner [in subpixels].

 
 if VG.Attach(Image1.Picture.Bitmap ) then
  begin
   VG.ClearAll(255 ,255 ,255 );

   Randomize;

  // Draw 100 random rectangles
   for i:=1 to 100 do
    begin
     VG.LineColor(
      random(255 ) ,
      random(255 ) ,
      random(255 ) ,
      random(255 ) );

     VG.FillColor(
      random(255 ) ,
      random(255 ) ,
      random(255 ) ,
      random(255 ) );

     VG.LineWidth(random(100 ) / 10 );

     VG.Rectangle(
      random(ClientWidth - 20 ) + 10.5 ,
      random(ClientHeight - 20 ) + 10.5 ,
      random(ClientWidth - 20 ) + 10.5 ,
      random(ClientHeight - 20 ) + 10.5 );

    end;

  end;

Draws rectangle with rounded corners at defined coordinates.

x1 : double

X coordinate of rectangle's Top Left corner [in subpixels].

y1 : double

Y coordinate of rectangle's Top Left corner [in subpixels].

x2 : double

X coordinate of rectangle's Bottom Right corner [in subpixels].

y2 : double

Y coordinate of rectangle's Bottom Right corner [in subpixels].

r : double

Uniform radius of arc for all rectangle corners [in subpixels].

rx : double

Width of the radius of arc for all rectangle corners [in subpixels].

ry : double

Height of the radius of arc for all rectangle corners [in subpixels].

rxBottom : double

Width of the radius of arc for bottom rectangle corners [in subpixels].

ryBottom : double

Height of the radius of arc for bottom rectangle corners [in subpixels].

rxTop : double

Width of the radius of arc for top rectangle corners [in subpixels].

ryTop : double

Height of the radius of arc for top rectangle corners [in subpixels].

 
 if VG.Attach(Image1.Picture.Bitmap ) then
  begin
   VG.ClearAll(255 ,255 ,255 );

  // Colors and line width
   VG.LineWidth(5 );
   VG.LineColor($FF ,$00 ,$00 );
   VG.FillColor($00 ,$FF ,$00 );

  // Rounded rectangle 
   VG.RoundedRect(
    15 ,15 ,ClientWidth - 15 ,ClientHeight - 15 ,
    40 ,30 ,20 ,10 );

  end;

Draws ellipse at defined center point coordinates with defined horizontal and vertical radius.

If radiuses equals, circle is drawn.

cx : double

X coordinate of ellipse's center point [in subpixels].

cy : double

Y coordinate of ellipse's center point [in subpixels].

rx : double

Horizontal ellipse radius [in subpixels].

ry : double

Vertical ellipse radius [in subpixels].

 
 if VG.Attach(Image1.Picture.Bitmap ) then
  begin
   VG.ClearAll(255 ,255 ,255 );

   Randomize;

  // Draw 100 random ellipses
   for i:=1 to 100 do
    begin
     VG.LineColor(
      random(255 ) ,
      random(255 ) ,
      random(255 ) ,
      random(255 ) );

     VG.FillColor(
      random(255 ) ,
      random(255 ) ,
      random(255 ) ,
      random(255 ) );

     VG.LineWidth(random(100 ) / 10 );

     VG.Ellipse(
      random(ClientWidth - 20 ) + 10.5 ,
      random(ClientHeight - 20 ) + 10.5 ,
      random(Trunc(ClientWidth / 2 ) ) + 10.5 ,
      random(Trunc(ClientHeight / 2 ) ) + 10.5 );

    end;

  end;

Draws a portion of the ellipse at defined center point coordinates with defined horizontal and vertical radius, starting at the start angle and ending at the sweep angle (both angles are in the clockwise direction beginning from 3 hours).

cx : double

X coordinate of ellipse's center point [in subpixels].

cy : double

Y coordinate of ellipse's center point [in subpixels].

rx : double

Horizontal ellipse radius [in subpixels].

ry : double

Vertical ellipse radius [in subpixels].

start : double

Starting angle [in radians].

sweep : double

Ending angle [in radians].

    
 if VG.Attach(Image1.Picture.Bitmap ) then
  begin
   VG.ClearAll(255 ,255 ,255 );

  // Line color & width
   VG.LineColor($FF ,$00 ,$00 );
   VG.LineWidth(5 );

  // Draw Arc from 45 degrees to 270 degrees 
   VG.Arc(120 ,100 ,80 ,50 ,Deg2Rad(45 ) ,Deg2Rad(270 ) );

  end;

Draws multigon at defined center point with following alghorithm:

1. Circle is divided into double amount of segments, as defined amount of rays (of star).
2. Starting from 3 hours going clockwise (shifted by a start angle), a multigon is created by connecting individual cusps of multigon, that are product of intersection of a ray from center point and length defined either by r2 or r1 radius.

3. First cusp is generated from r2 length intersection with a ray from center point towards a line on 3 hours (shifted by a start angle). Segment angle is added and next cusp is generated from r1 length intersection with a ray from center point towards a line on 3 hours (shifted by a start angle plus added segment angle on previous step).

4. The rest of cusps are generated by continuously adding the segment angle and intersecting r2 or r1 lengths with a ray from center point.

While the alghorithm may seem complicated, it allows a creation of more shapes than just a star. If r1 and r2 lengths are equal, generated is a polygon with double amount of sides as requested rays of star. If r1 is considerably different from r2, generated is a star shape with required number of rays. If r1 approximates r2, generated is rounded shape with a wavy border. On low number of rays (2 and 3) a shapes like triangle and diamond can be generated. If r1 or r2 is zero, a spoky like shapes are generated. If one of r1/r2 lenghts is negative, a colliding stroked star is generated.

cx : double

X coordinate of multigon's center point [in subpixels].

cy : double

Y coordinate of multigon's center point [in subpixels].

r1 : double

Radius length of the outer cusp of multigon [in subpixels].

r2 : double

Radius length of the inner cusp of multigon [in subpixels].

startAngle : double

Rotation angle of the starting line on 3 hours going clockwise [in radians].

numRays : integer

Amount of required rays for a star shape generation.

 
 if VG.Attach(Image1.Picture.Bitmap ) then
  begin
   VG.ClearAll(255 ,255 ,255 );

  // Line color & width
   VG.LineColor($FF ,$00 ,$00 );
   VG.FillColor($FF ,$FF ,$00 );
   VG.LineWidth(5 );

  // Variating a number of Star multigons 
   VG.Translate(-30 ,-30 );
   VG.Star(100 ,100 ,70 ,30 ,Deg2Rad(45 ) ,2 );

   VG.Translate(150 ,0 );
   VG.Star(100 ,100 ,70 ,15 ,Deg2Rad(0 ) ,3 );

   VG.Translate(150 ,0 );
   VG.Star(100 ,100 ,-70 ,70 ,Deg2Rad(55 ) ,3 );

   VG.Translate(150 ,0 );
   VG.Star(100 ,100 ,70 ,70 ,Deg2Rad(0 ) ,3 );

   VG.Translate(150 ,0 );
   VG.Star(100 ,100 ,20 ,70 ,Deg2Rad(35 ) ,4 );

   VG.Translate(150 ,0 );
   VG.Star(100 ,100 ,50 ,-70 ,Deg2Rad(30 ) ,4 );

   VG.Translate(-150 *5 ,150 );
   VG.Star(100 ,100 ,30 ,70 ,Deg2Rad(0 ) ,5 );

   VG.Translate(150 ,0 );
   VG.Star(100 ,100 ,0 ,70 ,Deg2Rad(0 ) ,5 );

   VG.Translate(150 ,0 );
   VG.Star(100 ,100 ,30 ,-70 ,Deg2Rad(0 ) ,5 );

   VG.Translate(150 ,0 );
   VG.Star(100 ,100 ,40 ,70 ,Deg2Rad(30 ) ,6 );

   VG.Translate(150 ,0 );
   VG.Star(100 ,100 ,-45 ,70 ,Deg2Rad(30 ) ,10 );

   VG.Translate(150 ,0 );
   VG.Star(100 ,100 ,65 ,70 ,Deg2Rad(30 ) ,20 );

  end;

Draws quadratic (conic) Bezier curve at defined coordinates.

A quadratic Bezier segment is defined by three control points (x1, y1), (x2, y2) and (x3, y3). The curve starts at (x1, y1) and ends at (x3, y3). The shape of the curve is influenced by the placement of the internal control point (x2, y2), but the curve does not usually pass through that point. Assuming non-coincident control points, the tangent of the curve at the initial point x1 is aligned with and has the same direction as the vector x2 ľ x1 and the tangent at the final point x3 is aligned with and has the same direction as the vector x3 ľ x2.

x1 : double

X coordinate of starting control point [in subpixels].

y1 : double

Y coordinate of starting control point [in subpixels].

x2 : double

X coordinate of internal control point [in subpixels].

y2 : double

Y coordinate of internal control point [in subpixels].

x3 : double

X coordinate of ending control point [in subpixels].

y3 : double

Y coordinate of ending control point [in subpixels].

 
 if VG.Attach(Image1.Picture.Bitmap ) then
  begin
   VG.ClearAll(255 ,255 ,255 );

  // Indicate Path for Curve
   VG.LineColor($00 ,$00 ,$FF );
   VG.FillColor($00 ,$00 ,$FF );
   VG.LineWidth(0.2 );

   VG.Rectangle(20 - 4 ,170 - 4 ,20 + 4 ,170 + 4 );
   VG.Rectangle(70 - 4 ,20 - 4 ,70 + 4 ,20 + 4 );
   VG.Rectangle(190 - 4 ,120 - 4 ,190 + 4 ,120 + 4 );

   VG.Line(20 ,170 ,70 ,20 );
   VG.Line(70 ,20 ,190 ,120 );

  // Draw Quadratic (Conic) Bezier curve itself
   VG.LineColor($FF ,$00 ,$00 );
   VG.FillColor($FF ,$FF ,$00 );
   VG.LineWidth(5 );

   VG.Curve(20 ,170 ,70 ,20 ,190 ,120 );
   
  end;

Draws cubic Bezier curve at defined coordinates.

Cubic Bezier segments are defined by four control points (x1, y1), (x2, y2), (x3, y3) and (x4, y4). The curve starts at (x1, y1) and ends at (x4, y4). The shape of the curve is influenced by the placement of the internal control points (x2, y2) and (x3, y3), but the curve does not usually pass through those points. Assuming non-coincident control points, the tangent of the curve at the initial point x1 is aligned with and has the same direction as the vector x2 ľ x1 and the tangent at the final point x4 is aligned with and has the same direction as the vector x4 ľ x3.

x1 : double

X coordinate of starting control point [in subpixels].

y1 : double

Y coordinate of starting control point [in subpixels].

x2 : double

X coordinate of first internal control point [in subpixels].

y2 : double

Y coordinate of first internal control point [in subpixels].

x3 : double

X coordinate of second internal control point [in subpixels].

y3 : double

Y coordinate of second internal control point [in subpixels].

x4 : double

X coordinate of ending control point [in subpixels].

y4 : double

Y coordinate of ending control point [in subpixels].

 
 if VG.Attach(Image1.Picture.Bitmap ) then
  begin
   VG.ClearAll(255 ,255 ,255 );

  // Indicate Path for Curve
   VG.LineColor($00 ,$00 ,$FF );
   VG.FillColor($00 ,$00 ,$FF );
   VG.LineWidth(0.2 );

   VG.Rectangle(20 - 4 ,170 - 4 ,20 + 4 ,170 + 4 );
   VG.Rectangle(50 - 4 ,20 - 4 ,50 + 4 ,20 + 4 );
   VG.Rectangle(140 - 4 ,30 - 4 ,140 + 4 ,30 + 4 );
   VG.Rectangle(200 - 4 ,120 - 4 ,200 + 4 ,120 + 4 );

   VG.Line(20 ,170 ,50 ,20 );
   VG.Line(50 ,20 ,140 ,30 );
   VG.Line(140 ,30 ,200 ,120 );

  // Draw Cubic Bezier curve itself
   VG.LineColor($FF ,$00 ,$00 );
   VG.FillColor($FF ,$FF ,$00 );
   VG.LineWidth(5 );

   VG.Curve(20 ,170 ,50 ,20 ,140 ,30 ,200 ,120 );

  end;

Draws closed path consisting of an arbitrary number of linear segments.

xy : PDouble

Pointer to the first element of an array containing polygon linear segments defined as x:y couples [in subpixels].

numPoints : integer

Determines, how many x:y couples are in the linear segments array defining a polygon.

 
 var
  i : integer;
  poly : array[1..40 ] of double;

 if VG.Attach(Image1.Picture.Bitmap ) then
  begin
   VG.ClearAll(255 ,255 ,255 );

  // Randomize polygon vertexes
   Randomize;

   for i:=1 to 20 do
    begin
     poly[i * 2 - 1 ]:=random(ClientWidth - 20 ) + 10.5;
     poly[i * 2     ]:=random(ClientHeight - 20 ) + 10.5;

    end;

  // Draw Polygon
   VG.LineWidth(3 );
   VG.LineColor($FF ,$00 ,$00 );
   VG.FillColor($FF ,$FF ,$00 );

   VG.Polygon(@poly[1 ] ,20 );

  end;

Draws open path consisting of an arbitrary number of linear segments.

xy : PDouble

Pointer to the first element of an array containing polyline linear segments defined as x:y couples [in subpixels].

numPoints : integer

Determines, how many x:y couples are in the linear segments array defining a polyline.

 
 var
  i : integer;
  poly : array[1..40 ] of double;

 if VG.Attach(Image1.Picture.Bitmap ) then
  begin
   VG.ClearAll(255 ,255 ,255 );

  // Randomize polyline vertexes
   Randomize;

   for i:=1 to 20 do
    begin
     poly[i * 2 - 1 ]:=random(ClientWidth - 20 ) + 10.5;
     poly[i * 2     ]:=random(ClientHeight - 20 ) + 10.5;

    end;

  // Draw Polyline
   VG.LineWidth(3 );
   VG.LineColor($FF ,$00 ,$00 );

   VG.Polyline(@poly[1 ] ,20 );

  end;

Changes the vertical direction of fonts being used for rendering of text.

Change to the font vertical direction will be in effect at next call to the Font method.

This method is useful if user wishes to have a coordinate system originating in Bottom Left corned. Without flipping, the text would hang upside - down. Flipping also considers text alignation rules when rendering.

Text flipping can be also used to achieve a mirror like effects, like in example below.

flip : boolean

Indicates the vertical direction of fonts.

TRUE means fonts are upside-down.

FALSE means fonts are in the same vertical direction as the current coordinate system.

 
 if VG.Attach(Image1.Picture.Bitmap ) then
  begin
   VG.ClearAll(255 ,255 ,255 );

  // Normal Text
   VG.LineColor($00 ,$00 ,$8B );
   VG.FillColor($1E ,$90 ,$FF );

   VG.Font('Times New Roman' ,45 );
   VG.Text(20 ,100 ,'Vectors are cool !' );

  // Upside-down Text  
   VG.FlipText(true );

   VG.LineColor($C0 ,$C0 ,$C0 );
   VG.FillColor($C0 ,$C0 ,$C0 );

   VG.Font('Times New Roman' ,45 );
   VG.Text(20 ,105 ,'Vectors are cool !' );

  end;

Changes the current font to be used for text rendering.

fileName : AnsiString

If FreeType font engine is used, this parameter defines the filename containing the font face to be used.

If Windows TrueType font engine is used, this parameter defines the face name of the font to be used.

height : double

Defines the height of the font [in subpixels].

bold : boolean = false

Indicates if font has to be bold.

italic : boolean = false

Indicates if font has to be italic.

cache : TAggFontCacheType [*] = AGG_VectorFontCache

Defines the type of internal AGG font cache.

Fonts are cached in TAgg2D automatically, which means that the procedure of loading a particular glyph definition is performed just once per font.

Generally vector font cache is more versatile, but it's slower than raster font cahce when rendering.

Raster font cache produces faster text renderings, but the text can't be rotated (also affine transformations don't apply).

angle : double = 0.0

Explicit font rotation [in radians]. Doesn't apply to the raster font cache.

 
 if VG.Attach(Image1.Picture.Bitmap ) then
  begin
   VG.ClearAll(255 ,255 ,255 );

  // Draw different text variations
   VG.LineColor($1E ,$90 ,$FF );
   VG.FillColor($1E ,$90 ,$FF );

   VG.Font(
    'Times New Roman' ,25 ,false ,false ,
    AGG_VectorFontCache ,Deg2Rad(270 ) );
   VG.Text(200 ,210 ,'Times New Roman' );

   VG.LineColor($00 ,$00 ,$CD );
   VG.FillColor($00 ,$00 ,$CD );

   VG.Font(
    'Arial' ,25 ,false ,true ,
    AGG_VectorFontCache ,Deg2Rad(315 ) );
   VG.Text(220 ,210 ,'Arial Italic' );

   VG.LineColor($6A ,$5A ,$CD );
   VG.FillColor($6A ,$5A ,$CD );

   VG.Font(
    'Courier' ,25 ,true ,false ,
    AGG_RasterFontCache );
   VG.Text(220 ,230 ,'Courier Bold Raster' );

   VG.LineColor($20 ,$B2 ,$AA );
   VG.FillColor($20 ,$B2 ,$AA );

   VG.Font(
    'Verdana' ,25 ,false ,false ,
    AGG_VectorFontCache ,Deg2Rad(45 ) );
   VG.Text(205 ,245 ,'Verdana' );

   VG.LineColor($2E ,$8B ,$57 );
   VG.FillColor($2E ,$8B ,$57 );

   VG.Font(
    'Tahoma' ,25 ,false ,false ,
    AGG_VectorFontCache ,Deg2Rad(90 ) );
   VG.Text(185 ,250 ,'Tahoma' );

   VG.LineColor($B8 ,$86 ,$0B );
   VG.FillColor($B8 ,$86 ,$0B );

   VG.Font(
    'Lucida Console' ,25 ,true ,false ,
    AGG_VectorFontCache ,Deg2Rad(135 ) );
   VG.Text(165 ,240 ,'Lucida Console' );

   VG.NoLine;
   VG.FillColor($FF ,$00 ,$00 );

   VG.Font(
    'Galleria' ,20 ,true ,false ,
    AGG_VectorFontCache ,Deg2Rad(180 ) );
   VG.Text(160 ,220 ,'Galleria' );

   VG.FillColor($FF ,$A5 ,$00 );

   VG.Font(
    'Briquet' ,30 ,false ,true ,
    AGG_VectorFontCache ,Deg2Rad(225 ) );
   VG.Text(170 ,200 ,'Briquet Italic' );

  end;
  

Retrieves the height of the font used to render text.

If some value, returned is the height of the currently used font [in subpixels].

If zero, probably no font has been selected yet.

Changes the type of horizontal and vertical alignment around the Text Origin.

When calling the Text method, a x:y coordinates are passed to define at which position the text should be rendered. This position is the Text Origin.

On X axis, the default Text Origin is considered to be in the leftmost position of bounding box (bbox) of first glyph of text (AGG_AlignLeft).

On Y axis, the default Text Origin is considered to be on the font's base line (AGG_AlignBottom).

alignX : TAggTextAlignment [*]

Horizontal alignment of text around the X coordinate of Text Origin.

alignY : TAggTextAlignment [*]

Vertical alignment of text around the Y coordinate of Text Origin.

    
 if VG.Attach(Image1.Picture.Bitmap ) then
  begin
   VG.ClearAll(255 ,255 ,255 );

  // Some prior positioning 
   VG.Scale    (0.7 ,0.7 );
   VG.Translate(-10 ,-70 );

  // Text Alignment leading lines
   VG.LineColor($A9 ,$A9 ,$A9 );
   VG.Line(250.5 - 150 ,150.5 ,250.5 + 150 ,150.5 );
   VG.Line(250.5 ,150.5 - 20 ,250.5 ,150.5 + 20 ); 
   VG.Line(250.5 - 150 ,200.5 ,250.5 + 150 ,200.5 );
   VG.Line(250.5 ,200.5 - 20 ,250.5 ,200.5 + 20 );
   VG.Line(250.5 - 150 ,250.5 ,250.5 + 150 ,250.5 );
   VG.Line(250.5 ,250.5 - 20 ,250.5 ,250.5 + 20 );
   VG.Line(250.5 - 150 ,300.5 ,250.5 + 150 ,300.5 );
   VG.Line(250.5 ,300.5 - 20 ,250.5 ,300.5 + 20 );
   VG.Line(250.5 - 150 ,350.5 ,250.5 + 150 ,350.5 );
   VG.Line(250.5 ,350.5 - 20 ,250.5 ,350.5 + 20 );
   VG.Line(250.5 - 150 ,400.5 ,250.5 + 150 ,400.5 );
   VG.Line(250.5 ,400.5 - 20 ,250.5 ,400.5 + 20 );
   VG.Line(250.5 - 150 ,450.5 ,250.5 + 150 ,450.5 );
   VG.Line(250.5 ,450.5 - 20 ,250.5 ,450.5 + 20 );
   VG.Line(250.5 - 150 ,500.5 ,250.5 + 150 ,500.5 );
   VG.Line(250.5 ,500.5 - 20 ,250.5 ,500.5 + 20 );
   VG.Line(250.5 - 150 ,550.5 ,250.5 + 150 ,550.5 );
   VG.Line(250.5 ,550.5 - 20 ,250.5 ,550.5 + 20 );

  // Font & Colors
   VG.FillColor($00 ,$00 ,$8B );
   VG.NoLine;
   VG.TextHints(false );
   VG.Font(
    'Times New Roman' ,40.0 ,
	false ,false ,AGG_VectorFontCache );

  // All Text Alignment Cases
   VG.TextAlignment(AGG_AlignLeft ,AGG_AlignBottom );
   VG.Text(250.0 ,150.0 ,'Left-Bottom' ,true ,0 ,0 );

   VG.TextAlignment(AGG_AlignCenter ,AGG_AlignBottom );
   VG.Text(250.0 ,200.0 ,'Center-Bottom' ,true ,0 ,0 );

   VG.TextAlignment(AGG_AlignRight ,AGG_AlignBottom );
   VG.Text(250.0 ,250.0 ,'Right-Bottom' ,true ,0 ,0 );

   VG.TextAlignment(AGG_AlignLeft ,AGG_AlignCenter );
   VG.Text(250.0 ,300.0 ,'Left-Center' ,true ,0 ,0 );

   VG.TextAlignment(AGG_AlignCenter ,AGG_AlignCenter );
   VG.Text(250.0 ,350.0 ,'Center-Center' ,true ,0 ,0 );

   VG.TextAlignment(AGG_AlignRight ,AGG_AlignCenter );
   VG.Text(250.0 ,400.0 ,'Right-Center' ,true ,0 ,0 );

   VG.TextAlignment(AGG_AlignLeft ,AGG_AlignTop );
   VG.Text(250.0 ,450.0 ,'Left-Top' ,true ,0 ,0 );

   VG.TextAlignment(AGG_AlignCenter ,AGG_AlignTop );
   VG.Text(250.0 ,500.0 ,'Center-Top' ,true ,0 ,0 );

   VG.TextAlignment(AGG_AlignRight ,AGG_AlignTop );
   VG.Text(250.0 ,550.0 ,'Right-Top' ,true ,0 ,0 );

  end;

Retrieves the current status of text hinting (grid fitting).

If True, text hinting is in use and text being rendered is hinted.

If False, text hinting is not in use and text being rendered is unhinted.

Changes the status of text hinting for the current font.

Text hinting (also called Grid Fitting) is a technique of proper glyph rendering to the target resolution surface, which needs the scaled outline points to be aligned along the target device pixel grid. Hinting depends on the target width and height in pixels (it is highly resolution-dependent and that makes correct WYSIWYG layouts difficult to implement).

hints : boolean

Defines whether text hinting is to be used or not.

Try to play with following example. Checking and unchecking the "Hinting" checkbox changes the grid fitting on the fly, so you can see how hinter influences the resulting shape of glyphs. Also resizing the form proportionally zooms the text.

Example download:
tagg2d_example50.zip
tagg2d_example50.exe

Computes the width of string.

This method together with the FontHeight method provide a way to measure the extent of a text for layouting operations.

Prior to calling this method some font should be selected with Font method.

str : AnsiString

Text string for horizontal extent computation.

If some value, returned is the length of the text [in subpixels].

If Zero, the text was empty or no font have been selected yet.

Draws a string of text at defined coordinates.

Text is aligned arounf Text Origin according to TextAlignment settings.

x : double

X coordinate of Text Origin [in subpixels].

y : double

Y coordinate of Text Origin [in subpixels].

str : AnsiString

Text to be drawn.

roundOff : boolean = false

Indicates rounding of Text Origin position to the whole numbers.

ddx : double = 0.0

Text Origin position addition after rounding on X axis [in subpixels] (Allows shifting by eg. 0.5 to achieve less blur).

ddy : t2 = 0.0

Text Origin position addition after rounding on Y axis [in subpixels] (Allows shifting by eg. 0.5 to achieve less blur).

 
 if VG.Attach(Image1.Picture.Bitmap ) then
  begin
   VG.ClearAll(255 ,255 ,255 );

  // Font & Colors
   VG.FillColor($00 ,$00 ,$8B );
   VG.NoLine;
   VG.TextHints(true );
   VG.Font(
    'Times New Roman' ,40.0 ,
    false ,false ,AGG_VectorFontCache );

  // Text
   VG.Text(
    20 ,60 ,'TAgg2D Vector Graphics API' ,
    true ,0.5 ,0.5 );

  end;

Removes all elements from internal path making it empty and changes the position of Current Point to 0:0.

Current Point is an invisible position on the path indicating where the last path command stopped.

A path consists of straight lines, curves and arcs comprising individual shapes also called subpaths. Subpaths can be opened or closed. Path can hold any amount of path elements that are rendered at once with the DrawPath method.

In fact, on the most basic level, everything is path. Even shape like circle is in the end a composition of path commands telling rasterizer where to move and draw. Also more complex shapes like font glyphs are rendered as a path. For example the glyph for letter "o" consists of two subpaths, the outer and the inner ring. When rendering this "o" path, rasterizer's internal rules makes it to appear as a ring with hole inside (in one pass).

Changes position of the Current Point by setting it to the defined coordinates.

If there is already an unclosed subpath defined, this method creates a new subpath leaving the previous one opened.

x : double

X coordinate of a new position of Current Point [in subpixels].

y : double

Y coordinate of a new position of Current Point [in subpixels].

 
 if VG.Attach(Image1.Picture.Bitmap ) then
  begin
   VG.ClearAll (255 ,255 ,255 );
   VG.FillColor($FF ,$00 ,$00 );

  // First subpath comprising of a single line
   VG.MoveTo(10 ,10 );
   VG.LineTo(50 ,50 );

  // Creating a new subpath with MoveTo method
   VG.MoveTo(100 ,100 );
   VG.LineTo(200 ,100 );
   VG.LineTo(180 ,50 );
   VG.ClosePolygon;

  // Render path 
   VG.DrawPath(AGG_FillAndStroke );

  end;

Changes position of the Current Point by adding or subtracting defined delta coordinates to the last position of the Current Point.

If there is already an unclosed subpath defined, this method creates a new subpath leaving the previous one opened.

dx : double

Change (delta +/-) to the Current Point coordinate on X axis [in subpixels].

dy : double

Change (delta +/-) to the Current Point coordinate on Y axis [in subpixels].

See ClosePolygon method.

Adds a LINE_TO_ABS path command to the current subpath. A new Line starts at the Current Point position and ends at defined coordinates. Current Point is finally changed to be at the end of a new Line segment.

x : double

X coordinate of end of a new Line segment [in subpixels].

y : double

Y coordinate of end of a new Line segment [in subpixels].

See ClosePolygon method.

Adds a LINE_TO_REL path command to the current subpath. A new Line starts at the Current Point position and ends at Current Point position plus defined delta coordinates. Current Point is finally changed to be at the end of a new Line segment.

dx : double

Change (delta +/-) to the Current Point coordinate on X axis [in subpixels].

dy : double

Change (delta +/-) to the Current Point coordinate on Y axis [in subpixels].

See ClosePolygon method.

Adds a HLINE_TO_ABS path command to the current subpath. A new Line starts at the Current Point position and ends at defined X coordinate. Y coordinate remains unchanged. Current Point is finally changed to be at the end of a new Line segment.

x : double

X coordinate of end of a new Line segment [in subpixels].

See ClosePolygon method.

Adds a HLINE_TO_REL path command to the current subpath. A new Line starts at the Current Point position and ends on X axis at Current Point position X plus defined delta coordinate. Y coordinate remains unchanged. Current Point is finally changed to be at the end of a new Line segment.

dx : double

Change (delta +/-) to the Current Point coordinate on X axis [in subpixels].

See ClosePolygon method.

Adds a VLINE_TO_ABS path command to the current subpath. A new Line starts at the Current Point position and ends at defined Y coordinate. X coordinate remains unchanged. Current Point is finally changed to be at the end of a new Line segment.

y : double

Y coordinate of end of a new Line segment [in subpixels].

See ClosePolygon method.

Adds a VLINE_TO_REL path command to the current subpath. A new Line starts at the Current Point position and ends on Y axis at Current Point position Y plus defined delta coordinate. X coordinate remains unchanged. Current Point is finally changed to be at the end of a new Line segment.

dy : double

Change (delta +/-) to the Current Point coordinate on Y axis [in subpixels].

See ClosePolygon method.

Adds an xARC_TO_ABS path command to the current subpath. A new Arc segment starts at the Current Point position and ends at defined coordinates. Current Point is finally changed to be at the end of a new Arc segment.

Path Arc is a slice of complete ellipse whose geometry is defined by radius on X and Y axis and rotation, which indicates how the ellipse as a whole is rotated relative to the current coordinate system. The center (cx, cy) of the ellipse is calculated automatically to satisfy the constraints imposed by the other parameters - large arc and sweep flag. Following illustration shows, how combination of those two flags affects the computation of the resulting arc:

The four arcs connecting the points are labeled L and S for large and small, and CW and CCW for clockwise and counter-clockwise.

If defined parameters doesn't meet requirements for the minimum size of underlying ellipse (eg. radiuses are too small), a direct Line segment to the destination coordinates will be drawn.

If destination coordinates equals to the Current Point coordinates, nothing will be drawn. So if user wants to draw visually complete ellipse at a given Current Point, he has to define the destination coordinates with an very small dilation like eg. 0.1 pixels or so.

rx : double

Ellipse radius on X axis [in subpixels].

ry : double

Ellipse radius on Y axis [in subpixels].

angle : double

Overall X axis rotation of ellipse [clockwise in radians].

largeArcFlag : boolean

If TRUE, L = Large Arc.

If FALSE, S = Small Arc.

sweepFlag : boolean

If TRUE, CW = Clock Wise.

If FALSE, CCW = Counter Clock Wise.

x : double

X coordinate of end of a new Arc segment [in subpixels].

y : double

Y coordinate of end of a new Arc segment [in subpixels].

See ClosePolygon method.

Adds an xARC_TO_REL path command to the current subpath. A new Arc starts at the Current Point position and ends at Current Point position plus defined delta coordinates. Current Point is finally changed to be at the end of a new Arc segment.

rx : double

Ellipse radius on X axis [in subpixels].

ry : double

Ellipse radius on Y axis [in subpixels].

angle : double

Overall X axis rotation of ellipse [clockwise in radians].

largeArcFlag : boolean

If TRUE, L = Large Arc.

If FALSE, S = Small Arc.

sweepFlag : boolean

If TRUE, CW = Clock Wise.

If FALSE, CCW = Counter Clock Wise.

dx : double

Change (delta +/-) to the Current Point coordinate on X axis [in subpixels].

dy : double

Change (delta +/-) to the Current Point coordinate on Y axis [in subpixels].

See ClosePolygon method.

Adds a QUAD_TO_ABS path command to the current subpath. A new Quadratic Bezier curve starts at the Current Point position, bends by definition of provided control point and ends at provided coordinates. Current Point is finally changed to be at the end of a new Bezier curve segment.

This Quadratic Bezier curve definition is compliant with SVG specification.

xCtrl : double

X coordinate of QuadCurve control point [in subpixels].

yCtrl : double

Y coordinate of QuadCurve control point [in subpixels].

xTo : double

X coordinate of end of a new QuadCurve segment [in subpixels].

yTo : double

Y coordinate of end of a new QuadCurve segment [in subpixels].

See ClosePolygon method.

Adds a QUAD_TO_REL path command to the current subpath. A new Quadratic Bezier curve starts at the Current Point position, bends by definition of Current Point plus defined delta control point and ends at Current Point position plus defined delta coordinates. Current Point is finally changed to be at the end of a new Bezier curve segment.

This Quadratic Bezier curve definition is compliant with SVG specification.

dxCtrl : double

Addition (delta +/-) to the Current Point for control point on X axis [in subpixels].

dyCtrl : double

Addition (delta +/-) to the Current Point for control point on Y axis [in subpixels].

dxTo : double

Change (delta +/-) to the Current Point coordinate on X axis [in subpixels].

dyTo : double

Change (delta +/-) to the Current Point coordinate on Y axis [in subpixels].

See ClosePolygon method.

Adds a SQUAD_TO_ABS path command to the current subpath. A new Quadratic Bezier curve starts at the Current Point position, bends by definition of calculated control point and ends at defined coordinates. The control point is calculated as the reflection of the control point on the previous command relative to the Current Point. If there is no previous command or if the previous command is not a QuadCurve, the missing control point is the same as the Current Point. Current Point is finally changed to be at the end of a new Bezier curve segment.

This Quadratic Bezier curve definition is compliant with SVG specification.

xTo : double

X coordinate of end of a new QuadCurve segment [in subpixels].

yTo : double

Y coordinate of end of a new QuadCurve segment [in subpixels].

See ClosePolygon method.