Graphic Class
yui3/src/graphics/js/GraphicBase.js:1034
Graphic acts a factory and container for shapes. You need at least one Graphic instance to create shapes for your application.
<p>The code block below creates a Graphic instance and appends it to an HTMLElement with the id 'mygraphiccontainer'.</p>
var myGraphic = new Y.Graphic({render:"#mygraphiccontainer"});
<p>Alternatively, you can add a Graphic instance to the DOM using the <a href="#method_render">render</a> method.</p>
var myGraphic = new Y.Graphic();
myGraphic.render("#mygraphiccontainer");
Graphic has the following implementations based on browser capability.
<ul>
<li><a href="SVGGraphic.html">SVGGraphic</a></li>
<li><a href="VMLGraphic.html">VMLGraphic</a></li>
<li><a href="CanvasGraphic.html">CanvasGraphic</a></li>
</ul>
It is not necessary to interact with these classes directly. Graphic will point to the appropriate implemention.</p>
Constructor
Graphic
()
Index
Attributes
Methods
addShape
-
cfg
<p>Generates a shape instance by type. The method accepts an object that contain's the shape's type and attributes to be customized. For example, the code below would create a rectangle:</p>
var myRect = myGraphic.addShape({
type: "rect",
width: 40,
height: 30,
fill: {
color: "#9aa"
},
stroke: {
weight: 1,
color: "#000"
}
});
<p>The Graphics module includes a few basic shapes. More information on their creation
can be found in each shape's documentation:
<ul>
<li><a href="Circle.html">Circle</a></li>
<li><a href="Ellipse.html">Ellipse</a></li>
<li><a href="Rect.html">Rect</a></li>
<li><a href="Path.html">Path</a></li>
</ul>
The Graphics module also allows for the creation of custom shapes. If a custom shape
has been created, it can be instantiated with the addShape method as well. The attributes,
required and optional, would need to be defined in the custom shape.
var myCustomShape = myGraphic.addShape({
type: Y.MyCustomShape,
width: 50,
height: 50,
fill: {
color: "#9aa"
},
stroke: {
weight: 1,
color: "#000"
}
});Parameters:
-
cfgObjectObject containing the shape's type and attributes.
Returns:
Shape
batch
-
method
Allows for creating multiple shapes in order to batch appending and redraw operations.
Parameters:
-
methodFunctionMethod to execute.
destroy
()
Removes all nodes.
getShapeById
-
id
Returns a shape based on the id of its dom node.
Parameters:
-
idStringDom id of the shape's node attribute.
Returns:
Shape
getXY
()
Gets the current position of the graphic instance in page coordinates.
Returns:
Array The XY position of the shape.
removeAllShapes
()
Removes all shape instances from the dom.
removeShape
-
shape
Removes a shape instance from from the graphic instance.
Parameters:
-
shapeShape | StringThe instance or id of the shape to be removed.
render
-
parentNode
Adds the graphics node to the dom.
Parameters:
-
parentNodeNode | Stringnode in which to render the graphics node into.
Attributes
autoDraw
Boolean
private
Indicates whether or not the instance will automatically redraw after a change is made to a shape. This property will get set to false when batching operations.
Default: true
autoSize
Boolean | String
Determines the sizing of the Graphic.
<dl> <dt>sizeContentToGraphic</dt><dd>The Graphic's width and height attributes are, either explicitly set through the <code>width</code> and <code>height</code> attributes or are determined by the dimensions of the parent element. The content contained in the Graphic will be sized to fit with in the Graphic instance's dimensions. When using this setting, the <code>preserveAspectRatio</code> attribute will determine how the contents are sized.</dd> <dt>sizeGraphicToContent</dt><dd>(Also accepts a value of true) The Graphic's width and height are determined by the size and positioning of the content.</dd> <dt>false</dt><dd>The Graphic's width and height attributes are, either explicitly set through the <code>width</code> and <code>height</code> attributes or are determined by the dimensions of the parent element. The contents of the Graphic instance are not affected by this setting.</dd> </dl>
Default: false
contentBounds
Object
readonly
Object containing size and coordinate data for the content of a Graphic in relation to the coordSpace node.
node
HTMLElement
readonly
The html element that represents to coordinate system of the Graphic instance.
preserveAspectRatio
String
Determines how content is sized when <code>autoSize</code> is set to <code>sizeContentToGraphic</code>.
<dl> <dt>none<dt><dd>Do not force uniform scaling. Scale the graphic content of the given element non-uniformly if necessary such that the element's bounding box exactly matches the viewport rectangle.</dd> <dt>xMinYMin</dt><dd>Force uniform scaling position along the top left of the Graphic's node.</dd> <dt>xMidYMin</dt><dd>Force uniform scaling horizontally centered and positioned at the top of the Graphic's node.<dd> <dt>xMaxYMin</dt><dd>Force uniform scaling positioned horizontally from the right and vertically from the top.</dd> <dt>xMinYMid</dt>Force uniform scaling positioned horizontally from the left and vertically centered.</dd> <dt>xMidYMid (the default)</dt><dd>Force uniform scaling with the content centered.</dd> <dt>xMaxYMid</dt><dd>Force uniform scaling positioned horizontally from the right and vertically centered.</dd> <dt>xMinYMax</dt><dd>Force uniform scaling positioned horizontally from the left and vertically from the bottom.</dd> <dt>xMidYMax</dt><dd>Force uniform scaling horizontally centered and position vertically from the bottom.</dd> <dt>xMaxYMax</dt><dd>Force uniform scaling positioned horizontally from the right and vertically from the bottom.</dd> </dl>
Default: xMidYMid
render
Node | String
Whether or not to render the Graphic automatically after to a specified parent node after init. This can be a Node
instance or a CSS selector string.