Show:
Uses:
Extends: Shape
Module: graphics

<p>The Path class creates a shape through the use of drawing methods. The Path class has the following drawing methods available:</p> <ul> <li><a href="#method_clear">clear</a></li> <li><a href="#method_curveTo">curveTo</a></li> <li><a href="#method_drawRect">drawRect</a></li> <li><a href="#method_drawRoundRect">drawRoundRect</a></li> <li><a href="#method_end">end</a></li> <li><a href="#method_lineTo">lineTo</a></li> <li><a href="#method_moveTo">moveTo</a></li> <li><a href="#method_quadraticCurveTo">quadraticCurveTo</a></li> </ul>

<p>Like other shapes, Path elements are created using the <a href="Graphic.html#method_addShape">addShape</a> method of the <a href="Graphic.html">Graphic</a> 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":</p>

   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 <a href="#method_end">end</a> 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();
                            

<p>Path has the following implementations based on browser capability. <ul> <li><a href="SVGPath.html">SVGPath</a></li> <li><a href="VMLPath.html">VMLPath</a></li> <li><a href="CanvasPath.html">CanvasPath</a></li> </ul> It is not necessary to interact with these classes directly. Path will point to the appropriate implemention.</p>

Constructor

Methods

addClass

(
  • className
)

<p>Add a class name to each node.</p>

Parameters:

  • className String

    <p><p><p><p>the class name to add to the node's class attribute</p></p></p></p>

clear

() chainable

<p>Clears the path.</p>

closePath

() chainable

<p>Ends a fill and stroke</p>

compareTo

(
  • refNode
)
Boolean

<p>Compares nodes to determine if they match. Node instances can be compared to each other and/or HTMLElements.</p>

Parameters:

  • refNode HTMLElement | Node

    <p><p><p><p>The reference node to compare to the node.</p></p></p></p>

Returns:

Boolean:

<p><p><p><p>True if the nodes match, false if they do not.</p></p></p></p>

contains

(
  • needle
)

<p>Determines whether the node is an ancestor of another HTML element in the DOM hierarchy.</p>

Parameters:

  • needle Shape | HTMLElement

    <p><p><p><p>The possible node or descendent</p></p></p></p>

Returns:

<p><p><p><p>Boolean Whether or not this shape is the needle or its ancestor.</p></p></p></p>

curveTo

(
  • cp1x
  • cp1y
  • cp2x
  • cp2y
  • x
  • y
)
chainable

<p>Draws a bezier curve.</p>

Parameters:

  • cp1x Number

    <p>x-coordinate for the first control point.</p>

  • cp1y Number

    <p>y-coordinate for the first control point.</p>

  • cp2x Number

    <p>x-coordinate for the second control point.</p>

  • cp2y Number

    <p>y-coordinate for the second control point.</p>

  • x Number

    <p>x-coordinate for the end point.</p>

  • y Number

    <p>y-coordinate for the end point.</p>

destroy

()

<p>Destroys the instance.</p>

drawCircle

(
  • x
  • y
  • r
)
protected chainable

<p>Draws a circle.</p>

Parameters:

drawDiamond

(
  • x
  • y
  • width
  • height
)
protected chainable

<p>Draws a diamond.</p>

Parameters:

drawEllipse

(
  • x
  • y
  • w
  • h
)
protected chainable

<p>Draws an ellipse.</p>

Parameters:

drawRect

(
  • x
  • y
  • w
  • h
)
chainable

<p>Draws a rectangle.</p>

Parameters:

drawRoundRect

(
  • x
  • y
  • w
  • h
  • ew
  • eh
)
chainable

<p>Draws a rectangle with rounded corners.</p>

Parameters:

  • x Number

    <p>x-coordinate</p>

  • y Number

    <p>y-coordinate</p>

  • w Number

    <p>width</p>

  • h Number

    <p>height</p>

  • ew Number

    <p>width of the ellipse used to draw the rounded corners</p>

  • eh Number

    <p>height of the ellipse used to draw the rounded corners</p>

drawWedge

(
  • x
  • y
  • startAngle
  • arc
  • radius
  • yRadius
)
private chainable

<p>Draws a wedge.</p>

Parameters:

  • x Number

    <p>x-coordinate of the wedge's center point</p>

  • y Number

    <p>y-coordinate of the wedge's center point</p>

  • startAngle Number

    <p>starting angle in degrees</p>

  • arc Number

    <p>sweep of the wedge. Negative values draw clockwise.</p>

  • radius Number

    <p>radius of wedge. If [optional] yRadius is defined, then radius is the x radius.</p>

  • yRadius Number

    <p>[optional] y radius for wedge.</p>

end

() chainable

<p>Completes a drawing operation.</p>

getBounds

()

<p>Returns the bounds for a shape.</p> <p>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.</p>

Returns:

<p><p><p><p>Object</p></p></p></p>

getXY

()

<p>Gets the current position of the node in page coordinates.</p>

Returns:

<p><p><p><p>Array The XY position of the shape.</p></p></p></p>

init

() protected

<p>Init method, invoked during construction. Calls <code>initializer</code> method.</p>

initializer

() private

<p>Initializes the shape</p>

lineTo

(
  • point1
  • point2
)
chainable

<p>Draws a line segment using the current line style from the current drawing position to the specified x and y coordinates.</p>

Parameters:

  • point1 Number

    <p>x-coordinate for the end point.</p>

  • point2 Number

    <p>y-coordinate for the end point.</p>

moveTo

(
  • x
  • y
)
chainable

<p>Moves the current drawing position to specified x and y coordinates.</p>

Parameters:

  • x Number

    <p>x-coordinate for the end point.</p>

  • y Number

    <p>y-coordinate for the end point.</p>

quadraticCurveTo

(
  • cpx
  • cpy
  • x
  • y
)
chainable

<p>Draws a quadratic bezier curve.</p>

Parameters:

  • cpx Number

    <p>x-coordinate for the control point.</p>

  • cpy Number

    <p>y-coordinate for the control point.</p>

  • x Number

    <p>x-coordinate for the end point.</p>

  • y Number

    <p>y-coordinate for the end point.</p>

relativeLineTo

(
  • point1
  • point2
)
chainable

<p>Draws a line segment using the current line style from the current drawing position to the relative x and y coordinates.</p>

Parameters:

  • point1 Number

    <p>x-coordinate for the end point.</p>

  • point2 Number

    <p>y-coordinate for the end point.</p>

relativeMoveTo

(
  • x
  • y
)
chainable

<p>Moves the current drawing position relative to specified x and y coordinates.</p>

Parameters:

  • x Number

    <p>x-coordinate for the end point.</p>

  • y Number

    <p>y-coordinate for the end point.</p>

removeClass

(
  • className
)

<p>Removes a class name from each node.</p>

Parameters:

  • className String

    <p><p><p><p>the class name to remove from the node's class attribute</p></p></p></p>

rotate

(
  • deg
)

<p>Rotates the shape clockwise around it transformOrigin.</p>

Parameters:

  • deg Number

    <p><p><p><p>The degree of the rotation.</p></p></p></p>

scale

(
  • val
)

<p>Specifies a 2d scaling operation.</p>

Parameters:

set

(
  • name
  • value
)

<p>Sets the value of an attribute.</p>

Parameters:

  • name String | Object

    <p><p><p><p>The name of the attribute. Alternatively, an object of key value pairs can be passed in to set multiple attributes at once.</p></p></p></p>

  • value Any

    <p><p><p><p>The value to set the attribute to. This value is ignored if an object is received as the name param.</p></p></p></p>

setXY

(
  • Contains
)

<p>Set the position of the shape in page coordinates, regardless of how the node is positioned.</p>

Parameters:

  • Contains Array

    <p><p><p><p>x & y values for new position (coordinates are page-based)</p></p></p></p>

skew

(
  • x
  • y
)

<p>Skews the shape around the x-axis and y-axis.</p>

Parameters:

  • x Number

    <p><p><p><p>The value to skew on the x-axis.</p></p></p></p>

  • y Number

    <p><p><p><p>The value to skew on the y-axis.</p></p></p></p>

skewX

(
  • x
)

<p>Skews the shape around the x-axis.</p>

Parameters:

  • x Number

    <p><p><p><p>x-coordinate</p></p></p></p>

skewY

(
  • y
)

<p>Skews the shape around the y-axis.</p>

Parameters:

  • y Number

    <p><p><p><p>y-coordinate</p></p></p></p>

test

(
  • selector
)

<p>Test if the supplied node matches the supplied selector.</p>

Parameters:

  • selector String

    <p><p><p><p>The CSS selector to test against.</p></p></p></p>

Returns:

<p><p><p><p>Boolean Wheter or not the shape matches the selector.</p></p></p></p>

translate

(
  • x
  • y
)

<p>Specifies a 2d translation.</p>

Parameters:

  • x Number

    <p><p><p><p>The value to transate on the x-axis.</p></p></p></p>

  • y Number

    <p><p><p><p>The value to translate on the y-axis.</p></p></p></p>

translateX

(
  • x
)

<p>Translates the shape along the x-axis. When translating x and y coordinates, use the <code>translate</code> method.</p>

Parameters:

  • x Number

    <p><p><p><p>The value to translate.</p></p></p></p>

translateY

(
  • y
)

<p>Translates the shape along the y-axis. When translating x and y coordinates, use the <code>translate</code> method.</p>

Parameters:

  • y Number

    <p><p><p><p>The value to translate.</p></p></p></p>

Attributes

data

String

<p>Represents 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.</p>

fill

Object

<p>Contains information about the fill of the shape. <dl> <dt>color</dt><dd>The color of the fill.</dd> <dt>opacity</dt><dd>Number between 0 and 1 that indicates the opacity of the fill. The default value is 1.</dd> <dt>type</dt><dd>Type of fill. <dl> <dt>solid</dt><dd>Solid single color fill. (default)</dd> <dt>linear</dt><dd>Linear gradient fill.</dd> <dt>radial</dt><dd>Radial gradient fill.</dd> </dl> </dd> </dl> <p>If a <code>linear</code> or <code>radial</code> is specified as the fill type. The following additional property is used: <dl> <dt>stops</dt><dd>An array of objects containing the following properties: <dl> <dt>color</dt><dd>The color of the stop.</dd> <dt>opacity</dt><dd>Number between 0 and 1 that indicates the opacity of the stop. The default value is 1. Note: No effect for IE 6 - 8</dd> <dt>offset</dt><dd>Number between 0 and 1 indicating where the color stop is positioned.</dd> </dl> </dd> <p>Linear gradients also have the following property:</p> <dt>rotation</dt><dd>Linear gradients flow left to right by default. The rotation property allows you to change the flow by rotation. (e.g. A rotation of 180 would make the gradient pain from right to left.)</dd> <p>Radial gradients have the following additional properties:</p> <dt>r</dt><dd>Radius of the gradient circle.</dd> <dt>fx</dt><dd>Focal point x-coordinate of the gradient.</dd> <dt>fy</dt><dd>Focal point y-coordinate of the gradient.</dd> <dt>cx</dt><dd> <p>The x-coordinate of the center of the gradient circle. Determines where the color stop begins. The default value 0.5.</p> <p><strong>Note: </strong>Currently, this property is not implemented for corresponding <code>CanvasShape</code> and <code>VMLShape</code> classes which are used on Android or IE 6 - 8.</p> </dd> <dt>cy</dt><dd> <p>The y-coordinate of the center of the gradient circle. Determines where the color stop begins. The default value 0.5.</p> <p><strong>Note: </strong>Currently, this property is not implemented for corresponding <code>CanvasShape</code> and <code>VMLShape</code> classes which are used on Android or IE 6 - 8.</p> </dd> </dl></p>

graphic

Graphic readonly

<p>Reference to the parent graphic instance</p>

height

Number

<p>Indicates the height of the shape</p>

id

String

<p>Unique id for class instance.</p>

node

HTMLElement readonly

<p>Dom node for the shape.</p>

path

String readonly

Indicates the path used for the node.

stroke

Object

<p>Contains information about the stroke of the shape. <dl> <dt>color</dt><dd>The color of the stroke.</dd> <dt>weight</dt><dd>Number that indicates the width of the stroke.</dd> <dt>opacity</dt><dd>Number between 0 and 1 that indicates the opacity of the stroke. The default value is 1.</dd> <dt>dashstyle</dt>Indicates whether to draw a dashed stroke. When set to "none", a solid stroke is drawn. When set to an array, the first index indicates the length of the dash. The second index indicates the length of gap. <dt>linecap</dt><dd>Specifies the linecap for the stroke. The following values can be specified: <dl> <dt>butt (default)</dt><dd>Specifies a butt linecap.</dd> <dt>square</dt><dd>Specifies a sqare linecap.</dd> <dt>round</dt><dd>Specifies a round linecap.</dd> </dl> </dd> <dt>linejoin</dt><dd>Specifies a linejoin for the stroke. The following values can be specified: <dl> <dt>round (default)</dt><dd>Specifies that the linejoin will be round.</dd> <dt>bevel</dt><dd>Specifies a bevel for the linejoin.</dd> <dt>miter limit</dt><dd>An integer specifying the miter limit of a miter linejoin. If you want to specify a linejoin of miter, you simply specify the limit as opposed to having separate miter and miter limit values.</dd> </dl> </dd> </dl></p>

transform

String

<p><p>A string containing, in order, transform operations applied to the shape instance. The <code>transform</code> string can contain the following values:</p> <p><dl> <dt>rotate</dt><dd>Rotates the shape clockwise around it transformOrigin.</dd> <dt>translate</dt><dd>Specifies a 2d translation.</dd> <dt>skew</dt><dd>Skews the shape around the x-axis and y-axis.</dd> <dt>scale</dt><dd>Specifies a 2d scaling operation.</dd> <dt>translateX</dt><dd>Translates the shape along the x-axis.</dd> <dt>translateY</dt><dd>Translates the shape along the y-axis.</dd> <dt>skewX</dt><dd>Skews the shape around the x-axis.</dd> <dt>skewY</dt><dd>Skews the shape around the y-axis.</dd> <dt>matrix</dt><dd>Specifies a 2D transformation matrix comprised of the specified six values.</dd> </dl> </p> <p>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 <code>transform</code> attribute to instantiate a recangle with a rotation of 45 degrees.</p> var myRect = new Y.Rect({ type:"rect", width: 50, height: 40, transform: "rotate(45)" }; <p>The code below would apply <code>translate</code> and <code>rotate</code> to an existing shape.</p></p> <pre><code> myRect.set("transform", "translate(40, 50) rotate(45)");</code></pre>

transformOrigin

Array

<p>An 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].</p>

visible

Boolean

<p>Indicates whether the shape is visible.</p>

width

Number

<p>Indicates the width of the shape</p>

x

Number

<p>Indicates the x position of shape.</p>

y

Number

<p>Indicates the y position of shape.</p>