|
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_LEFT
ALIGN_RIGHT
ALIGN_CENTER |
horizontal alignment type, parameter values of textAlignment function |
|
ALIGN_CENTER
ALIGN_TOP
ALIGN_BOTTOM |
vertical alignment type, parameter values of textAlignment function |
|
BLEND_ALPHA
BLEND_CLEAR
BLEND_SRC
BLEND_DST
BLEND_SRCOVER
BLEND_DSTOVER
BLEND_SRCIN
BLEND_DSTIN
BLEND_SRCOUT
BLEND_DSTOUT
BLEND_SRCATOP
BLEND_DSTATOP
BLEND_XOR
BLEND_ADD
BLEND_SUB
BLEND_MULTIPLY
BLEND_SCREEN
BLEND_OVERLAY
BLEND_DARKEN
BLEND_LIGHTEN
BLEND_COLORDODGE
BLEND_COLORBURN
BLEND_HARDLIGHT
BLEND_SOFTLIGHT
BLEND_DIFFERENCE
BLEND_EXCLUSION
BLEND_CONTRAST |
blending type, values of blendMode and imageBlendMode properties |
|
FILL_ONLY
STROKE_ONLY
STROKE_AND_FILL
FILL_BY_LINE_COLOR |
drawPath flags. |
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. |
|
| line |
( x1:float, y1:float, x2:float, y2:float ) : Graphics
Draws line from x1,y1 to x2,y2 using current lineColor and lineGradient. |
Shapes and Lines |
| 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. |
| beginPath |
( ) : Graphics
Starts new path. |
Path primitives
|
| moveTo |
( x:float, y:float [, relative = false ] ) : Graphics
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
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
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
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
(tbd) |
| ellipseTo |
( x:float, y:float, rx:float, ry:float, [, clockwise = true ] ) : Graphics
(tbd) |
| quadraticCurveTo |
( xc:float, yc:float , x:float, y:float [, relative = false ] ) : Graphics
(tbd) |
| bezierCurveTo |
( xc1:float, yc1:float , xc2:float, yc2:float, x:float, y:float [, relative = false ] ) : Graphics
(tbd) |
| closePath |
( ) : Graphics
(tbd) |
| drawPath |
( [flag:integer = Graphics.STROKE_AND_FILL] ) : Graphics
(tbd) |
| 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). |
| lineWidth |
( width: float ) : Graphics
Set line width for subsequent drawings. |
Line/Outline
and Fill
attributes |
| lineColor |
( color: color ) : Graphics
Set line color for subsequent drawing operations. |
| noLine |
() : Graphics
Disables line (outline) drawing. |
| fillColor |
( color: color ) : Graphics
Set color for solid fills. |
| lineLinearGradient |
( x1: float, y1: float, x2: float, y2: float, color1: rgba, color2: rgba [, p: float] ) : Graphics
Setup parameters of gradient linear of lines. |
| fillLinearGradient |
( x1: float, y1: float, x2: float, y2: float, color1: rgba, color2: rgba [, p: float] ) : Graphics
Setup parameters of gradient linear fills. |
| 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. |
| fillEvenOdd |
( even: true|false ) : Graphics
Set even/odd rule for polygon fills. |
| noFill |
( ) : Graphics
Disables fills for subsequent drawing operations. |
| rotate |
( radians: float ) : Graphics
Rotate coordinate system on radians angle. |
Affine
transformations |
| 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. |
| font |
( name: string, size: float, [ bold: true|false, [ italic: true|false, [ angle: double, [ vector: true|false ]]]] ) : Graphics
Define font attributes for all subsequent text operations. 'vector' parameter is used only on Windows Mobile. If it is false then quality of rendering will be better but it will be impossible to rotate text, make it bold/italic. True by default. |
Text output |
| text |
( x: float, y: float, text: string ) : Graphics
Renders text string at position (x,y) with use of text alignment settings.
Note that text drawing is using line attributes for outlining each glyph and fill attributes to fill glyphs. If you need to draw text without outlining then put gfx.noLine(); gfx.fillColor( color(...) ); before calling gfx.text(...); |
| textAlignment |
( horizontal: ALIGN_***, vertical: ALIGN_*** ) : Graphics
Sets text alignment in horizontal and vertical directions. |
| textWidth |
( text: string ) : float
Calculates width of text string using current font. |
| 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. |
| save |
( ) : Graphics
Saves current Graphics attributes on top of internal state stack. |
State |
| restore |
( ): Graphics
Restores Graphics attributes from top of internal state stack. |
TBD.
|
