#

API Docs for: 3.10.3
Show: Inherited Protected Private Deprecated

# Graphic Class

Defined in: `graphics/js/GraphicBase.js:959`
Module: graphics

`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.

- `SVGGraphic`
- `VMLGraphic`
- `CanvasGraphic`

It is not necessary to interact with these classes directly. `Graphic` will point to the appropriate implemention.

## Constructor

### `Graphic`

()

Defined in `graphics/js/GraphicBase.js:959`

- Index
- Methods
- Attributes

## Item Index

### Methods

- addShape
- batch
- destroy
- getShapeById
- getXY
- removeAllShapes
- removeShape
- render

### Attributes

- autoDraw
- autoSize
- contentBounds
- height
- id
- node
- preserveAspectRatio
- render
- resizeDown
- shapes
- visible
- width
- x
- y

## Methods

### `addShape`

(

- `cfg`

)

Defined in `graphics/js/GraphicBase.js:1119`

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:

- `Circle`
- `Ellipse`
- `Rect`
- `Path`

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`

)

Defined in `graphics/js/GraphicBase.js:1185`

Allows for creating multiple shapes in order to batch appending and redraw operations.

#### Parameters:

- `method` Function

  Method to execute.

### `destroy`

()

Defined in `graphics/js/GraphicBase.js:1114`

Removes all nodes.

### `getShapeById`

(

- `id`

)

Defined in `graphics/js/GraphicBase.js:1178`

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`

()

Defined in `graphics/js/GraphicBase.js:1102`

Gets the current position of the graphic instance in page coordinates.

#### Returns:

Array The XY position of the shape.

### `removeAllShapes`

()

Defined in `graphics/js/GraphicBase.js:1173`

Removes all shape instances from the dom.

### `removeShape`

(

- `shape`

)

Defined in `graphics/js/GraphicBase.js:1167`

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`

)

Defined in `graphics/js/GraphicBase.js:1108`

Adds the graphics node to the dom.

#### Parameters:

- `parentNode` Node | String

  node in which to render the graphics node into.

## Attributes

### `autoDraw`

Boolean private

Defined in `graphics/js/GraphicBase.js:1087`

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

Defined in `graphics/js/GraphicBase.js:1027`

Determines the sizing of the Graphic.

sizeContentToGraphic
  The Graphic's width and height attributes are, either explicitly set through the `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.
sizeGraphicToContent
  (Also accepts a value of true) The Graphic's width and height are determined by the size and positioning of the content.
false
  The Graphic's width and height attributes are, either explicitly set through the `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

### `contentBounds`

Object readonly

Defined in `graphics/js/GraphicBase.js:1001`

Object containing size and coordinate data for the content of a Graphic in relation to the coordSpace node.

### `height`

Number

Defined in `graphics/js/GraphicBase.js:1021`

Indicates the height of the `Graphic`.

### `id`

String

Defined in `graphics/js/GraphicBase.js:988`

Unique id for class instance.

### `node`

HTMLElement readonly

Defined in `graphics/js/GraphicBase.js:1008`

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

### `preserveAspectRatio`

String

Defined in `graphics/js/GraphicBase.js:1047`

Determines how content is sized when `autoSize` is set to `sizeContentToGraphic`.

none
  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.
xMinYMin
  Force uniform scaling position along the top left of the Graphic's node.
xMidYMin
  Force uniform scaling horizontally centered and positioned at the top of the Graphic's node.
xMaxYMin
  Force uniform scaling positioned horizontally from the right and vertically from the top.
xMinYMid
Force uniform scaling positioned horizontally from the left and vertically centered.
xMidYMid (the default)
  Force uniform scaling with the content centered.
xMaxYMid
  Force uniform scaling positioned horizontally from the right and vertically centered.
xMinYMax
  Force uniform scaling positioned horizontally from the left and vertically from the bottom.
xMidYMax
  Force uniform scaling horizontally centered and position vertically from the bottom.
xMaxYMax
  Force uniform scaling positioned horizontally from the right and vertically from the bottom.

Default: xMidYMid

### `render`

Node | String

Defined in `graphics/js/GraphicBase.js:981`

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

Defined in `graphics/js/GraphicBase.js:1068`

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 readonly

Defined in `graphics/js/GraphicBase.js:994`

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

### `visible`

Boolean

Defined in `graphics/js/GraphicBase.js:1096`

Indicates whether the `Graphic` and its children are visible.

### `width`

Number

Defined in `graphics/js/GraphicBase.js:1015`

Indicates the width of the `Graphic`.

### `x`

Number

Defined in `graphics/js/GraphicBase.js:1075`

Indicates the x-coordinate for the instance.

### `y`

Number

Defined in `graphics/js/GraphicBase.js:1081`

Indicates the y-coordinate for the instance.