Ellipse Class
+ + + + +Creates an ellipse shape with editable attributes.
+ +Ellipse instances can be created using the addShape method of the
+Graphic class. The method's cfg argument contains a type attribute. Assigning "ellipse"
+or Y.Ellipse to this attribute will create a Ellipse instance. Required attributes for instantiating a Ellipse are
+type, width and height. Optional attributes include:
+
type attribute as "ellipse":
+
+ var myEllipse = myGraphic.addShape({
+ type: "ellipse",
+ width: 20,
+ height: 10,
+ fill: {
+ color: "#9aa"
+ },
+ stroke: {
+ weight: 1,
+ color: "#000"
+ }
+ });
+Below, the same ellipse is created by defining the type attribute with a class reference:
var myEllipse = myGraphic.addShape({
+ type: Y.Ellipse,
+ width: 20,
+ height: 10,
+ fill: {
+ color: "#9aa"
+ },
+ stroke: {
+ weight: 1,
+ color: "#000"
+ }
+ });
+Ellipse has the following implementations based on browser capability.
+
-
+
SVGEllipse
+ VMLEllipse
+ CanvasEllipse
+
Ellipse will point to the appropriate implemention.
+Constructor
+Ellipse
+
+
+ ()
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ -
+
- Index + + +
- Methods + + + +
- Attributes + + +
Item Index
+ + +Methods
+ +-
+
+
- + addClass + + + + + +
- + compareTo + + + + + +
- + contains + + + + + +
- + destroy + + + + + +
- + getBounds + + + + + +
- + getXY + + + + + +
- + init + + + + + +
- + initializer + + + + + +
- + removeClass + + + + + +
- + rotate + + + + + +
- + scale + + + + + +
- + set + + + + + +
- + setXY + + + + + +
- + skew + + + + + +
- + skewX + + + + + +
- + skewY + + + + + +
- + test + + + + + +
- + translate + + + + + +
- + translateX + + + + + +
- + translateY + + + + + +
Methods
+ + +addClass
+
+
+ -
+
+
-
+
+
className+ +
+
+
Add a class name to each node.
+Parameters:
+ +-
+
+
-
+
+
className+ String + + + + +++ + +the class name to add to the node's class attribute
+
+
+
compareTo
+
+
+ -
+
+
-
+
+
refNode+ +
+
+
Compares nodes to determine if they match. +Node instances can be compared to each other and/or HTMLElements.
+Parameters:
+ +-
+
+
-
+
+
refNode+ HTMLElement | Node + + + + +++ + +The reference node to compare to the node.
+
+
+
Returns:
+ +contains
+
+
+ -
+
+
-
+
+
needle+ +
+
+
Determines whether the node is an ancestor of another HTML element in the DOM hierarchy.
+Parameters:
+ +-
+
+
-
+
+
needle+ Shape | HTMLElement + + + + +++ + +The possible node or descendent
+
+
+
Returns:
+ +destroy
+
+
+ ()
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Destroys the instance.
+getBounds
+
+
+ ()
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns 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.
+Returns:
+ +getXY
+
+
+ ()
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Gets the current position of the node in page coordinates.
+Returns:
+ +init
+
+
+ ()
+
+
+
+
+
+
+
+ protected
+
+
+
+
+
+
+
+
+
+
+
+
+ Init method, invoked during construction.
+Calls initializer method.
initializer
+
+
+ ()
+
+
+
+
+
+
+
+ private
+
+
+
+
+
+
+
+
+
+
+
+
+ Initializes the shape
+removeClass
+
+
+ -
+
+
-
+
+
className+ +
+
+
Removes a class name from each node.
+Parameters:
+ +-
+
+
-
+
+
className+ String + + + + +++ + +the class name to remove from the node's class attribute
+
+
+
rotate
+
+
+ -
+
+
-
+
+
deg+ +
+
+
Rotates the shape clockwise around it transformOrigin.
+Parameters:
+ +-
+
+
-
+
+
deg+ Number + + + + +++ + +The degree of the rotation.
+
+
+
scale
+
+
+ -
+
+
-
+
+
val+ +
+
+
Specifies a 2d scaling operation.
+Parameters:
+ +-
+
+
-
+
+
val+ Number + + + + ++ ++ + +
+
+
set
+
+
+ -
+
+
-
+
+
name+ +
+
+ -
+
+
value+ +
+
+
Sets the value of an attribute.
+Parameters:
+ +-
+
+
-
+
+
name+ String | Object + + + + +++ + +The name of the attribute. Alternatively, an object of key value pairs can +be passed in to set multiple attributes at once.
+
+
+ -
+
+
value+ Any + + + + +++ + +The value to set the attribute to. This value is ignored if an object is received as +the name param.
+
+
+
setXY
+
+
+ -
+
+
-
+
+
Contains+ +
+
+
Set the position of the shape in page coordinates, regardless of how the node is positioned.
+Parameters:
+ +-
+
+
-
+
+
Contains+ Array + + + + +++ + +x & y values for new position (coordinates are page-based)
+
+
+
skew
+
+
+ -
+
+
-
+
+
x+ +
+
+ -
+
+
y+ +
+
+
Skews the shape around the x-axis and y-axis.
+skewX
+
+
+ -
+
+
-
+
+
x+ +
+
+
Skews the shape around the x-axis.
+Parameters:
+ +-
+
+
-
+
+
x+ Number + + + + +++ + +x-coordinate
+
+
+
skewY
+
+
+ -
+
+
-
+
+
y+ +
+
+
Skews the shape around the y-axis.
+Parameters:
+ +-
+
+
-
+
+
y+ Number + + + + +++ + +y-coordinate
+
+
+
test
+
+
+ -
+
+
-
+
+
selector+ +
+
+
Test if the supplied node matches the supplied selector.
+Parameters:
+ +-
+
+
-
+
+
selector+ String + + + + +++ + +The CSS selector to test against.
+
+
+
Returns:
+ +translate
+
+
+ -
+
+
-
+
+
x+ +
+
+ -
+
+
y+ +
+
+
Specifies a 2d translation.
+translateX
+
+
+ -
+
+
-
+
+
x+ +
+
+
Translates the shape along the x-axis. When translating x and y coordinates,
+use the translate method.
Parameters:
+ +-
+
+
-
+
+
x+ Number + + + + +++ + +The value to translate.
+
+
+
translateY
+
+
+ -
+
+
-
+
+
y+ +
+
+
Translates the shape along the y-axis. When translating x and y coordinates,
+use the translate method.
Parameters:
+ +-
+
+
-
+
+
y+ Number + + + + +++ + +The value to translate.
+
+
+
Attributes
+ + +data
+ String
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 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.
+fill
+ Object
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Contains information about the fill of the shape. +
-
+
- color
- The color of the fill. +
- opacity
- Number between 0 and 1 that indicates the opacity of the fill. The default value is 1. +
- type
- Type of fill.
+
-
+
- solid
- Solid single color fill. (default) +
- linear
- Linear gradient fill. +
- radial
- Radial gradient fill. +
+
If a linear or radial is specified as the fill type. The following additional property is used:
+
-
+
- stops
- An array of objects containing the following properties:
+
-
+
- color
- The color of the stop. +
- opacity
- Number between 0 and 1 that indicates the opacity of the stop. The default value is 1. + Note: No effect for IE 6 - 8 +
- offset
- Number between 0 and 1 indicating where the color stop is positioned. +
+
Linear gradients also have the following property:
+ + <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>
+graphic
+ Graphic
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ readonly
+
+
+
+
+ Reference to the parent graphic instance
+height
+ Number
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Indicates the height of the shape
+node
+ HTMLElement
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ readonly
+
+
+
+
+ Dom node for the shape.
+stroke
+ Object
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Contains information about the stroke of the shape. +
-
+
- color
- The color of the stroke. +
- weight
- Number that indicates the width of the stroke. +
- opacity
- Number between 0 and 1 that indicates the opacity of the stroke. The default value is 1. +
- dashstyle 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. +
- linecap
- Specifies the linecap for the stroke. The following values can be specified:
+
-
+
- butt (default)
- Specifies a butt linecap. +
- square
- Specifies a sqare linecap. +
- round
- Specifies a round linecap. +
+ - linejoin
- Specifies a linejoin for the stroke. The following values can be specified:
+
-
+
- round (default)
- Specifies that the linejoin will be round. +
- bevel
- Specifies a bevel for the linejoin. +
- miter limit
- 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. +
+
transform
+ String
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ A string containing, in order, transform operations applied to the shape instance. The transform string can contain the following values:
+
+
-
+
- rotate
- Rotates the shape clockwise around it transformOrigin. +
- translate
- Specifies a 2d translation. +
- skew
- Skews the shape around the x-axis and y-axis. +
- scale
- Specifies a 2d scaling operation. +
- translateX
- Translates the shape along the x-axis. +
- translateY
- Translates the shape along the y-axis. +
- skewX
- Skews the shape around the x-axis. +
- skewY
- Skews the shape around the y-axis. +
- matrix
- Specifies a 2D transformation matrix comprised of the specified six 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.
var myRect = new Y.Rect({
+ type:"rect",
+ width: 50,
+ height: 40,
+ transform: "rotate(45)"
+ };
+The code below would apply translate and rotate to an existing shape.
myRect.set("transform", "translate(40, 50) rotate(45)");
+transformOrigin
+ Array
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 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].
+visible
+ Boolean
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Indicates whether the shape is visible.
+width
+ Number
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Indicates the width of the shape
+x
+ Number
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Indicates the x position of shape.
+y
+ Number
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Indicates the y position of shape.
+