Class Path

Extends Group, Group.
A Path builder which can be used to draw pretty much any shape. Due to current Canvas path restrictions, a Path's width and height are always equal to the width and height passed into the Path factory function. This is unlike other Groups in where the Groups bounds is calculated based on it's sub content.
Defined in: Path.js.

// A Paths bounds is equal to the bounds passed in.
var path = Path({ x: 10, y: 10, w: 25, h: 30 });
alert(path.getBounds().x == 10 && path.getBounds().w == 25); // alerts true
path.moveBy({ x: 10 });
alert(path.getBounds().x == 20); // alerts true

// Creating a circle.
Path({ fill: "#CCCCCC" }).jumpTo(75, 50)
   .arc(50, 50, 25, 0, 360 * (Math.PI / 180), true)

// Creating a box.
Path({x: 10, y: 10, stroke: "#333333"})
   .lineTo(50, 50)
   .lineTo(50, 90)
   .lineTo(10, 90)
   .lineTo(10, 10)

// Splitting the builder across multiple lines.
var path = Path({x: 10, y: 10, stroke: "#333333"});
path.lineTo(50, 50);
path.lineTo(50, 90);
path.lineTo(10, 90);
path.lineTo(10, 10);

Class Summary
Constructor Attributes	Constructor Name and Description
	Path(_details)

Fields borrowed from class SceneContent:: details

Method Summary
Method Attributes	Method Name and Description
	arc(_x, _y, _start, _end, _clockwise, _clockwise) Dreates an arc (based on a circle) in this path.
	beziTo(_cpx1, _cpy1, _cpx2, _cpy2, _x, _y) Draws a bezier curve from the current position of the path to the given coordinates.
	jumpTo(_x, _y) Moves the next part of this path to the given coordinates.
	lineTo(_x, _y) Draws a line from the current position of the path to the given coordinates.
	quadTo(_cpx, _cpy, _x, _y) Draws a quadratic curve from the current position of the path to the given coordinates.

Methods borrowed from class Group:: addContent, getContent, updateGroup
Methods borrowed from class SceneContent:: draw, extend, getBounds, getName, getParent, getScene, getStage, isActive, isVisible, load, loadBase, moveBy, moveTo, setActive, setSize, setVisible, update, updateBase

Class Detail

Path(_details)

Parameters:

{Object} _details

A JSON Object with these properties.

Property	Required	Default
fill	no	transparent
stroke	no	#000000
stroke_width	no	1

Method Detail

arc(_x, _y, _start, _end, _clockwise, _clockwise)

Dreates an arc (based on a circle) in this path.

Parameters:
_x: The center x coord. of the circle.
_y: The center y coord. of the circle.
_start: The starting angle of this arc in radians.
_end: The ending angle of this arc in radians.
_clockwise: Should this arc go clockwise.
_clockwise

beziTo(_cpx1, _cpy1, _cpx2, _cpy2, _x, _y)

Draws a bezier curve from the current position of the path to the given coordinates.

Parameters:
_cpx1: The control point x1.
_cpy1: The control point y1.
_cpx2: The control point x2.
_cpy2: The control point y2.
_x: The x coord. to draw to.
_y: The y coord. to draw to.

jumpTo(_x, _y)

Moves the next part of this path to the given coordinates. This function does not draw anything.

Parameters:
_x: The x coord. to jump to.
_y: The y coord. to jump to.

lineTo(_x, _y)

Draws a line from the current position of the path to the given coordinates.

Parameters:
_x: The x coord. to draw to.
_y: The y coord. to draw to.

quadTo(_cpx, _cpy, _x, _y)

Draws a quadratic curve from the current position of the path to the given coordinates.

Parameters:
_cpx: The control point x.
_cpy: The control point x.
_x: The x coord. to draw to.
_y: The y coord. to draw to.

Classes

Class Path