The LzDrawView Class
An LzDrawView object represents a view on which you can draw various shapes. As you can guess, the LzDrawView class is a subclass of LzView. You can easily create an LzDrawView object by using the drawview tag. You can see the list of attributes of the LzDrawView class in Table 10.1.
| Name | Usage | Type | Default | Accessibility |
|---|---|---|---|---|
| fillStyle | JS only | A color or an LzCanvasGradient | read-only | |
| Description. The color or style used to fill a shape. | ||||
| globalAlpha | JS only | Number | 1.0 | read-only |
| Description. The alpha value applied to shapes and images before they are drawn onto the canvas. Valid values range from 0.0 to 1.0 (inclusive). | ||||
| lineWidth | JS only | Number | read-only | |
| Description. The line width. | ||||
| strokeStyle | JS only | A color | read-only | |
| Description. The color to use for the lines around shapes. | ||||
Here are the methods defined in the LzDrawView class.
arc(x, y, radius, startAngle, endAngle, clockwise)Draws an arc centered at (x, y) on this LzDrawView, starting from startAngle and ending at endAngle. The radius argument specifies the radius in pixels and the clockwise argument is a boolean that indicates whether or not the arc is drawn clockwise.
beginPath()
Resets the list of subpaths and move to the coordinate (0, 0).
clear()
Clears the drawing area.
closePath()
Draws a line from the current position to the first point in the last subpath and marks the subpath as closed if it has not been so. If there is only one point in the last path, this method does nothing.
createLinearGradient(x0, y0, x1, y1)Creates a gradient from (x0, y0) to (x1, y1) in the coordinate space and returns a linear CanvasGradient object initialized with that line.
createRadialGradient(x0, y0, r0, x1, y1, r1)Creates a radial gradient from (x0, y0) and rotation r0 to (x1, y1) and rotation r1. The return value is an LzCanvasGradient object.
fill(m)Fills each subpath of the current path using the current fillstyle and nonzero winding number rule. When an open subpath is filled, it also becomes closed.
lineTo(x, y)Draws a line from the current position to the specified coordinate (x, y) and adds (x, y) to the list of points of the subpath.
moveTo(x, y)Move the current position to the specified (x, y) coordinate.
oval(x, y, radius, yRadius)Draws an oval at the origin (x, y) with a radius radius. If the yRadius argument is not present, it is translated as the same as xRadius, and the result will be a circle.
quadraticCurveTo(cpx, cpy, x, y)Draws a quadratic curve with the control point (cpx, cpy) and sets the current position to (x, y).
rect(x, y, width, height, cornerRadius)Draws a rectangle with (x, y) as the top left corner with the width of width and height of height. The corner radius is specified by cornerRadius.
stroke()
Strokes each subpath of the current path using the strokeStyle and lineWidth attributes.
Of special interest are the moveTo and stroke methods. An LzDrawView object employs an internal digital pen to draw. You use the moveTo method to move this pen to a position that will become the origin of the shape you are drawing. To actually draw a visible shape, you have to call the stroke method at the end of your drawing.
The next sections discuss how to use the methods in the LzDrawView class to draw various shapes.