Graphics, Path and Text objects

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, endAngle:float ) : Graphics

Draws closed arc 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 ) : Graphics

Stroke dash type.

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 gradient linear of lines.

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 fills.

noFill
( ) : Graphics

Disables fills for subsequent drawing operations.

Affine transformations

rotate
( radians: float ) : Graphics

Rotate coordinate system on radians angle.

scale
( xsc: float, ysc: float ) : Graphics

Scale coordinate system. xsc is the scale factor in the horizontal direction and ysc 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
( x: float, y: float ) : Graphics

Move origin of coordinate system to the (x,y) point.

skew
( sx: float, sy: float ) : Graphics
Setup skewing (shearing) transformation.
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() and/or skew().

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:

  • clr – color, if provided it is used to render the text. If no color is given then current fill an stroke brushes are used to render text with outlines.
  • pointOf – number in the range 1..9, defines what part of text layout corresponds to point (x,y). For meaning of numbers see numeric pad on keyboard.  Example:
    gfx.drawText(text, 100,100, 5); – text will drawn with its center loacated at (100,100) point.
    By default pointOf=7 is used – x,y are coordinates of top/left corner of the text.
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] ) : 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 ) : Graphics

Sets clip region equal to one of the following:

  • #background-area – background area of the element, including rounded borders if they are dclared for the element;
  • #client-box – client box of the element ( inner box minus areeas occupied by scrollbars );
  • #margin-box – margin box of the element;
  • #border-box – border box of the element;
  • #padding-box – padding box of the element;
  • #inner-box – inner, content box of the element;
popLayer
( ): Graphics

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

Graphics.Path object

this
( ) : Graphics

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

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
( x:float, y:float, angle:float, rx:float, ry:float, largeArc:bool, sweep: bool [, relative = false ] ) : Graphics.Path

(tbd)

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

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

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

  • #union – result path is a unioin of these two – contains areas presented in this or other paths;
  • #intersect – result path is an intersection of these two – contains areas presented in this and other paths;
  • #xor – result path is an xor of these two – contains areas presented only in this or other paths but not in both;
  • #exclude – result path contains areas presented in this path with overlaping areas from other excluded.

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 charcters after construction invalidates min/max width and height of the object.

Methods

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

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

font
( name: string, size: float, [ bold: true|false, [ italic: true|false]] ) : Graphics.Text

Defines font attributes of this Text object.

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:

  • y – distance the line from the start of the text;
  • height – height of the line;
  • baselineOffset – offset of the baseline from y value of the line;
  • length – number of characters (UTF16 code units to be precise) in this line including new line sequence if there is any.
alignment
( textAlignment: ALIGN_***, verticalAlignment: ALIGN_*** ) : Graphics.Text

Sets text and vertical alignment of the text object.

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

Returns text and vertical alignment of the text object.

TBD.