dojox/drawing/Drawing (version 1.10)

Summary

Drawing is a project that sits on top of DojoX GFX and uses SVG and VML vector graphics to draw and display.

Drawing is similar to DojoX Sketch, but is designed to be more versatile extendable and customizable. Drawing currently only initiates from HTML although it's technically not a Dijit to keep the file size light. But if Dijit is available, Drawing will register itself with it and can be accessed with registry.byId('myDrawing') (by requiring dijit/registry)

NOTES: Although not Drawing and Toolbar, all other objects are created with a custom declare. See dojox.drawing.util.oo

The files are laid out as such:

Usage

var foo = new Drawing(props,node);
dojox/drawing/Drawing
Parameter Type Description
props Object
node HTMLNode

See the dojox/drawing/Drawing reference documentation for more information.

Examples

Example 1

<div data-dojo-type="dojox.drawing.Drawing" id="drawing" defaults="myCustom.defaults"
    plugins="[{'name':'dojox.drawing.plugins.drawing.Grid', 'options':{gap:100}}]">
</div>

Example 2

<div dojoType="dojox.drawing.Toolbar" drawingId="drawing" class="drawingToolbar vertical">
    <div tool="dojox.drawing.tools.Line" selected="false">Line</div>
    <div tool="dojox.drawing.tools.Rect" selected="false">Rect</div>
    <div tool="dojox.drawing.tools.Ellipse" selected="false">Ellipse</div>
    <div tool="dojox.drawing.tools.TextBlock" selected="false">Statement</div>
    <div tool="dojox.drawing.tools.custom.Equation" selected="false">Equation</div>
    <div plugin="dojox.drawing.plugins.tools.Pan" options="{}">Pan</div>
    <div plugin="dojox.drawing.plugins.tools.Zoom" options="{zoomInc:.1,minZoom:.5,maxZoom:2}">Zoom</div>
</div>

Property Summary

  • heightHeight of the canvas
  • modeChanges the functionality of the drawing
  • readyWhether or not the canvas has been created and Stencils can be added
  • widthWidth of the canvas

Method Summary

  • _createCanvas()
  • addPlugin(plugin) Add a toolbar plugin object to plugins array to be parsed
  • addStencil(type,options) Use this method to programmatically add Stencils that display on the canvas.
  • addUI(type,options) Use this method to programmatically add Stencils that display on the canvas.
  • changeDefaults(newStyle,value) Change the defaults so that all Stencils from this point on will use the newly changed style.
  • exporter() Collects all Stencil data and returns an Array of objects.
  • get(name)
  • getConstructor(abbr) Returns a Stencil constructor base on abbreviation
  • getShapeProps(data,mode) The common objects that are mixed into a new Stencil.
  • importer(objects) Handles an Array of stencil data and imports the objects to the drawing.
  • initPlugins() Called from Toolbar after a plugin has been loaded The call to this coming from toolbar is a bit funky as the timing of IE for canvas load is different than other browsers
  • registerTool(type) Registers a tool that can be accessed.
  • removeAll() Deletes all Stencils on the canvas.
  • removeStencil(stencil) Use this method to programmatically remove Stencils from the canvas.
  • resize(box) Resizes the canvas.
  • selectAll() Selects all stencils
  • set(name,value) Drawing registers as a widget and needs to support widget's api.
  • setTool(type) Sets up a new class to be used to draw.
  • startup()
  • toSelected(func) Call a function within all selected Stencils like attr()
  • unSetTool() Destroys current tool

Event Summary

  • onDeleteStencil(stencil) Event fired from a stencil that has destroyed itself will also be called when it is removed by "removeStencil" or stencils.onDelete.
  • onRenderStencil(stencil) Event that fires when a stencil is drawn.
  • onSurfaceReady() Event that to which can be connected.

Properties

height
Defined by: dojox/drawing/Drawing

Height of the canvas

mode
Defined by: dojox/drawing/Drawing

Changes the functionality of the drawing

ready
Defined by: dojox/drawing/Drawing

Whether or not the canvas has been created and Stencils can be added

width
Defined by: dojox/drawing/Drawing

Width of the canvas

Methods

_createCanvas()
addPlugin(plugin)

Add a toolbar plugin object to plugins array to be parsed

Parameter Type Description
plugin Object
addStencil(type,options)

Use this method to programmatically add Stencils that display on the canvas.

FIXME: Currently only supports Stencils that have been registered, which is items in the toolbar, and the additional Stencils at the end of onSurfaceReady. This covers all Stencils, but you can't use 'display only' Stencils for Line, Rect, and Ellipse.

Parameter Type Description
type String

The final name of the tool, lower case: 'image', 'line', 'textBlock'

options Object

The parameters used to draw the object. See stencil._Base and each tool for specific parameters of teh data or points objects.

Returns:undefined
addUI(type,options)

Use this method to programmatically add Stencils that display on the canvas.

FIXME: Currently only supports Stencils that have been registered, which is items in the toolbar, and the additional Stencils at the end of onSurfaceReady. This covers all Stencils, but you can't use 'display only' Stencils for Line, Rect, and Ellipse.

Parameter Type Description
type String

The final name of the tool, lower case: 'image', 'line', 'textBlock'

options Object
  • type: Object

The parameters used to draw the object. See stencil._Base and each tool for specific parameters of teh data or points objects.

Returns:null | undefined
changeDefaults(newStyle,value)

Change the defaults so that all Stencils from this point on will use the newly changed style.

Parameter Type Description
newStyle Object

An object that represents one of the objects in drawing.style that will be mixed in. Not all properties are necessary. Only one object may be changed at a time. The object boolean parameter is not required and if not set objects will automatically be changed. Changing non-objects like angleSnap requires value to be true.

value Boolean

Examples

Example 1

myDrawing.changeDefaults({
    norm:{
        fill:"#0000ff",
        width:5,
        color:"#ffff00"
    }
});
exporter()

Collects all Stencil data and returns an Array of objects.

Returns:undefined
get(name)
Parameter Type Description
name undefined
getConstructor(abbr)

Returns a Stencil constructor base on abbreviation

Parameter Type Description
abbr String
Returns:undefined
getShapeProps(data,mode)

The common objects that are mixed into a new Stencil. Mostly internal, but could be used.

Parameter Type Description
data Object
mode undefined
Returns:undefined
importer(objects)

Handles an Array of stencil data and imports the objects to the drawing.

Parameter Type Description
objects Array
initPlugins()

Called from Toolbar after a plugin has been loaded The call to this coming from toolbar is a bit funky as the timing of IE for canvas load is different than other browsers

registerTool(type)

Registers a tool that can be accessed. Internal.

Parameter Type Description
type String
removeAll()

Deletes all Stencils on the canvas.

removeStencil(stencil)

Use this method to programmatically remove Stencils from the canvas.

Parameter Type Description
stencil Object

The Stencil to be removed

resize(box)

Resizes the canvas. If within a ContentPane this will get called automatically. Can also be called directly.

Parameter Type Description
box Object
selectAll()

Selects all stencils

set(name,value)

Drawing registers as a widget and needs to support widget's api.

Parameter Type Description
name undefined
value undefined
setTool(type)

Sets up a new class to be used to draw. Called from Toolbar, and this class... after a tool is used a new one of the same type is initialized. Could be called externally.

Parameter Type Description
type String
startup()
toSelected(func)

Call a function within all selected Stencils like attr()

Parameter Type Description
func String

Examples

Example 1

myDrawing.toSelected('attr', {x:10})
unSetTool()

Destroys current tool

Events

onDeleteStencil(stencil)
Defined by: dojox/drawing/Drawing

Event fired from a stencil that has destroyed itself will also be called when it is removed by "removeStencil" or stencils.onDelete.

Parameter Type Description
stencil Object

Examples

Example 1

myDrawing.toSelected('attr', {x:10})
onRenderStencil(stencil)
Defined by: dojox/drawing/Drawing

Event that fires when a stencil is drawn. Does not fire from 'addStencil'.

Parameter Type Description
stencil Object

Examples

Example 1

myDrawing.toSelected('attr', {x:10})
onSurfaceReady()
Defined by: dojox/drawing/Drawing

Event that to which can be connected. Fired when the canvas is ready and can be drawn to.

Examples

Example 1

myDrawing.toSelected('attr', {x:10})
Error in the documentation? Can’t find what you are looking for? Let us know!