CanvasDrawing Class
yui3/src/graphics/js/CanvasDrawing.js:24
<a href="http://www.w3.org/TR/html5/the-canvas-element.html">Canvas</a> implementation of the <a href="Drawing.html">Drawing</a> class.
CanvasDrawing is not intended to be used directly. Instead, use the <a href="Drawing.html">Drawing</a> class.
If the browser lacks <a href="http://www.w3.org/TR/SVG/">SVG</a> capabilities but has
<a href="http://www.w3.org/TR/html5/the-canvas-element.html">Canvas</a> capabilities, the <a href="Drawing.html">Drawing</a>
class will point to the CanvasDrawing class.
Index
Methods
- _clearAndUpdateCoords
- _createGraphic
- _curveTo
- _getLinearGradient
- _getRadialGradient
- _initProps
- _lineTo
- _moveTo
- _quadraticCurveTo
- _setCurveBoundingBox
- _toRGB
- _toRGBA
- _trackSize
- _updateCoords
- _updateDrawingQueue
- _updateNodePosition
- clear
- closePath
- curveTo
- drawCircle
- drawDiamond
- drawEllipse
- drawRect
- drawRect
- drawWedge
- end
- getBezierData
- lineTo
- moveTo
- quadraticCurveTo
- relativeCurveTo
- relativeLineTo
- relativeMoveTo
- relativeQuadraticCurveTo
- setSize
Properties
Methods
_clearAndUpdateCoords
()
private
Clears the coordinate arrays. Called at the end of a drawing operation.
_createGraphic
()
private
Creates canvas element
Returns:
HTMLCanvasElement
_curveTo
-
args -
relative
Implements curveTo methods.
Parameters:
-
argsArrayThe arguments to be used.
-
relativeBooleanIndicates whether or not to use relative coordinates.
_getLinearGradient
()
private
Returns a linear gradient fill
Returns:
CanvasGradient
_getRadialGradient
()
private
Returns a radial gradient fill
Returns:
CanvasGradient
_initProps
()
private
Clears all values
_lineTo
-
args -
relative
Implements lineTo methods.
Parameters:
-
argsArrayThe arguments to be used.
-
relativeBooleanIndicates whether or not to use relative coordinates.
_moveTo
-
args -
relative
Implements moveTo methods.
Parameters:
-
argsArrayThe arguments to be used.
-
relativeBooleanIndicates whether or not to use relative coordinates.
_quadraticCurveTo
-
args -
relative
Implements quadraticCurveTo methods.
Parameters:
-
argsArrayThe arguments to be used.
-
relativeBooleanIndicates whether or not to use relative coordinates.
_setCurveBoundingBox
-
Array -
Number -
Number
Calculates the bounding box for a curve
Parameters:
-
ArrayObjectpts Array containing points for start, end and control points of a curve.
-
NumberObjectw Width used to calculate the number of points to describe the curve.
-
NumberObjecth Height used to calculate the number of points to describe the curve.
_toRGB
-
val
Converts color to rgb format
Parameters:
-
valObjectColor value to convert.
_toRGBA
-
val -
alpha
Parses hex color string and alpha value to rgba
Parameters:
-
valObjectColor value to parse. Can be hex string, rgb or name.
-
alphaNumberNumeric value between 0 and 1 representing the alpha level.
_trackSize
-
w -
h
Updates the size of the graphics object
_updateCoords
-
x -
y
Tracks coordinates. Used to calculate the start point of dashed lines.
_updateDrawingQueue
-
val
Queues up a method to be executed when a shape redraws.
Parameters:
-
valArrayAn array containing data that can be parsed into a method and arguments. The value at zero-index of the array is a string reference of the drawing method that will be called. All subsequent indices are argument for that method. For example,
lineTo(10, 100)would be structured as:["lineTo", 10, 100].
_updateNodePosition
()
private
Moves the shape's dom node.
clear
()
chainable
Clears the graphics object.
closePath
()
chainable
Ends a fill and stroke
curveTo
-
cp1x -
cp1y -
cp2x -
cp2y -
x -
y
Draws a bezier curve.
Parameters:
drawCircle
-
x -
y -
r
Draws a circle. Used internally by CanvasCircle class.
drawDiamond
-
x -
y -
width -
height
Draws a diamond.
drawEllipse
-
x -
y -
w -
h
Draws an ellipse. Used internally by CanvasEllipse class.
drawRect
-
x -
y -
w -
h
Draws a rectangle.
drawRect
-
x -
y -
w -
h -
ew -
eh
Draws a rectangle with rounded corners.
drawWedge
-
x -
y -
startAngle -
arc -
radius -
yRadius
Draws a wedge.
Parameters:
-
xNumberx-coordinate of the wedge's center point
-
yNumbery-coordinate of the wedge's center point
-
startAngleNumberstarting angle in degrees
-
arcNumbersweep of the wedge. Negative values draw clockwise.
-
radiusNumberradius of wedge. If [optional] yRadius is defined, then radius is the x radius.
-
yRadiusNumber[optional] y radius for wedge.
end
()
chainable
Completes a drawing operation.
getBezierData
-
Array -
Number
Returns the points on a curve
Parameters:
-
ArrayObjectpoints Array containing the begin, end and control points of a curve.
-
NumberObjectt The value for incrementing the next set of points.
Returns:
Array
lineTo
-
point1 -
point2
Draws a line segment from the current drawing position to the specified x and y coordinates.
moveTo
-
x -
y
Moves the current drawing position to specified x and y coordinates.
quadraticCurveTo
-
cpx -
cpy -
x -
y
Draws a quadratic bezier curve.
relativeCurveTo
-
cp1x -
cp1y -
cp2x -
cp2y -
x -
y
Draws a bezier curve relative to the current coordinates.
Parameters:
relativeLineTo
-
point1 -
point2
Draws a line segment from the current drawing position to the relative x and y coordinates.
relativeMoveTo
-
x -
y
Moves the current drawing position relative to specified x and y coordinates.
relativeQuadraticCurveTo
-
cpx -
cpy -
x -
y
Draws a quadratic bezier curve relative to the current position.