The Path class creates a shape through the use of drawing methods. The Path class has the following drawing methods available:
Like other shapes, Path elements are created using the addShape
method of the Graphic class. The method's cfg argument contains a type attribute.
Assigning "path" or Y.Path to this attribute will create a Path instance. After instantiation, a series of drawing
operations must be performed in order to render a shape. The below code instantiates a path element by defining the
type attribute as "path":
var myPath = myGraphic.addShape({
type: "path",
fill: {
color: "#9aa"
},
stroke: {
weight: 1,
color: "#000"
}
});Below a Path element with the same properties is instantiated by defining the type attribute with a class reference:
var myPath = myGraphic.addShape({
type: Y.Path,
fill: {
color: "#9aa"
},
stroke: {
weight: 1,
color: "#000"
}
});After instantiation, a shape or segment needs to be drawn for an element to render. After all draw operations are performed,
the end method will render the shape. The code below will draw a triangle:
myPath.moveTo(35, 5);
myPath.lineTo(65, 65);
myPath.lineTo(5, 65);
myPath.lineTo(35, 5);
myPath.end();Path has the following implementations based on browser capability.
Path will point to the appropriate implemention.
PathaddClassclassName
Add a class name to each node.
className
String
the class name to add to the node's class attribute
clearClears the path.
closePathEnds a fill and stroke
compareTorefNode
Compares nodes to determine if they match. Node instances can be compared to each other and/or HTMLElements.
refNode
HTMLElement | Node
The reference node to compare to the node.
True if the nodes match, false if they do not.
containsneedle
Determines whether the node is an ancestor of another HTML element in the DOM hierarchy.
needle
Shape | HTMLElement
The possible node or descendent
Boolean Whether or not this shape is the needle or its ancestor.
curveTocp1x
cp1y
cp2x
cp2y
x
y
Draws a bezier curve.
destroyDestroys the instance.
drawCirclex
y
r
Draws a circle.
drawDiamondx
y
width
height
Draws a diamond.
drawEllipsex
y
w
h
Draws an ellipse.
drawRectx
y
w
h
Draws a rectangle.
drawRoundRectx
y
w
h
ew
eh
Draws a rectangle with rounded corners.
drawWedgex
y
startAngle
arc
radius
yRadius
Draws a wedge.
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.
endCompletes a drawing operation.
getBoundsReturns the bounds for a shape.
Calculates the a new bounding box from the original corner coordinates (base on size and position) and the transform matrix. The calculated bounding box is used by the graphic instance to calculate its viewBox.
Object
getXYGets the current position of the node in page coordinates.
Array The XY position of the shape.
initInit method, invoked during construction.
Calls initializer method.
initializerInitializes the shape
lineTopoint1
point2
Draws a line segment using the current line style from the current drawing position to the specified x and y coordinates.
moveTox
y
Moves the current drawing position to specified x and y coordinates.
quadraticCurveTocpx
cpy
x
y
Draws a quadratic bezier curve.
relativeLineTopoint1
point2
Draws a line segment using the current line style from the current drawing position to the relative x and y coordinates.
relativeMoveTox
y
Moves the current drawing position relative to specified x and y coordinates.
removeClassclassName
Removes a class name from each node.
className
String
the class name to remove from the node's class attribute
rotatedeg
Rotates the shape clockwise around it transformOrigin.
deg
Number
The degree of the rotation.
setname
value
Sets the value of an attribute.
setXYContains
Set the position of the shape in page coordinates, regardless of how the node is positioned.
Contains
Array
x & y values for new position (coordinates are page-based)
skewx
y
Skews the shape around the x-axis and y-axis.
testselector
Test if the supplied node matches the supplied selector.
selector
String
The CSS selector to test against.
Boolean Wheter or not the shape matches the selector.
translatex
y
Specifies a 2d translation.
translateXx
Translates the shape along the x-axis. When translating x and y coordinates,
use the translate method.
x
Number
The value to translate.
translateYy
Translates the shape along the y-axis. When translating x and y coordinates,
use the translate method.
y
Number
The value to translate.
dataRepresents an SVG Path string. This will be parsed and added to shape's API to represent the SVG data across all implementations. Note that when using VML or SVG implementations, part of this content will be added to the DOM using respective VML/SVG attributes. If your content comes from an untrusted source, you will need to ensure that no malicious code is included in that content.
fillContains information about the fill of the shape.
If a linear or radial is specified as the fill type. The following additional property is used:
Linear gradients also have the following property:
Radial gradients have the following additional properties:
The x-coordinate of the center of the gradient circle. Determines where the color stop begins. The default value 0.5.
Note: Currently, this property is not implemented for corresponding CanvasShape and
VMLShape classes which are used on Android or IE 6 - 8.
The y-coordinate of the center of the gradient circle. Determines where the color stop begins. The default value 0.5.
Note: Currently, this property is not implemented for corresponding CanvasShape and VMLShape
classes which are used on Android or IE 6 - 8.
strokeContains information about the stroke of the shape.
transformA string containing, in order, transform operations applied to the shape instance. The transform string can contain the following values:
Applying transforms through the transform attribute will reset the transform matrix and apply a new transform. The shape class also contains
corresponding methods for each transform that will apply the transform to the current matrix. The below code illustrates how you might use the
transform attribute to instantiate a recangle with a rotation of 45 degrees.
The code below would apply translate and rotate to an existing shape.
myRect.set("transform", "translate(40, 50) rotate(45)");transformOriginAn array of x, y values which indicates the transformOrigin in which to rotate the shape. Valid values range between 0 and 1 representing a fraction of the shape's corresponding bounding box dimension. The default value is [0.5, 0.5].