API Docs for: 0.3.0
Show:

Graphic.GraphicObject Class

Defined in: modules/Graphic/GraphicObject.js:12
Module: Graphic

GraphicObject represent an object that has a relationship with graphical context. It is the root class of every graphical component of the framework.

General

It provide many method for manipulate object in 2D space, keeping a internal matrix. It contain also dimensions, and a reference point for all transformations (center point).
Each object can have a parent, which is informed to any child modification, with the method onChange().

GraphicObject contain many properties which can be modified easily. However, you should use setAttr instead of directly modifing properties, to regenerate the caches if necessary. Direct access don't invalidate caches.

extend this class

All 2D graphical objects should inherit from this class. All inherited class should implement the draw() method, not implemented by default.
Inherited class must also inform the parent (if any) after each modification that influence the graphical render, by calling protected method notifyParentChange()

Constructor

Graphic.GraphicObject

(
  • [params]
)

Defined in modules/Graphic/GraphicObject.js:12

Parameters:

  • [params] Object optional

    it is an object that represent the parameters of the graphicalObject to set.

    • [x=0] Number optional

      position on X axis.

    • [y=0] Number optional

      position on Y axis.

    • [width=0] Number optional

      width of the element.

    • [height=0] Number optional

      height of the element.

    • [centerPoint] Object optional

      centerPoint of the current object

      • [x=0] Object optional
        x centerPoint value
      • [y=0] Object optional
        y centerPoint value
    • [zIndex=0] Number optional

      define display order with other graphic elements. default to 0.

    • [alpha=1.0] Number optional

      set the transparency, between 0 and 1. default to 1 (completely opaque).

    • [matrix] Matrix2D optional

      matrix to set to the object. default to identity matrix.

    • [parent=null] Number optional

      parent of the element.

Methods

draw

(
  • context
)

Defined in modules/Graphic/GraphicObject.js:151

This method is aimed to be overrides by the classes who extends GraphicObject class.

Parameters:

  • context CanvasRenderingContext2D

    represent the context of the canvas to draw on.

notifyParentChange

() protected

Defined in modules/Graphic/GraphicObject.js:217

This method notify the parent that a change has been done, and that it should clear his cache.

rotate

(
  • angle
)
chainable

Defined in modules/Graphic/GraphicObject.js:176

This method allow you to rotate the Graphical object around the center point of the GraphicalObject.

Parameters:

  • angle Number

    represent the angle of rotation, it's expressed in degree.

scale

(
  • x
  • y
)
chainable

Defined in modules/Graphic/GraphicObject.js:189

this method allow you to do a scale on the GraphicObject.

Parameters:

  • x Number

    this is the x scale factor

  • y Number

    this is the y scale factor

setAttr

(
  • attrs
)
chainable

Defined in modules/Graphic/GraphicObject.js:122

Setter availlable for updating attibuts and correctly clear the caches. You can set all attributes supported by this instance (see the GraphicObject constructor for common available properties)

Parameters:

  • attrs Object

    GraphicObject attributs. See the constructor for more details.

Example:

 object.setAttr({
     width: 20,
     height: 20
 });

 object.setAttr({
     pos: {
         x: 0,
         y: 0
     }
 });

skew

(
  • a
  • b
)
chainable

Defined in modules/Graphic/GraphicObject.js:203

This method allow you to do a skew transform on the GraphicObject.

Parameters:

  • a Number

    the factor of skew on the y axis

  • b Number

    the factor of skew on the x axis

translate

(
  • x
  • y
)
chainable

Defined in modules/Graphic/GraphicObject.js:161

This method allow you to translate the GraphicalObject, Internally this method modify the GraphicObject's matrix.

Parameters:

  • x Number

    this is the translation scalar of the x axis.

  • y Number

    this is the translation scalar of the y axis.

Properties

alpha

Number

Defined in modules/Graphic/GraphicObject.js:99

value of opacity, between 0.0 (fully transparent) and 1.0 (opaque)

centerPoint

Object

Defined in modules/Graphic/GraphicObject.js:77

default center of all matrix transformations.

values are exprimed depending on the size of the object. 0;0 is the up-left corner.

Sub-properties:

  • x Object
  • y Object

height

Number

Defined in modules/Graphic/GraphicObject.js:72

matrix

Matrix

Defined in modules/Graphic/GraphicObject.js:106

matrix applied to this object before draw.

parent

Layer

Defined in modules/Graphic/GraphicObject.js:113

parent containing this object.

width

Number

Defined in modules/Graphic/GraphicObject.js:67

x

Number

Defined in modules/Graphic/GraphicObject.js:53

position on X axis

y

Number

Defined in modules/Graphic/GraphicObject.js:60

position on Y axis

zIndex

Number

Defined in modules/Graphic/GraphicObject.js:92

zIndex, used to determine the drawing order. Hight zIndex are drawn first.