Dojo-0.9 gfx basics : shapes and surfaces - theory

Goal of the post :

• introducing base dojo gfx objects : shapes and surfaces

Basic objects: shapes and surface

shape : dojox.gfx basic object. Supported shapes in dojo 0.9 are: Rectangle , Circle , Ellipse , Line , Polyline/polygon , Path , Image , Text , Text path (experimental)

• shape objects:
  • dojox.gfx.defaultPath
  • dojox.gfx.defaultPolyline
  • dojox.gfx.defaultRect
  • dojox.gfx.defaultEllipse
  • dojox.gfx.defaultCircle
  • dojox.gfx.defaultLine
  • dojox.gfx.defaultImage

• common shape methods:
  • getShape() : returns the current shape object or null
  • setShape(shape) : sets a shape object
    • shape : Object: a shape object
  • getStroke() : returns the current stroke object or null (see dojox.gfx.defaultStroke)
  • setStroke(stroke) : sets a stroke object (the default implementation simply ignores it)
    • stroke : Object : a stroke object (see dojox.gfx.defaultStroke)
  • getFill()
  • setFill(fill) : sets a fill object (the default implementation simply ignores it)
    • fill : Object : a fill object (see dojox.gfx.defaultLinearGradient, dojox.gfx.defaultRadialGradient, dojox.gfx.defaultPattern, or dojo.Color)
  • getTransform() : returns the current transformation matrix or null
  • setTransform(matrix) : sets a transformation matrix
    • matrix : dojox.gfx.matrix.Matrix : a matrix or a matrix-like object (see an argument of dojox.gfx.matrix.Matrix constructor for a list of acceptable arguments)
  • applyRightTransform(matrix) : multiplies the existing matrix with an argument on right side (this.matrix * matrix)
    • matrix : dojox.gfx.matrix.Matrix : a matrix or a matrix-like object (see an argument of dojox.gfx.matrix.Matrix constructor for a list of acceptable arguments)
  • applyLeftTransform(matrix) : multiplies the existing matrix with an argument on left side (matrix * this.matrix)
    • matrix : dojox.gfx.matrix.Matrix : a matrix or a matrix-like object (see an argument of dojox.gfx.matrix.Matrix constructor for a list of acceptable arguments)
  • applyTransform(matrix) : a shortcut for dojox.gfx.Shape.applyRightTransform
    • matrix : dojox.gfx.matrix.Matrix : a matrix or a matrix-like object (see an argument of dojox.gfx.matrix.Matrix constructor for a list of acceptable arguments)
  • moveToFront() : moves a shape to front of its parent’s list of shapes (the default implementation does nothing)
  • moveToBack() : moves a shape to back of its parent’s list of shapes (the default implementation does nothing)
  • removeShape(silently) : removes the shape from its parent’s list of shapes
    • silently : Boolean? : if true, do not redraw a picture yet
  • getParent() : returns the parent or null (see dojox.gfx.Surface, dojox.gfx.shape.VirtualGroup, or dojox.gfx.Group)
  • getBoundingBox() : returns the bounding box or null (see dojox.gfx.defaultRect)
  • getNode() : returns the current DOM Node or null
  • getEventSource() : returns a Node, which is used as a source of events for this shape

Surface : dojo.gfx is the main object that contains a list of shapes

• surface constructor : dojox.gfx.createSurface(parentNode, width, height);
• surface methods :
  • getEventSource() : returns a Node, which is used as a source of events for this shape
    
  • getDimensions() : returns an object with properties “width” and “height”
    
  • setDimensions(widht, height) : sets the width and height of the rawNode
    • width : String : width of surface, e.g., “100px”
    • height : String : height of surface, e.g., “100px”
  • createShape(shape) : creates a shape object based on its type
    • shape : Object: a shape object
  • createPath(path), createRect(rect), createCircle(circle), createEllipse(ellipse), createLine(line), createPolyline(polyline), createImage(image), createText(text), createTextPath(textpath) : create corrisponding shape
  • createGroup() : creates a group object
  • add(shape) : adds a shape to a group/surface
    • shape : dojox.gfx.Shape : a shape object
  • remove(shape, silently) : remove a shape from a group/surface
    • shape : dojox.gfx.Shape : a shape object
    • silently : Boolean? : if true, regenerate a picture
  • clear() : removes all shapes from a group/surface

Examples:

• var ctx = dojox.gfx.createSurface("ctx", 350, 350); // creates a 2D drawing surface
   
  ctx.createRect({x: 0, y: 0, width: 350, height: 350}).setFill("black"); // draws a black rectangle on the whole surface

• var ctx = dojox.gfx.createSurface("ctx", 350, 350); // creates a 2D drawing surface
   
  var img = ctx.createImage({x:10, y: 10, width: 50, height: 50, src: "images/image.png"}); // draws a scaled (width, height) image on the surface starting from x,y point