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).
Returns color rgba value. Example: var c = Graphics.RGBA(0xff,0,0); - pure red color or Graphics.RGBA("red"); or Graphics.RGBA("#ff0000");
Clears the graphics.
Draws line from x1,y1 to x2,y2 using current lineColor and lineGradient.
Draws triangle using current lineColor/lineGradient and fillColor/fillGradient.
Draws rectangle using current lineColor/lineGradient and fillColor/fillGradient with (optional) rounded corners.
Draws circle or ellipse using current lineColor/lineGradient and fillColor/fillGradient.
Draws arc or pie (if fill is set) using current lineColor/lineGradient and fillColor/fillGradient.
Draws star using current lineColor/lineGradient and fillColor/fillGradient.
Draws polygon using current lineColor/lineGradient and fillColor/fillGradient.
Checks if point (x,y) is inside the polygon.
Draws polyline (multi-segment line) using current lineColor/lineGradient and fillColor/fillGradient.
Draws the path object using current fill and stroke brushes.
Does bit-blit of the image pixels onto the graphics surface. No transformation applied to the image.
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 ].
Draws img onto the graphics surface with current transformation applied (scale, rotation).
Set line width for subsequent drawings.
Set line color for subsequent drawing operations.
Stroke join rendering type.
Stroke cap - stroke dash ending style.
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.
Disables line (outline) drawing.
Set color for solid fills.
Setup parameters of gradient linear of lines.
Setup parameters of gradient linear fills using multiple colors.
Setup parameters of gradient linear fills using multiple colors and color stop position (0.0 ... 1.0).
Setup parameters of linear gradient fill using two end colors.
Setup parameters of linear gradient fill using list of colors. Optionally you can provide stop positions - array of 0.0 ... 1.0 values.
Setup parameters of gradient radial drawing of lines.
Setup parameters of gradient radial fill.
Setup parameters of gradient radial fill using list of colors. Optionally you can provide stop positions - array of 0.0 ... 1.0 values.
Disables fills for subsequent drawing operations.
Rotate coordinate system on radians angle.
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.
Move origin of coordinate system to the (tx,ty) point.
Setup skewing (shearing) transformation.
Sets transformation matrix described by
sx shy tx [ shx sy ty ] 0 0 1
These two functions translate coordinates from screen coordinate system to the one defined by rotate(),scale(), translate(), skew() and or transform().
These two functions translate coordinates from coordinate system defined by rotate(),scale(), translate() and/or skew() to screen coordinate system.
Renders text layout object (see below) at position (x,y) with optional parameters:
gfx.drawText(text, 100,100, 5);
- text will drawn with its center loacated at (100,100) point.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.
Enables/disables anti-aliasing. By default anti-aliasing is on.
Saves current Graphics attributes on top of internal state stack.
Restores Graphics attributes from top of internal state stack.
Sets rectangular clip region with optional opacity.
Sets clip region equal to the path object, with optional opacity.
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
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 areas 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;The filter is one of CSS filter values (expressed as a tuple):
[blur:
radius]
- radius here is a length unit [brightness:
0.0...1.0]
[contrast:
0.0...1.0]
[grayscale:
0.0...1.0]
[hue-rotate:
0...360]
[invert:]
[opacity:
0.0...1.0]
[saturate:
0.0...1.0]
[sepia:
0.0...1.0]
[drop-shadow:
color, dx, dy, radius, spread]
- dx,dy,radius and spread are length units.pops graphics layer from the graphics. If the layer uses opacity it gets rendered at this moment.
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.
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.
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.
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.
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.
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
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.
(tbd)
(tbd)
closes current path/figure.
Set even/odd rule for polygon fills.
Tests if point (x,y) is inside the path
returns x1,y1,x2,y2 float numbers - left,top,right,bottom bounds of the path.
combines this path with the other, returns new, combined path. The mode is one of:
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).
text.width(100);
line-height
, text-align
, vertical-align
, text-decoration
, etc. 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; }
Constructs Text object from a string. When styleSource is provided it is used for assigning initial style (font,alignment, etc) to the text.
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.
Sets width of the Text object. After width is set all dependent attributes (height, lines) can be retrieved.
Returns metrics of particular line in text layout object:
Sets text and vertical alignment of the text object.
OBSOLETE: use Text.style or Text.class
Returns text and vertical alignment of the text object.
OBSOLETE: use Text.style or Text.class