new xrx.drawing.Drawing(element, opt_engine)
A class representing a drawing canvas. The drawing canvas can have a background
image and thereby can serve as an image annotation tool.
Parameters:
Name | Type | Description |
---|---|---|
element |
DOMElement | The HTML element used to install the canvas. |
opt_engine |
xrx.engine.Canvas | xrx.engine.SVG | xrx.engine.VML | The rendering engine type. |
- Source:
Methods
-
xrx.drawing.Drawing#addShapes(var_args)
-
Adds one or more shapes to this drawing canvas.
Parameters:
Name Type Description var_args
xrx.shape.Shape The shapes. - Source:
-
xrx.drawing.Drawing#draw()
-
Draws this canvas and all its layers, tools and shapes contained.
- Source:
-
xrx.drawing.Drawing#getBackgroundImage() → {HTMLImage}
-
Returns the current background image of this drawing canvas.
- Source:
Returns:
The background image.- Type
- HTMLImage
-
xrx.drawing.Drawing#getCanvas() → {xrx.shape.Canvas}
-
Returns the canvas object of this drawing canvas.
- Source:
Returns:
The canvas object.- Type
- xrx.shape.Canvas
-
xrx.drawing.Drawing#getElement() → {DOMElement}
-
Returns the wrapper element of this drawing canvas.
- Source:
Returns:
The wrapper.- Type
- DOMElement
-
xrx.drawing.Drawing#getEngine() → {xrx.engine.Engine}
-
Returns the engine used for rendering.
- Source:
Returns:
The engine.- Type
- xrx.engine.Engine
-
xrx.drawing.Drawing#getHeight(height)
-
Returns the height of this drawing canvas.
Parameters:
Name Type Description height
number The height in pixel. - Source:
-
xrx.drawing.Drawing#getLayerBackground() → {xrx.drawing.LayerBackground}
-
Returns the background layer of this drawing canvas.
- Source:
Returns:
The background layer object. -
xrx.drawing.Drawing#getLayerShape() → {xrx.drawing.LayerShape}
-
Returns the shape layer of this drawing canvas.
- Source:
Returns:
The shape layer object. -
xrx.drawing.Drawing#getLayerShapeCreate() → {xrx.drawing.LayerShapeCreate}
-
Returns the layer where new shapes can be drawn.
- Source:
Returns:
The create layer object. -
xrx.drawing.Drawing#getLayerShapeModify() → {xrx.drawing.LayerShapeModify}
-
Returns the layer where shapes can be modified.
- Source:
Returns:
The shape modify layer object. -
xrx.drawing.Drawing#getLayerTool() → {xrx.drawing.LayerTool}
-
Returns the layer where tools can be plugged in.
- Source:
Returns:
The tool layer object. -
xrx.drawing.Drawing#getMode() → {number}
-
Returns the current mode of this drawing canvas.
- Source:
Returns:
The mode.- Type
- number
-
xrx.drawing.Drawing#getShapes() → {Array.<xrx.shape.Shape>}
-
Returns the shapes currently rendered by this drawing canvas.
- Source:
Returns:
The shapes.- Type
- Array.<xrx.shape.Shape>
-
xrx.drawing.Drawing#getViewbox() → {Object}
-
Returns the view-box of this drawing canvas.
- Source:
Returns:
The view-box.- Type
- Object
-
xrx.drawing.Drawing#getWidth(width)
-
Returns the width of this drawing canvas.
Parameters:
Name Type Description width
number The width in pixel. - Source:
-
xrx.drawing.Drawing#handleResize()
-
Handles resizing of this drawing canvas. This function is automatically called whenever the size of the browser window changes. It can be also called by an application that manually changes the size of this drawing canvas during live time.
- Source:
-
xrx.drawing.Drawing#setBackgroundImage(url, opt_callback)
-
Sets a background image to this drawing canvas.
Parameters:
Name Type Description url
string The URL of the image. opt_callback
function A callback function that is evaluated after the image is loaded. - Source:
-
xrx.drawing.Drawing#setHeight(height)
-
Sets the height of this drawing canvas.
Parameters:
Name Type Description height
number The height in pixel. - Source:
-
xrx.drawing.Drawing#setModeCreate(creatable)
-
Switch the drawing canvas over into mode create to allow drawing of new shapes.
Parameters:
Name Type Description creatable
xrx.shape.Creatable The shape to be created. - Source:
- See:
-
xrx.drawing.Drawing#setModeDisabled()
-
Switch the drawing canvas over into mode disabled.
- Source:
-
xrx.drawing.Drawing#setModeHover(opt_overlapping)
-
Switch the drawing canvas over into mode hover to allow hovering of shapes.
Parameters:
Name Type Description opt_overlapping
boolean Whether to highlight all hovered shapes that lie on top of each other or just the most forward. opt_overlapping defaults to false. - Source:
-
xrx.drawing.Drawing#setModeModify()
-
Switch the drawing canvas over into mode modify to allow modification of shapes.
- Source:
- See:
-
xrx.drawing.Drawing#setModeSelect()
-
Switch the drawing canvas over into mode select to allow selecting of shapes.
- Source:
-
xrx.drawing.Drawing#setModeView()
-
Switch the drawing canvas over into mode view to allow view-box panning zooming and rotating.
- Source:
-
xrx.drawing.Drawing#setSelected(shape)
-
Sets a shape as the selected.
Parameters:
Name Type Description shape
xrx.shape.Shape The shape to be selected. - Source:
-
xrx.drawing.Drawing#setSize(width, height)
-
Sets the size of this drawing canvas.
Parameters:
Name Type Description width
number The width in pixel. height
number The height in pixel. - Source:
-
xrx.drawing.Drawing#setStyle(The, The)
-
Sets a CSS style for this drawing canvas.
Parameters:
Name Type Description The
string style name such as 'padding'. The
string style value such as '20px'. - Source:
-
xrx.drawing.Drawing#setWidth(width)
-
Sets the width of this drawing canvas.
Parameters:
Name Type Description width
number The width in pixel. - Source:
Events
-
xrx.drawing.Drawing#event:eventShapeModify
-
Event that is thrown whenever a shape is modified.
Parameters:
Name Type Description shape
xrx.shape.Shape The shape that was modified. - Source: