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.
Ellipse will point to the appropriate implemention.
EllipseaddClassclassName
Add a class name to each node.
className
String
the class name to add to the node's class attribute
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.
containsneedle
Determines whether the node is an ancestor of another HTML element in the DOM hierarchy.
needle
Shape | HTMLElement
The possible node or descendent
destroyDestroys the instance.
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.
getXYGets the current position of the node in page coordinates.
initInit method, invoked during construction.
Calls initializer method.
initializerInitializes the shape
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.
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.
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:
<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>
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.
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)");
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].