Graphics, Path and Text objects

Graphics object

Represents graphic surface of the element.

Pretty much all methods return Graphic object itself allowing cascading of calls so following gfx.lineWidth(2).line(0,0,100,100)will draw 2px line from (0,0) to (100,100).

Constants

JOIN_MITER
JOIN_ROUND
JOIN_BEVEL
Join types, values of lineJoin property
CAP_BUTT
CAP_SQUARE
CAP_ROUND
Line cap type, values of lineCap property
ALIGN_DEFAULT
ALIGN_START
ALIGN_END
ALIGN_CENTER
text alignment type, parameter values of Text.Alignment function

Properties

lineJoin
rw - integer, one of JOIN_xxx constants. Type of line join.
lineCap
rw - integer, one of CAP_xxx constants. Type of line cap.
blendMode
rw - integer, one of BLEND_xxx constants. Blend mode of drawing operations.
imageBlendMode
rw - integer, one of BLEND_xxx constants. Blend mode of image renderings.
imageBlendColor
rw - integer, color. Image blending color.

Static Methods

RGBA
(red:integer , green:integer, blue:integer [, alpha:integer|float (0.0 .. 1.0)]) :color or
(s:string) :color

Returns color rgba value. Example: var c = Graphics.RGBA(0xff,0,0); - pure red color or Graphics.RGBA("red"); or Graphics.RGBA("#ff0000");

Methods

constructor
(non-creatable object)
clearAll
( [color: color] ): Graphics

Clears the graphics.

Shapes and Lines

line
( x1:float, y1:float, x2:float, y2:float ) : Graphics

Draws line from x1,y1 to x2,y2 using current lineColor and lineGradient.

triangle
( x1:float, y1:float, x2:float, y2:float, x3:float, y3:float ) : Graphics

Draws triangle using current lineColor/lineGradient and fillColor/fillGradient.

rectangle
( x:float, y:float, w:float, h:float ) or
( x:float, y:float, w:float, h:float, r:float ) or
( x:float, y:float, w:float, h:float, rx:float, ry:float ) or
( x:float, y:float, w:float, h:float, rx_top:float, ry_top:float, rx_bottom:float, ry_bottom:float ) : Graphics

Draws rectangle using current lineColor/lineGradient and fillColor/fillGradient with (optional) rounded corners.

ellipse
( x1:float, y1:float, r:float ) : Graphics or
( x1:float, y1:float, rx:float, ry:float ) : Graphics

Draws circle or ellipse using current lineColor/lineGradient and fillColor/fillGradient.

arc
( x1:float, y1:float, rx:float, ry:float, startAngle:float, swipeAngle:float ) : Graphics

Draws arc or pie (if fill is set) using current lineColor/lineGradient and fillColor/fillGradient.

star
( x1:float, y1:float, r1:float, r2:float, startAngle:float, numRays:integer ) : Graphics

Draws star using current lineColor/lineGradient and fillColor/fillGradient.

polygon
( x1:float, y1:float, x2:float, y2:float, .... ) : Graphics or
( v1:array, v2:array, .... ) : Graphics

Draws polygon using current lineColor/lineGradient and fillColor/fillGradient.

pointInPolygon
( x:float, y:float, polyX1:float, polyY1:float, polyX2:float, polyY2:float, .... ): true | false or
( x:float, y:float, polygon:array ): true | false

Checks if point (x,y) is inside the polygon.

polyline
( x1:float, y1:float, x2:float, y2:float, .... ) : Graphics or
( v1:array, v2:array, .... ) : Graphics

Draws polyline (multi-segment line) using current lineColor/lineGradient and fillColor/fillGradient.

drawPath
( path: Graphics.Path ) : Graphics

Draws the path object using current fill and stroke brushes.

Path primitives
copyImage
( img:Image , x:float, y:float [, xIimg:integer, yImg:integer, wIimg:integer, hImg:integer ] ) : Graphics

Does bit-blit of the image pixels onto the graphics surface. No transformation applied to the image.

Image rendering

blendImage
( img:Image , x:float, y:float [, xIimg:integer, yImg:integer, wIimg:integer, hImg:integer ] [, alpha: float | integer] ) : Graphics

Blends img onto the graphics surface. Operation takes in account per pixel alpha of the imeage and optional alpha value. alpha here is either float [ 0.0 .. 1.0 ] or integer [ 0 .. 255 ].

drawImage
( img:Image , x:float, y:float [, w:float, h:float][, xIimg:integer, yImg:integer, wIimg:integer, hImg:integer ] ) : Graphics

Draws img onto the graphics surface with current transformation applied (scale, rotation).

Storke and Fill attributes

strokeWidth
( width: float ) : Graphics

Set line width for subsequent drawings.

strokeColor
( color: color ) : Graphics

Set line color for subsequent drawing operations.

strokeJoin
( cap: #mitter | #round | #bevel ) : Graphics

Stroke join rendering type.

strokeCap
( cap: #butt | #square | #round ) : Graphics

Stroke cap - stroke dash ending style.

strokeDash
( dash: #solid | #dotted | #dashed | pattern: Array [, offset: float ]) : Graphics

Stroke dash type, either one of predefined types (#solid, #dotted or #dashed) or custom pattern defined by an array whose elements (floats) are set to the length of each dash and space in the dash pattern. 

noStroke
() : Graphics

Disables line (outline) drawing.

fillColor
( color: color ) : Graphics

Set color for solid fills.

strokeLinearGradient
( x1: float, y1: float, x2: float, y2: float, color1: rgba, color2: rgba [, p: float] ) : Graphics

Setup parameters of gradient linear of lines.

strokeLinearGradient
( x1: float, y1: float, x2: float, y2: float, colors: [color1, color2, color3, .. ] ) : Graphics

Setup parameters of gradient linear fills using multiple colors.

strokeLinearGradient
( x1: float, y1: float, x2: float, y2: float, colors: [color1, color2, color3], colorstops: [float, float, float] ) : Graphics

Setup parameters of gradient linear fills using multiple colors and color stop position (0.0 ... 1.0).

fillLinearGradient
( x1: float, y1: float, x2: float, y2: float, color1: rgba, color2: rgba [, p: float] ) : Graphics

Setup parameters of linear gradient fill using two end colors.

fillLinearGradient
( x1: float, y1: float, x2: float, y2: float, colors: Array [, stops: Array] ) : Graphics

Setup parameters of linear gradient fill using list of colors. Optionally you can provide stop positions - array of 0.0 ... 1.0 values.  

lineRadialGradient
( x1: float, y1: float, r: float, color1: rgba, color2: rgba [, p: float] ) : Graphics

Setup parameters of gradient radial drawing of lines.

fillRadialGradient
( x1: float, y1: float, r: float, color1: rgba, color2: rgba [, p: float] ) : Graphics

Setup parameters of gradient radial fill.

fillRadialGradient
( x1: float, y1: float, r: float, colors: Array [, stops: Array] ) : Graphics

Setup parameters of gradient radial fill using list of colors. Optionally you can provide stop positions - array of 0.0 ... 1.0 values. 

noFill
( ) : Graphics

Disables fills for subsequent drawing operations.

Affine transformations

rotate
( radians: float ) : Graphics

Rotate coordinate system on radians angle.

scale
( sx: float, sy: float ) : Graphics

Scale coordinate system. sx is the scale factor in the horizontal direction and sy is the scale factor in the vertical direction. Both parameters must be positive numbers. Values smaller than 1.0 reduce the unit size and values larger than 1.0 increase the unit size.

translate
( tx: float, ty: float ) : Graphics

Move origin of coordinate system to the (tx,ty) point.

skew
( shx: float, shy: float ) : Graphics

Setup skewing (shearing) transformation.

transform
( sx : float, shy : float, shx : float, sy : float, tx : float, ty : float ) : Graphics

Sets transformation matrix described by 

  sx  shy tx
[ shx sy  ty ]
  0   0   1 
screenToWorld
(r: number) : float
screenToWorld
(x: number, y: number) : (float, float)

These two functions translate coordinates from screen coordinate system to the one defined by rotate(),scale(), translate(), skew() and or transform().

worldToScreen
(r: number) : float
worldToScreen
x: number, y: number) : (float, float)

These two functions translate coordinates from coordinate system defined by rotate(),scale(), translate() and/or skew() to screen coordinate system.

Text output

drawText
( text: Graphics.Text, x: float, y: float [, clr: color] [, pointOf: integer] ) : Graphics

Renders text layout object (see below) at position (x,y) with optional parameters:

fonts
( [template:string] ) : array of strings, class method (a.k.a. static method).

Returns array of strings - list of installed font names. template if defined is a template for font name. E.g. Graphics.fonts("Arial*") may return array like ["Arial", "Arial Black", "Arial Narrow"] on your OS.

State

antialiasing
( onOff: boolean ) : Graphics

Enables/disables anti-aliasing. By default anti-aliasing is on.

save
( ) : Graphics

Saves current Graphics attributes on top of internal state stack.

restore
( ): Graphics

Restores Graphics attributes from top of internal state stack.

Layers

pushLayer
( x: float, y: float, width: float, height: float [, opacity: 0.0... 1.0 | filter] ) : Graphics

Sets rectangular clip region with optional opacity.

pushLayer
( region: Graphics.Path [, opacity: 0.0... 1.0] ) : Graphics

Sets clip region equal to the path object, with optional opacity.

pushLayer
( image: Image, mask1a: true | false, [, opacity: 0.0... 1.0] ) : Graphics

Sets clip mask from image. If mask1a is true then all pixels corresponding mask alpha == 0 will not be rendered. If mask1a is false then it is an inverse mask - all pixels corresponding mask alpha == 0 will be rendered

pushLayer
( area: Symbol [, filter] ) : Graphics

Sets clip region equal to one of the following:

The filter is one of CSS filter values (expressed as a tuple):

popLayer
( ): Graphics

pops graphics layer from the graphics. If the layer uses opacity it gets rendered at this moment.

Graphics.Path object

this
( [d:string] ) : Graphics

Constructor, starts new path. Use as var path = new Graphics.Path();  to construct new path object.

d is a value of SVG's <path d=...> attribute that, if provided, will initialize the path.

moveTo
( x:float, y:float [, relative = false ] ) : Graphics.Path

Moves current drawing path position to x,y. If relative is true then x and y are interpreted as deltas from the current path position.

lineTo
( x:float, y:float [, relative = false ] ) : Graphics.Path

Draws line and moves current drawing path position to x,y. If relative is true then x and y are interpreted as deltas from the current path position.

hlineTo
( x:float [, relative = false ] ) : Graphics.Path

Draws horizontal line and moves current drawing path position to x, (current)y. If relative is true then x is interpreted as a delta from the current path position.

vlineTo
( y:float [, relative = false ] ) : Graphics.Path

Draws vertical line and moves current drawing path position to (current)x, y. If relative is true then y is interpreted as a delta from the current path position.

arcTo
( x1:float, y1:float, x2:float, y2:float, radius: float [, relative = false ] ) : Graphics.Path

Draws arc at the corner (point x1,y1) between two lines x0,y0 to x1,y1 and x1,y1 to x2,y2. See: Canvas ArcTo Tutorial

arc
( cx:float, cy:float, radius:float[, radiusy:float], start: float | angle , swipe : float | angle ) : Graphics.Path

Draws arc at center (point cx,cy) with radius and start and swipe angles. Swipe is a rotation angle - if it is positive then direction is clockwise, negative - counterclockwise.

quadraticCurveTo
( xc:float, yc:float , x:float, y:float [, relative = false ] ) : Graphics.Path

(tbd)

bezierCurveTo
( xc1:float, yc1:float , xc2:float, yc2:float, x:float, y:float [, relative = false ] ) : Graphics.Path

(tbd)

close
(  ) : Graphics.Path

closes current path/figure.

fillEvenOdd
( even: true|false ) : Graphics.Path

Set even/odd rule for polygon fills.

isPointInside
( x: float, y: float ) : true | false

Tests if point (x,y) is inside the path

bounds
() : x1,y1,x2,y2 

returns x1,y1,x2,y2 float numbers - left,top,right,bottom bounds of the path. 

combine
( mode : symbol, other : Graphics.Path ) : Graphics.Path

combines this path with the other, returns new, combined path. The mode is one of:

Graphics.Text object

Represents text layout object to be rendered on graphics.

All length metrics of the Text are in DIPs - device independent pixels (1/96 of inch).

Properties

lines
r - integer, reports number of lines in text layout. To get meaningful values you should set width of the text layout object first like text.width(100);
chars
r/w - string, characters rendered by the text layout. Changing characters after construction invalidates min/max width and height of the object.
font
r/w - string, a string parsed as CSS font value. The default font is the font used by owner Element (or document if owner is not provided in constructor).
style
r/w - string, a string parsed as DOM style attribute of DOM Element. By using this property you can define not just font properties but all other text associated ones like line-height, text-align, vertical-align, text-decoration, etc. 
class
r/w - string, name of a class defined in style sheet. This allows to define text properties not in code but in CSS. 

Example, if the text is used to render labels on some chart widget:

var chart = this;
var label = new Graphics.Text("I quarter", chart); 
label.class = "label";

then you can define styles of such labels as

chart > text.label {
  font-size:75%;
  color: #000;
}

Methods

this
(str: string [, owner: Element])

Constructs Text object from a string.  When styleSource is provided it is used for assigning initial style (font,alignment, etc) to the text.

width
( ) : ( maxWidth:float, minWidth:float, boxWidth:float )

Returns maximal/minimal widths of the text and box width previously set by width(w).

Maximal width is the width of the text without wrapping. If the text contains new line [sequences] then function returns width of widest string. And minimal width is a width of widest word (non-breakable sequence) in the text.

width
( w:float ) : Graphics.Text

Sets width of the Text object. After width is set all dependent attributes (height, lines) can be retrieved.

height
( ) : (textHeight:float, boxHeight:float)
Returns pair: computed height of the Text object and box height previously set by height(h).
height
( boxHeight: float ) : Text
Sets box height of the Text object.
line
(linNo: integer) : ( y: float, height: float, baselineOffset: float, length:integer )

Returns metrics of particular line in text layout object:

alignment
( textAlignment: ALIGN_***, verticalAlignment: ALIGN_*** ) : Graphics.Text

Sets text and vertical alignment of the text object.

OBSOLETE: use Text.style or Text.class

alignment
( ) : ( ALIGN_***, ALIGN_***)

Returns text and vertical alignment of the text object.

OBSOLETE: use Text.style or Text.class