<drawview> adds procedural drawing APIs to <view>
<drawview> implements a subset of the WHATWG drawing APIs, which can be found at:
http://www.whatwg.org/specs/web-apps/current-work/#the-canvas-element
<canvas>
<drawview width="200" height="300">
<handler name="oncontext">
this.moveTo(100, 100);
this.lineTo(100, 200);
this.quadraticCurveTo(150, 250, 200, 200);
this.closePath();
this.fillStyle = 0x0000ff;
this.globalAlpha = .5;
this.fill();
this.strokeStyle = 0xffff00;
this.lineWidth = 5;
this.stroke();
var g = this.createRadialGradient(75, 75, .7, 300, 300, 0)
this.globalAlpha = 0;
g.addColorStop(0, 0x000000);
this.globalAlpha = 1;
g.addColorStop(1, 0xffffff);
this.fillStyle = g;
this.fill();
this.strokeStyle = 0x000000;
this.lineWidth = 0;
this.stroke();
this.beginPath();
this.lineTo(75, 0);
this.lineTo(75, 75);
this.lineTo(0, 75);
this.lineTo(0, 0);
this.closePath();
var g = this.createLinearGradient(0, 0, 75, 75)
this.globalAlpha = 0;
g.addColorStop(0, 0x000000);
this.globalAlpha = 1;
g.addColorStop(1, 0xffffff);
this.fillStyle = g;
this.fill();
</handler>
</drawview>
</canvas>
drawview extends <view>,
which is the fundamental visual class of LZX.
| Name (CSS property) | Type (tag) | Type (js) | Default | Category |
|---|---|---|---|---|
aliaslines
|
boolean | boolean | false | read/write |
| If true, lines will be offset by lineWidth / 2 to appear aliased (dhtml-only) | ||||
cachebitmap
|
boolean | boolean | true | read/write |
| If true, the bitmap result will be cached where possible. (swf-only) | ||||
fillStyle
|
string | String | "#000000" | read/write |
| Represents the colour or style to use for the fill inside the shapes. Can be either a hexadecimal number (0xffffff), a CSS string ('#ff00ff' or '#f0f'), or a CanvasGradient/LzCanvasGradient. | ||||
globalAlpha
|
number | Number | 1.0 | read/write |
| Gives an alpha value that is applied to shapes and images before they are composited onto the canvas. The valid range of values is from 0.0 (fully transparent) to 1.0 (no additional transparency). If the attribute is set to values outside this range, it is ignored. When the context is created, the globalAlpha attribute initially has the value 1.0. | ||||
lineCap
|
"butt" | "round" | "square" | String | "butt" | read/write |
| Gives the default lineCap value for lines. Round for consistency between swf and dhtml. | ||||
lineJoin
|
"round" | "bevel" | "miter" | String | "miter" | read/write |
| Gives the default lineJoin value for lines. Round for consistency between swf and dhtml. | ||||
lineWidth
|
number | Number | 1 | read/write |
| Gives the default width of lines, in coordinate space units. Negative values are ignored. 0 draws hairlines in swf - lines that are always 1 pixel wide even when scaled. | ||||
measuresize
|
boolean | boolean | true | read/write |
| If true, the size of the drawview will be set dynamically based on its contents, where possible. (swf-only) | ||||
miterLimit
|
number | Number | 10 | read/write |
| Gives the default miterLimit value for lines. | ||||
strokeStyle
|
string | String | "#000000" | read/write |
| Represents the colour to use for the lines around shapes. Specified as a hexadecimal number (0xffffff) or a CSS string ('#ff00ff' or '#f0f'). | ||||
Attributes inherited from <view>
aaactive, aadescription, aaname, aasilent, aatabindex, align, backgroundrepeat, bgcolor, cachebitmap, capabilities, clickable, clickregion, clip, colortransform, context, contextmenu, cornerradius, cursor, fgcolor, focusable, focustrap, font, fontsize, fontstyle, frame, framesloadratio, hasdirectionallayout, hassetheight, hassetwidth, height, layout, loadratio, mask, opacity, pixellock, playing, proxyurl, resource, resourceheight, resourcewidth, rotation, shadowangle, shadowblurradius, shadowcolor, shadowdistance, showhandcursor, source, stretches, subviews, tintcolor, totalframes, unstretchedheight, unstretchedwidth, usegetbounds, valign, visibility, visible, width, x, xoffset, xscale, y, yoffset, yscale
Attributes inherited from <node>
classroot, cloneManager, data, datapath, defaultplacement, id, ignoreplacement, immediateparent, inited, initstage, name, nodeLevel, options, parent, placement, styleclass, subnodes, transition
Methods
-
arc() -
drawview.arc(x : Number, y : Number, radius : Number, startAngle : Number, endAngle : Number, anticlockwise : Number);Adds an arc to the current path. The arc is a segment of a circle that has radius as given. The circle segment is determined by the two angles startAngle and endAngle and begins at the given coordinate (x,y). If anticlockwise is true, the arc is drawn counter-clockwise, otherwise it is drawn counter-clockwise (anti-clockwise).
Parameter Name Type Description x Number Starting x position y Number Starting y position radius Number Radius startAngle Number Angle to start in radians endAngle Number Angle to end in radians anticlockwise Number counter-clockwise if true, clockwise otherwise
-
beginPath() -
-
bezierCurveTo() -
drawview.bezierCurveTo(cp1x : Number, cp1y : Number, cp2x : Number, cp2y : Number, x : Number, y : Number);Adds the given coordinate (x, y) to the list of points of the subpath, and connects the two points with a bezier curve with control points (cp1x, cp1y) and (cp2x, cp2y). It then sets the current position to the given coordinate (x, y).
Parameter Name Type Description cp1x Number X value of control point 1 cp1y Number Y value of control point 1 cp2x Number X value of control point 2 cp2y Number Y value of control point 2 x Number X value of endpoint y Number Y value of endpoint
-
clear() -
-
closePath() -
Adds a straight line from the current position to the first point in the last subpath and marks the subpath as closed, if the last subpath isn't closed, and if it has more than one point in its list of points. If the last subpath is not open or has only one point, it does nothing.
-
createLinearGradient() -
Takes four arguments, representing the start point (x0, y0) and end point (x1, y1) of the gradient, in coordinate space units, and returns an object representing a linear gradient initialised with that line. Linear gradients are rendered such that at the starting point on the canvas the colour at offset 0 is used, that at the ending point the color at offset 1 is used, that all points on a line perpendicular to the line between the start and end points have the colour at the point where those two lines cross. (Of course, the colours are only painted where the shape they are being painted on needs them.)
Parameter Name Type Description x0 Number Starting x position y0 Number Starting y position x1 Number Ending x position y1 Number Ending y position Returns Type Description lz.CanvasGradient Opaque class used to add color/offset/alpha steps - see LzCanvasGradient.addColorStop();
-
createRadialGradient() -
drawview.createRadialGradient(x0 : Number, y0 : Number, r0 : Number, x1 : Number, y1 : Number, r1 : Number);Takes six arguments, the first three representing the start point (x0, y0) and rotation r0, and the last three representing the end point (x1, y1) and radius r1. The values are in coordinate space units. Rotation doesn't appear to work for radial gradients. Even so, it can be set by specifying r0 in radians. r1 is ignored.
Parameter Name Type Description x0 Number Starting x position y0 Number Starting y position r0 Number Rotation of the gradient - not working x1 Number Ending x position y1 Number Ending y position r1 Number Ignored Returns Type Description lz.CanvasGradient Opaque class used to add color/offset/alpha steps - see addColorStop();
-
fill() -
Fills each subpath of the current path in turn, using fillStyle, and using the non-zero winding number rule. Open subpaths are implicitly closed when being filled (without affecting the actual subpaths). Note that closePath() is called before the line is filled.
-
lineTo() -
Adds the given coordinate (x, y) to the list of points of the subpath, and connects the current position to that point with a straight line. It then sets the current position to the given coordinate (x, y).
-
moveTo() -
Sets the current position to the given coordinate and creates a new subpath with that point as its first (and only) point. If there was a previous subpath, and it consists of just one point, then that subpath is removed from the path.
-
oval() -
Draws an oval at the origin x, y with a radius radius. If yRadius is specified, radius is the x radius of the oval. Based on mc.drawOval() - by Ric Ewing (ric@formequalsfunction.com) - version 1.1 - 4.7.2002
Parameter Name Type Description x Number Starting x position y Number Starting y position radius Number The radius of the oval. If [optional] yRadius is defined, r is the x radius. yRadius Number Optional y radius of the oval
-
quadraticCurveTo() -
Adds the given coordinate (x, y) to the list of points of the subpath, and connects the current position to that point with a quadratic curve with control point (cpx, cpy). It then sets the current position to the given coordinate (x, y).
Parameter Name Type Description cpx Number curve control point's x position cpy Number curve control point's y position x Number x position to draw to y Number y position to draw to
-
rect() -
drawview.rect(x : Number, y : Number, width : Number, height : Number, topleftradius : Number, toprightradius : Number, bottomrightradius : Number, bottomleftradius : Number);Rect creates a new subpath containing just the rectangle with top left coordinate (x, y), width w and height h. Based on mc.drawRect() - by Ric Ewing (ric@formequalsfunction.com)
Parameter Name Type Description x Number starting x position y Number starting y position width Number Width height Number Height topleftradius Number Optional radius of rounding for topleft corner. If no other radius parameters are specified, topleftradius is used for all corners. toprightradius Number Optional radius of rounding for topright corner. bottomrightradius Number Optional radius of rounding for bottomright corner. bottomleftradius Number Optional radius of rounding for bottomleft corner.
-
stroke() -
Methods inherited from <view>
bringToFront, containsPt, getAttributeRelative, getBounds, getColor, getColorTransform, getCurrentTime, getDepthList, getDisplayObject, getID3, getMouse, getNextSelection, getPan, getPrevSelection, getProxyURL, getTotalTime, getVolume, init, isBehind, isInFrontOf, isMouseOver, measureHeight, measureWidth, play, proxyurl, searchSubviews, seek, sendAAEvent, sendBehind, sendInFrontOf, sendToBack, setAccessible, setAttributeRelative, setColor, setColorTransform, setPan, setProxyPolicy, setSource, setVolume, shouldYieldFocus, stop, unload, updateResourceSize
Methods inherited from <node>
animate, applyConstraintMethod, applyData, childOf, completeInstantiation, construct, createChildren, dataBindAttribute, destroy, determinePlacement, getOption, getUID, init, lookupSourceLocator, releaseConstraint, releaseConstraintMethod, searchImmediateSubnodes, searchSubnodes, setOption, setSelected, updateData
Events
Events inherited from <view>
onaddsubview, onbackgroundrepeat, onblur, onclick, onclickable, onclip, oncontext, oncornerradius, ondblclick, onerror, onfocus, onframe, onframesloadratio, ongesture, onheight, onkeydown, onkeyup, onlastframe, onload, onloadratio, onmousedown, onmousedragin, onmousedragout, onmouseout, onmouseover, onmousetrackout, onmousetrackover, onmousetrackup, onmouseup, onmouseupoutside, onopacity, onplay, onplaying, onremovesubview, onshadowangle, onshadowblurradius, onshadowcolor, onshadowdistance, onstop, ontimeout, ontouch, onvisible, onwidth, onx, ony