Graphic Class
Graphic
acts a factory and container for shapes. You need at least one Graphic
instance to create shapes for your application.
The code block below creates a Graphic
instance and appends it to an HTMLElement with the id 'mygraphiccontainer'.
var myGraphic = new Y.Graphic({render:"#mygraphiccontainer"});
Alternatively, you can add a Graphic
instance to the DOM using the render
method.
var myGraphic = new Y.Graphic();
myGraphic.render("#mygraphiccontainer");
Graphic
has the following implementations based on browser capability.
It is not necessary to interact with these classes directly. Graphic
will point to the appropriate implemention.
Constructor
Graphic
()
Item Index
Methods
addShape
-
cfg
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:
var myRect = myGraphic.addShape({
type: "rect",
width: 40,
height: 30,
fill: {
color: "#9aa"
},
stroke: {
weight: 1,
color: "#000"
}
});
The Graphics
module includes a few basic shapes. More information on their creation
can be found in each shape's documentation:
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:
-
cfg
ObjectObject containing the shape's type and attributes.
Returns:
batch
-
method
Allows for creating multiple shapes in order to batch appending and redraw operations.
Parameters:
-
method
FunctionMethod to execute.
destroy
()
Removes all nodes.
getShapeById
-
id
Returns a shape based on the id of its dom node.
Parameters:
-
id
StringDom id of the shape's node attribute.
Returns:
getXY
()
Gets the current position of the graphic instance in page coordinates.
Returns:
removeAllShapes
()
Removes all shape instances from the dom.
removeShape
-
shape
Removes a shape instance from from the graphic instance.
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
Determines how the size of instance is calculated. If true, the width and height are determined by the size of the contents. If false, the width and height values are either explicitly set or determined by the size of the parent node's dimensions.
Default: false
contentBounds
Object
Object containing size and coordinate data for the content of a Graphic in relation to the coordSpace node.
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.
resizeDown
Boolean
The contentBounds will resize to greater values but not to smaller values. (for performance) When resizing the contentBounds down is desirable, set the resizeDown value to true.