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.
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.
GraphicaddShapecfg
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"
}
});cfg
Object
Object containing the shape's type and attributes.
Shape
batchmethod
Allows for creating multiple shapes in order to batch appending and redraw operations.
method
Function
Method to execute.
destroyRemoves all nodes.
getShapeByIdid
Returns a shape based on the id of its dom node.
id
String
Dom id of the shape's node attribute.
Shape
getXYGets the current position of the graphic instance in page coordinates.
Array The XY position of the shape.
removeAllShapesRemoves all shape instances from the dom.
removeShapeshape
Removes a shape instance from from the graphic instance.
autoDrawIndicates 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
autoSizeDetermines the sizing of the Graphic.
width and height 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 preserveAspectRatio attribute will determine how the contents are sized.width
and height attributes or are determined by the dimensions of the parent element. The contents of the
Graphic instance are not affected by this setting.Default: false
contentBoundsObject containing size and coordinate data for the content of a Graphic in relation to the coordSpace node.
nodeThe html element that represents to coordinate system of the Graphic instance.
preserveAspectRatioDetermines how content is sized when autoSize is set to sizeContentToGraphic.
Default: xMidYMid
renderWhether 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.
resizeDownThe 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.