Class Graphic
- Known Subclasses:
-
Shape
Graphic is a simple drawing api that allows for basic drawing operations.
Properties
Indicates whether or not the instance will size itself based on its contents.
Methods
private
void
_clearPath
(
)
Clears path properties
private
_createGraphicNode
(
type
,
pe
)
Creates a graphic node
- Parameters:
-
type
<String>
node type to create
-
pe
<String>
specified pointer-events value
- Returns:
- HTMLElement
private
void
_createGraphics
(
)
Creates a group element
private
void
_draw
(
)
Completes a shape
private
void
_getFill
(
)
Returns ths actual fill object to be used in a drawing or shape
private
void
_getLinearGradient
(
type
)
Returns a linear gradient fill
- Parameters:
-
type
<String>
gradient type
private
_getWedgePath
(
config
)
Generates a path string for a wedge shape
- Parameters:
-
config
<Object>
attributes used to create the path
- Returns:
- String
private
void
_initProps
(
)
Clears the properties
private
void
_removeChildren
(
node
)
Removes all child nodes.
- Parameters:
-
node
<HTMLElement>
private
void
_styleGroup
(
)
Styles a group element
private
void
_toggleVisible
(
node
,
val
)
Toggles visibility
- Parameters:
-
node
<HTMLElement>
element to toggle
-
val
<Boolean>
indicates visibilitye
private
void
_trackSize
(
w
,
h
)
Updates the size of the graphics object
- Parameters:
-
w
<Number>
width
-
h
<Number>
height
void
beginBitmapFill
(
config
)
Specifies a bitmap fill used by subsequent calls to other drawing methods.
- Parameters:
-
config
<Object>
void
beginFill
(
color
,
alpha
)
Specifes a solid fill used by subsequent calls to other drawing methods.
- Parameters:
-
color
<String>
Hex color value for the fill.
-
alpha
<Number>
Value between 0 and 1 used to specify the opacity of the fill.
void
beginGradientFill
(
config
)
Specifies a gradient fill used by subsequent calls to other drawing methods.
- Parameters:
-
config
<Object>
void
clear
(
)
Clears the graphics object.
void
curveTo
(
cp1x
,
cp1y
,
cp2x
,
cp2y
,
x
,
y
)
Draws a bezier curve.
- Parameters:
-
cp1x
<Number>
x-coordinate for the first control point.
-
cp1y
<Number>
y-coordinate for the first control point.
-
cp2x
<Number>
x-coordinate for the second control point.
-
cp2y
<Number>
y-coordinate for the second control point.
-
x
<Number>
x-coordinate for the end point.
-
y
<Number>
y-coordinate for the end point.
void
destroy
(
)
Removes all nodes.
void
drawCircle
(
x
,
y
,
r
)
Draws a circle.
- Parameters:
-
x
<Number>
y-coordinate
-
y
<Number>
x-coordinate
-
r
<Number>
radius
void
drawEllipse
(
x
,
y
,
w
,
h
)
Draws an ellipse.
- Parameters:
-
x
<Number>
x-coordinate
-
y
<Number>
y-coordinate
-
w
<Number>
width
-
h
<Number>
height
void
drawRect
(
x
,
y
,
w
,
h
)
Draws a rectangle.
- Parameters:
-
x
<Number>
x-coordinate
-
y
<Number>
y-coordinate
-
w
<Number>
width
-
h
<Number>
height
void
drawWedge
(
x
,
y
,
startAngle
,
arc
,
radius
,
yRadius
)
Draws a wedge.
- Parameters:
-
x
<Number>
x-coordinate of the wedge's center point
-
y
<Number>
y-coordinate of the wedge's center point
-
startAngle
<Number>
starting angle in degrees
-
arc
<Number>
sweep of the wedge. Negative values draw clockwise.
-
radius
<Number>
radius of wedge. If [optional] yRadius is defined, then radius is the x radius.
-
yRadius
<Number>
[optional] y radius for wedge.
void
end
(
)
Completes a drawing operation.
getShape
(
config
)
Creates a Shape instance and adds it to the graphics object.
- Parameters:
-
config
<Object>
Object literal of properties used to construct a Shape.
- Returns:
- Shape
private
void
initializer
(
)
Initializes the class.
private
void
lineGradientStyle
(
)
Specifies a gradient to use for the stroke when drawing lines.
Not implemented
void
lineStyle
(
thickness
,
color
,
alpha
)
Specifies a line style used for subsequent calls to drawing methods.
- Parameters:
-
thickness
<Number>
indicates the thickness of the line
-
color
<String>
hex color value for the line
-
alpha
<Number>
Value between 0 and 1 used to specify the opacity of the fill.
void
lineTo
(
point1
,
point2
)
Draws a line segment using the current line style from the current drawing position to the specified x and y coordinates.
- Parameters:
-
point1
<Number>
x-coordinate for the end point.
-
point2
<Number>
y-coordinate for the end point.
void
moveTo
(
x
,
y
)
Moves the current drawing position to specified x and y coordinates.
- Parameters:
-
x
<Number>
x-coordinate for the end point.
-
y
<Number>
y-coordinate for the end point.
void
quadraticCurveTo
(
cpx
,
cpy
,
x
,
y
)
Draws a quadratic bezier curve.
- Parameters:
-
cpx
<Number>
x-coordinate for the control point.
-
cpy
<Number>
y-coordinate for the control point.
-
x
<Number>
x-coordinate for the end point.
-
y
<Number>
y-coordinate for the end point.
void
render
(
parentNode
)
Adds the graphics node to the dom.
- Parameters:
-
parentNode
<HTMLElement>
node in which to render the graphics node into.
void
setPosition
(
x
,
y
)
Sets the positon of the graphics object.
- Parameters:
-
x
<Number>
x-coordinate for the object.
-
y
<Number>
y-coordinate for the object.
void
setSize
(
w
,
h
)
Sets the size of the graphics object.
- Parameters:
-
w
<Number>
width to set for the instance.
-
h
<Number>
height to set for the instance.
void
toggleVisible
(
val
)
Shows and and hides a the graphic instance.
- Parameters:
-
val
<Boolean>
indicates whether the instance should be visible.