Class: drw

drw

A tool for drawing and animating SVG paths

new drw(options){drw}

constructs/svg/drw.js, line 31
Initializes a new drw instance.
Name Type Description
options Object Options used to customize the drw instance
Name Type Default Description
parent * optional SVGElement which to append the drw's path element
id String optional The id of the instance. Auto-generated when not provided
x Number 0 optional Origin of the drw instance along the x-axis
y Number 0 optional Origin of the drw instance along the y-axis
relative Boolean false optional Whether drawing commands use relative vs absolute coordinates
fill String 'transparent' optional The default fill color
stroke String '#000000' optional The default stroke color
strokeWidth Number 1 optional The default stroke width
Returns:
Type Description
drw A new drw instance.

Requires

Members

dString

The drawing command

dasharray*

The stroke-dasharray of the path

dashoffset*

The stroke-dashoffset of the path

readonlyelSVGElement

The path element associated with this instance

fillString

The drw's fill color

readonlyidString

The id of this instance's clippath element

readonlyparentSVGElement

The parent of the path element

relativeBoolean

Whether drawing commands use relative vs absolute coordinates

sliceString

Control how much of the path's stroke is drawn. Space-delimited values define a slice, ie '10 30'. A single value asserts 0 as the starting value. Accepts percentages for relative values

strokeString

The drw's stroke color

strokeWidthNumber

The drw's stroke width

xNumber

The origin of the path along the x-axis

yNumber

The origin of the path along the y-axis

Methods

staticdrw.calculateArc(x, y, rx, ry, start, length, fromCenter, largeArcSweepFlag, sweepFlag){Array}

constructs/svg/drw.js, line 824
Calculate an arc given its center
Name Type Default Description
x Number Origin of the arc along the x-axis
y Number Origin of the arc along the y-axis
rx Number Radius of the arc along the x-axis
ry Number Radius of the arc along the y-axis
start Number Starting point of the arc along the circle in degrees
length Number Length of the arc in degrees from 0-359
fromCenter Boolean true optional Whether the origin is the center of arc or a point along its edge
largeArcSweepFlag * 'auto' optional Large arc sweep flag used in the arc. See Arcs on the MDN for more info.
sweepFlag int 0 optional Sweep flag of the arc along the y-axis. See Arcs on the MDN for more info.
Returns:
Type Description
Array Array of characters representing an arc command

staticdrw.find(path, pattern){Array}

constructs/svg/drw.js, line 872
Searches the given path for each occurrence of the provided command pattern
Name Type Default Description
path String The path to search
pattern String '[A-Za-z]' optional The search pattern.
Returns:
Type Description
Array Array of result objects where each entry contains fields the matched substring(match) and the index of the match within the path(index)

staticdrw.getElInstance(el){drw}

constructs/svg/drw.js, line 927
returns the drw instance associated with the provided element's id attribute
Name Type Description
el Element The element with the lookup id
Returns:
Type Description
drw The associate drw, if it exists

staticdrw.getInstance(id){drw}

constructs/svg/drw.js, line 915
returns the drw instance associated with the id
Name Type Description
id String The lookup id
Returns:
Type Description
drw The associate drw, if it exists

staticdrw.split(path){Array}

constructs/svg/drw.js, line 898
Splits the given path into an array of drawing commands
Name Type Description
path String The path to search
Returns:
Type Description
Array An array of drawing commands.

add(cmd, params){drw}

constructs/svg/drw.js, line 440
add a new drawing command to the path element
Name Type Description
cmd String The command
params * repeatable Parameters for the supplied command
Returns:
Type Description
drw self

addRaw(cmd, params){drw}

constructs/svg/drw.js, line 425
Adds a new drawing command to the path element without enforcing the drawing mode
Name Type Description
cmd String The command
params * repeatable Parameters for the supplied command
Returns:
Type Description
drw self

arc(x, y, r, start, length, fromCenter, largeArcSweepFlag, sweepFlag){drw}

constructs/svg/drw.js, line 594
Draw a circular arc
Name Type Default Description
x Number Origin of the arc along the x-axis
y Number Origin of the arc along the y-axis
r Number Radius of the arc
start Number Starting point of the arc along the circle in degrees
length Number Length of the arc in degrees from 0-359
fromCenter Boolean true optional Whether the origin is the center of arc or a point along its edge
largeArcSweepFlag * 'auto' optional Large arc sweep flag used in the arc. See Arcs on the MDN for more info.
sweepFlag int 0 optional Sweep flag of the arc along the y-axis. See Arcs on the MDN for more info.
Returns:
Type Description
drw self

arc2(x, y, rx, rx, start, length, fromCenter, largeArcSweepFlag, sweepFlag){drw}

constructs/svg/drw.js, line 615
Draw an elliptical arc
Name Type Default Description
x Number Origin of the arc along the x-axis
y Number Origin of the arc along the y-axis
rx Number Radius of the arc along the x-axis
rx Number Radius of the arc along the y-axis
start Number Starting point of the arc along the circle in degrees
length Number Length of the arc in degrees from 0-359
fromCenter Boolean true optional Whether the origin is the center of arc or a point along its edge
largeArcSweepFlag * 'auto' optional Large arc sweep flag used in the arc. See Arcs on the MDN for more info.
sweepFlag int 0 optional Sweep flag of the arc along the y-axis. See Arcs on the MDN for more info.
Returns:
Type Description
drw self

circle(x, y, r, fromCenter){drw}

constructs/svg/drw.js, line 639
draw a circle
Name Type Default Description
x Number Origin of the circle along the x-axis
y Number Origin of the circle along the y-axis
r Number Radius of the circle
fromCenter Boolean true optional Whether the origin is the center of arc or a point along its edge
Returns:
Type Description
drw self

clear(){drw}

constructs/svg/drw.js, line 455
Clears the drawing command except for the origin
Returns:
Type Description
drw self

close(){drw}

constructs/svg/drw.js, line 519
Close the path with a 'Z' command
Returns:
Type Description
drw self

curve(cx1, cy1, cx2, cy2, x, y){drw}

constructs/svg/drw.js, line 532
Draw a cubic bezier curve
Name Type Description
cx1 Number Control point1 along the x-axis
cy1 Number Control point1 along the y-axis
cx2 Number Control point2 along the x-axis
cy2 Number Control point2 along the y-axis
x Number End point along the x-axis
y Number End point along the y-axis
Returns:
Type Description
drw self

curve2(cx, cy, x, y){drw}

constructs/svg/drw.js, line 549
Draw a cubic bezier curve. Invokes the 'S' command to chain cubic bezier curves together
Name Type Description
cx Number Control point along the x-axis
cy Number Control point along the y-axis
x Number End point along the x-axis
y Number End point along the y-axis
Returns:
Type Description
drw self

ellipse(x, y, rx, ry, fromCenter){drw}

constructs/svg/drw.js, line 654
draw a ellipse
Name Type Default Description
x Number Origin of the ellipse along the x-axis
y Number Origin of the ellipse along the y-axis
rx Number Radius of the ellipse along the x-axis
ry Number Radius of the ellipse along the y-axis
fromCenter Boolean true optional Whether the origin is the center of arc or a point along its edge
Returns:
Type Description
drw self

find(pattern){Array}

constructs/svg/drw.js, line 300
Searches the path for the first instance of the specified pattern and returns the results in an array
Name Type Default Description
pattern String 'A-Z' optional The search pattern.
Returns:
Type Description
Array Array of containing the index of the path command, the command header, the full command, and the remaining path in that order.

insert(index, cmd, params){drw}

constructs/svg/drw.js, line 407
Inserts a new drawing command into the path element
Name Type Description
index String Insertion index
cmd String The command
params * repeatable Parameters for the supplied command
Returns:
Type Description
drw self

insertRaw(index, cmd, params){drw}

constructs/svg/drw.js, line 372
Inserts a new drawing command into the path element without enforcing the drawing mode
Name Type Description
index String Insertion index
cmd String The command
params * repeatable Parameters for the supplied command
Returns:
Type Description
drw self

line(x, y){drw}

constructs/svg/drw.js, line 482
Draw a line
Name Type Description
x Number End point of the line along the x-axis
y Number End point of the line along the y-axis
Returns:
Type Description
drw self

lineH(x){drw}

constructs/svg/drw.js, line 495
Draw a horizontal line
Name Type Description
x Number End point of the line along the x-axis
Returns:
Type Description
drw self

lineV(y){drw}

constructs/svg/drw.js, line 507
Draw a vertical line
Name Type Description
y Number End point of the line along the y-axis
Returns:
Type Description
drw self

move(x, y){drw}

constructs/svg/drw.js, line 469
Move the drawing cursor to specific coordinates
Name Type Description
x Number Cursor position along the x-axis
y Number Cursor position along the y-axis
Returns:
Type Description
drw self

polygon(x, y, r, sides, rotation){drw}

constructs/svg/drw.js, line 670
draw a regular polygon
Name Type Default Description
x Number Origin of the polygon along the x-axis
y Number Origin of the polygon along the y-axis
r Number The radius of the polygon
sides int 5 optional The number of sides on the polygon
rotation int 0 optional The rotation of the polygon in degrees
Returns:
Type Description
drw self

qdrtc(cx, cy, x, y){drw}

constructs/svg/drw.js, line 564
Draw a quadratic bezier curve
Name Type Description
cx Number Control point along the x-axis
cy Number Control point along the y-axis
x Number End point along the x-axis
y Number End point along the y-axis
Returns:
Type Description
drw self

qdrtc2(x, y){drw}

constructs/svg/drw.js, line 579
Draw a quadratic bezier curve. Invokes the 'T' command to chain quadratic bezier curves together
Name Type Description
x Number End point along the x-axis
y Number End point along the y-axis
Returns:
Type Description
drw self

rect(x, y, w, h){drw}

constructs/svg/drw.js, line 795
draw a rectangle
Name Type Description
x Number Position of the rectangle along the x-axis
y Number Position of the rectangle along the y-axis
w Number Width of the rectangle
h Number Height of the rectangle
Returns:
Type Description
drw self

setOrigin(x, y){drw}

constructs/svg/drw.js, line 351
Set the origin of the path
Name Type Description
x Number The origin along the x-axis
y Number The origin along the y-axis
Returns:
Type Description
drw self

setRelative(value){drw}

constructs/svg/drw.js, line 325
Set value of the relative property. @see relative
Name Type Description
value Boolean The value to set
Returns:
Type Description
drw self

setSlice(value){drw}

constructs/svg/drw.js, line 338
Chainable method for setting the slice. @see slice
Name Type Description
value String The slice value
Returns:
Type Description
drw self

split(){Array}

constructs/svg/drw.js, line 312
Splits the path into an array of drawing commands
Returns:
Type Description
Array An array of drawing commands.

square(x, y, r, rotation){drw}

constructs/svg/drw.js, line 731
draw a regular square
Name Type Default Description
x Number Origin of the square along the x-axis
y Number Origin of the square along the y-axis
r Number The radius of the square
rotation int 0 optional The rotation of the square in degrees
Returns:
Type Description
drw self

star(x, y, r1, r2, points, rotation){drw}

constructs/svg/drw.js, line 746
draw a regular star
Name Type Default Description
x Number Origin of the star along the x-axis
y Number Origin of the star along the y-axis
r1 Number The inner radius of the star
r2 Number The outer radius of the star
points int 5 optional The number of points on the star
rotation int 0 optional The rotation of the star in degrees
Returns:
Type Description
drw self

triangle(x, y, r, rotation){drw}

constructs/svg/drw.js, line 716
draw a regular triangle
Name Type Default Description
x Number Origin of the triangle along the x-axis
y Number Origin of the triangle along the y-axis
r Number The radius of the triangle
rotation int 0 optional The rotation of the triangle in degrees
Returns:
Type Description
drw self