Drawview(LzDrawView)
出自OpenFace
目录 |
<drawview>
Adds procedural drawing APIs to view. JavaScript: LzDrawView
Extends View <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/#graphics
<canvas>
<drawview width="200" height="200">
<handler name="oninit">
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>
LzDrawView extends LzView, which is the fundamental visual class of LZX.
Attributes
Name Usage Type(Tag) Type(JS) Default Category
fillStyle JS only readonly
Represents the colour or style to use for the fill inside the shapes. Can be either a hexadecimal number (0xffffff) or an LzCanvasGradient.
globalAlpha JS only readonly
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, they are ignored. When the context is created, the globalAlpha attribute initially has the value 1.0.
lineWidth JS only readonly
Gives the default width of lines, in coordinate space units. Negative values are ignored. 0 draws hairlines - lines that are always 1 pixel wide even when scaled.
strokeStyle JS only readonly
Represents the colour to use for the lines around shapes. Specified as a hexadecimal number in the format 0xffffff.
Attributes inherited from LzNode
id, name, parent, subnodes
Attributes inherited from LzView
align,bgcolor,clip,cloneManager,datapath,enabled,fgcolor,focusable,fontsize,frame,hassetheight,hassetwidth,height,ignorelayout, ignorex,ignorey,opacity,resource,resourceheight,resourcewidth,rotation,source,totalframes,valign,visible,width,x,y
Methods
arc()
LzDrawView.arc(x, y, radius, startAngle, endAngle, clockwise) 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 clockwise is true, the arc is drawn clockwise from startAngle to endAngle, otherwise it is drawn counter-clockwise (anti-clockwise).
Parameters Name Type Desc 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 clockwise Number anticlockwise if true, clockwise otherwise
beginPath()
LzDrawView.beginPath() Resets the list of subpaths to an empty list, and calls moveTo() with the point (0,0).
bezierCurveTo()
LzDrawView.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) bezierCurveTo() 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). Approximates a cubic bezier with quadratic segments, to within a midpoint error of LzDrawView.prototype.bezierCurveTo.error.
Parameters Name Type Desc 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()
LzDrawView.clear() Clears drawing area
closePath()
LzDrawView.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()
LzDrawView.createLinearGradient(x0, y0, x1, y1) Takes four arguments, representing the start point (x0, y0) and end point (x1, y1) of the gradient, in coordinate space units, and returns a linear CanvasGradient 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.)
Parameters Name Type Desc x0 Number Starting x position y0 Number Starting y position x1 Number Ending x position y1 Number Ending y position Returns Type Desc LzCanvasGradient Opaque class used to add color/offset/alpha steps - see LzCanvasGradient.addColorStop();
createRadialGradient()
LzDrawView.createRadialGradient(x0, y0, r0, x1, y1, r1) 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.
Parameters Name Type Desc 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 Desc LzCanvasGradient Opaque class used to add color/offset/alpha steps - see addColorStop();
cssColorToLong()
LzDrawView.cssColorToLong(value)
Convert a css color string to an integer. This recognizes only '#rgb', '#rrggbb', and the color names that have been defined in the global namespace ('red', 'green', 'blue', etc.)
Parameters Name Type Desc value Color value to convert
fill()
LzDrawView.fill(m) 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.
Parameters Name Type Desc m None
lineTo()
LzDrawView.lineTo(x, y) 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).
Parameters Name Type Desc x Number x position to draw to y Number y position to draw to
moveTo()
LzDrawView.moveTo(x, y) 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.
Parameters Name Type Desc x None y None
oval()
LzDrawView.oval(x, y, radius, yRadius) 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
Parameters Name Type Desc 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()
LzDrawView.quadraticCurveTo(cpx, cpy, x, y) 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).
Parameters Name Type Desc 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()
LzDrawView.rect(x, y, w, h, cornerRadius) 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)
Parameters Name Type Desc x Number starting x position y Number starting y position w Number Width h Number Height cornerRadius Number Optional radius of rounding for corners (defaults to 0)
stroke()
LzDrawView.stroke() Strokes each subpath of the current path in turn, using the strokeStyle and lineWidth attributes.
Methods inherited from LzNode
getAttribute, setAttribute,applyConstraint
Methods inherited from LzView
destroy, getAbsoluteX, getAbsoluteY, getBGColor, getColor, getHeight, getResource, getRotation, getSource, getTotalFrames, getWidth, getX, getY, init, sendBehind, sendInFrontOf, setAlign, setBGColor, setColor, setHeight, setOpacity, setResource, setResourceNumber, setRotation, setSource, setValign, setVisible, setWidth, setX, setY, stretchResource
Events
Events inherited from LzNode
ondata, oninit
Events inherited from LzView
onenabled，onerror, onfocus, onwidth, onheight, onopacity, onvisible, onwidth, onx, ony, onpathready, oncloneend, onclonenumber
