TAgg2D is a simple API for AggPas vector graphics library. This API was originally written and published by Maxim Shemanarev (c) 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 cut and pasted to see it in action.

This documentation is not a part of AggPas library, because I plan to make improvements over time and I want to make it independent from the main software distribution package.

Where apropriate, I link directly to the articles on www.antigrain.com site containing excellent informations 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 will read this document carefully, You will discover also how to do some nice little tricks (like reflections).

Don't hesitate to send me Your comments.

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 gradi