Show:

<a href="http://www.w3.org/TR/html5/the-canvas-element.html">Canvas</a> implementation of the Graphic class. CanvasGraphic is not intended to be used directly. Instead, use the <a href="Graphic.html">Graphic</a> class. If the browser lacks <a href="http://www.w3.org/TR/SVG/">SVG</a> capabilities but has <a href="http://www.w3.org/TR/html5/the-canvas-element.html">Canvas</a> capabilities, the <a href="Graphic.html">Graphic</a> class will point to the CanvasGraphic class.

Methods

_appendShape

(
  • shape
)
private

Adds a shape instance to the graphic instance.

Parameters:

  • shape Shape

    The shape instance to be added to the graphic.

_calculateTranslate

(
  • position
  • contentSize
  • boundsSize
)
private

Determines the value for either an x or y value to be used for the <code>translate</code> of the Graphic.

Parameters:

  • position String

    The position for placement. Possible values are min, mid and max.

  • contentSize Number

    The total size of the content.

  • boundsSize Number

    The total size of the Graphic.

Returns:

Number

_getDocFrag

() private

Returns a document fragment to for attaching shapes.

Returns:

DocumentFragment

_getShapeClass

(
  • val
)
private

Returns a shape class. Used by addShape.

Parameters:

  • val Shape | String

    Indicates which shape class.

Returns:

Function

_getUpdatedContentBounds

() Object private

Recalculates and returns the contentBounds for the Graphic instance.

Returns:

Object:

_redraw

() private

Redraws all shapes.

_removeChildren

(
  • node
)
private

Removes all child nodes.

Parameters:

  • node HTMLElement

_toBack

(
  • Shape
)
private

Inserts shape as the first child of the content node.

Parameters:

_toFront

(
  • Shape
)
private

Inserts shape on the top of the tree.

Parameters:

_toggleVisible

(
  • val
)
private

Toggles visibility

Parameters:

  • val Boolean

    indicates visibilitye

addShape

(
  • cfg
)

Generates a shape instance by type.

Parameters:

  • cfg Object

    attributes for the shape

Returns:

Shape

addToRedrawQueue

(
  • Shape
)
protected

Adds a shape to the redraw queue and calculates the contentBounds. Used internally by Shape instances.

Parameters:

  • Shape Object

    shape The shape instance to add to the queue

batch

(
  • method
)

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

Parameters:

  • method Function

    Method to execute.

clear

()

Clears the graphics object.

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.

initializer

(
  • config
)
private

Initializes the class.

Parameters:

  • config Object

    Optional attributes

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 HTMLElement

    node in which to render the graphics node into.

set

(
  • name
  • value
)

Sets the value of an attribute.

Parameters:

  • name String | Object

    The name of the attribute. Alternatively, an object of key value pairs can be passed in to set multiple attributes at once.

  • value Any

    The value to set the attribute to. This value is ignored if an object is received as the name param.

Properties

_shapeClass

Object private

Look up for shape classes. Used by addShape to retrieve a class for instantiation.

_x

Number private

Storage for x attribute.

_y

Number private

Storage for y attribute.

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 graphic instance's position.

height

Number

Indicates the height of the Graphic.

id

String

Unique id for class instance.

node

HTMLElement readonly

The outermost html element 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.

resizeDown

Boolean

The contentBounds will resize to greater values but not smaller values. (for performance) When resizing the contentBounds down is desirable, set the resizeDown value to true.

shapes

Object readonly

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.