API Docs for: 3.5.1
Show:

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

()

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 Object

    Object 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:

destroy

()

Removes all nodes.

getShapeById

(
  • id
)

Returns a shape based on the id of its dom node.

Parameters:

  • id String

    Dom 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:

  • shape Shape | String

    The instance or id of the shape to be removed.

render

(
  • parentNode
)

Adds the graphics node to the dom.

Parameters:

  • parentNode Node | String

    node 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

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.

height

Number

Indicates the height of the Graphic.

id

String

Unique id for class instance.

node

HTMLElement

The html element that represents to coordinate system of the Graphic instance.

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.

shapes

Object

Key value pairs in which a shape instance is associated with its id.

visible

Boolean

Indicates whether the Graphic and its children are visible.

width

Number

Indicates the width of the Graphic.

x

Number

Indicates the x-coordinate for the instance.

y

Number

Indicates the y-coordinate for the instance.