<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

See also <LzCanvasGradient> 

<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 Node

class, classroot, cloneManager, datapath, id, ignoreAttribute, ignoreplacement, immediateparent, initstage, name, nodeLevel, onconstruct, oninit, parent, placement, subnodes

Attributes inherited from View

aaactive, aadescription, aaname, aasilent, aatabindex, align, bgcolor, clickable, clickregion, clip, cursor, defaultplacement, fgcolor, focusable, focustrap, font, fontsize, fontstyle, frame, framesloadratio, hassetheight, hassetwidth, height, layout, loadratio, mask, onblur, onclick, ondata, ondblclick, onfocus, onkeydown, onkeyup, onmousedown, onmouseout, onmouseover, onmouseup, onselect, opacity, options, pixellock, play, resource, resourceheight, resourcewidth, rotation, selectiontype, showhandcursor, source, stretches, subviews, totalframes, unstretchedheight, unstretchedwidth, valign, visible, width, x, xoffset, y, yoffset

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

animate, applyConstraint, applyData, childOf, completeInstantiation, createChildren, dataBindAttribute, destroy, determinePlacement, getAttribute, getOption, getUID, lookupSourceLocator, searchImmediateSubnodes, searchSubnodes, setAttribute, setDatapath, setID, setName, setOption

Methods inherited from LzView

addProxyPolicy, addSubview, bringToFront, construct, containsPt, getAttributeRelative, getBounds, getColor, getColorTransform, getContextMenu, getCurrentTime, getDepthList, getHeight, getID3, getMouse, getPan, getTotalTime, getVolume, getWidth, init, measureHeight, measureWidth, play, releaseLayouts, removeProxyPolicy, searchParents, searchSubviews, seek, sendBehind, sendInFrontOf, sendToBack, setAAActive, setAADescription, setAAName, setAASilent, setAATabIndex, setAlign, setAttributeRelative, setBGColor, setClickable, setColor, setColorTransform, setContextMenu, setCursor, setHeight, setLayout, setOpacity, setPan, setPlay, setResource, setResourceNumber, setRotation, setShowHandCursor, setSource, setValign, setVisible, setVolume, setWidth, setX, setY, shouldYieldFocus, stop, stretchResource, unload, updateResourceSize

Events

Events inherited from LzNode

onconstruct, ondata, oninit

Events inherited from LzView

onaddsubresource, onaddsubview, onblur, onclick, ondblclick, onerror, onfocus, onframe, onheight, onlastframe, onload, onmousedown, onmousedragin, onmousedragout, onmouseout, onmouseover, onmouseup, onmouseupoutside, onopacity, onplay, onremovesubview, onstop, ontimeout, onwidth, onx, ony


Copyright © 2002-2007 Laszlo Systems, Inc. All Rights Reserved. Unauthorized use, duplication or distribution is strictly prohibited. This is the proprietary information of Laszlo Systems, Inc. Use is subject to license terms.