Hemi JavaScript Framework
Hemi.graphics.canvas
Description
The Canvas class provides a shape management layer for browsers that support Canvas, including a temporary drawing layer and event to shape coordination.
Class Index
static Hemi.graphics.canvas.Canvas
version 3.1.0
Static initializer for CanvasInstance objects.
Index
Method Index
- public newInstance: Creates a new instance of the Hemi Graphics Canvas class.
Methods
newInstance
Creates a new instance of the Hemi Graphics Canvas class.
Syntax
oCanvas = newInstance(
o
)
Parameters
- o as Node (optional): XHTML Node reference, either a canvas element, or an element into which a canvas should be created.
Returns
oCanvas as CanvasInstance: A new instance of the Canvas class.
Hemi.graphics.canvas.CanvasInstance
version 3.1.0
The Canvas Graphics class provides a number of utitilies and helper methods for working with Canvas elements, and instrumenting and tracking objects created for the Canvas.
Index
Object Index
- public Shape: Object that describes a shape that can be rendered to the Canvas.
Property Index
Method Index
- public _handle_canvas_mouse (internal): Routes mouse events.
- public AddShapeDecorator: Adds a ShapeDecorator to the canvas.
- public Clear: Clears the Canvas and Temporary Canvas shapes and drawings.
- public ClearCanvas: Clears the Canvas shapes and drawings.
- public ClearTempCanvas: Clears the Temporary Canvas shapes and drawings.
- public ConnectShapes: Draws a connection between the two shapes.
- public dispatch_decorators (internal): Dispatches the specified event to specified decorators.
- public Draw: Draws the specified shape onto the temporary canvas.
- public DrawArc (internal): Draws an arc shape.
- public DrawEllipse (internal): Draws an ellipse shape. This function is based on the CanvasPaint paint.js implementation.
- public DrawRect (internal): Draws a rectangular shape.
- public DrawRoundedRect (internal): Draws a rounded rectangular shape. This function is based on the CanvasPaint paint.js implementation.
- public DrawText (internal): Draws a text shape. If the measureText method is not implemented, a positioned HTML element is used to supply the text.
- public FindShapeAt (internal): Finds a shape at the specified coordinates.
- public handle_canvas_mousedown (internal): Dispatches the mousedown event to any specified decorators. Sets the MouseTrackLeft, MouseTrackTop, MouseTrackChoose, MouseTrackDown, and CurrentShape properties.
- public handle_canvas_mousemove (internal): Dispatches the mousemove event to any specified decorators. Sets the MouseTrackLeft, MouseTrackTop, and MouseDropShape property.
- public handle_canvas_mouseup (internal): Dispatches the mouseup event to any specified decorators. Clears MouseTrack* properties.
- public Initialize (internal): Initializes the Canvas Class.
- public NewCircle: Creates a new Circle Shape.
- public NewEllipse: Creates a new Ellipse Shape.
- public NewRect: Creates a new Rect Shape.
- public NewRoundedRect: Creates a new RoundedRect Shape.
- public NewShape (internal): Creates a new Shape.
- public NewText: Creates a new Text Shape.
- public Rasterize: Moves the shapes from the temporary canvas to the fixed canvas.
- public Resize: Resizes the canvas and temporary canvas elements.
- public ShapeAt: Returns the first shape at the specified coordinates, and caches the location until the canvas is cleared.
Objects
Shape
Object that describes a shape that can be rendered to the Canvas.
Properties
- index as int: Index of the shape in the shapes array.
- type as String: The type of the shape.
- layerIndex as int: Dev only.
- x as int: The shape x axis. Applies to limited shapes.
- x2 as int: The second shape x axis. Applies to limited shapes.
- y as int: The shape y axis. Applies to limited shapes.
- y2 as int: The second shape y axis. Applies to limited shapes.
- kappa as float: The shape kappa. Applies to limited shapes.
- startAngle as float: The beginning arc position. Applies to limited shapes.
- endAngle as float: The ending arc position. Applies to limited shapes.
- radius as float: The arc radius. Applies to limited shapes.
- width as int: The shape width. Applies to limited shapes.
- height as int: The shape height. Applies to limited shapes.
- text as String: The text value. Applies to text shapes.
- children as array: Dev only.
- parent as int: Dev only.
- reference_id as int: Placeholder for coordinating shape objects with other objects.
- selectable as boolean: Bit indicating whether the shape should be captured as a source or target prior to dispatching events to any specified decorators.
- is_html as boolean: Bit indicating whether HTML was used to accommodate an incomplete Canvas implemenetation.
- fillStyle as String: The fill style for the shape.
- strokeStyle as String: The stroke style for the shape.
- id as String: The shape identifier.
- rendered as boolean: Bit indicating whether the shape has been rendered.
Properties
properties.CurrentShape
The shape at the MouseTrackLeft and MouseTrackTop location where the mousedown event fired.
Syntax
Shape = object.properties.CurrentShape
properties.MouseDropShape
The shape at the current MouseTrackLeft and MouseTrackTop location.
Syntax
Shape = object.properties.MouseDropShape
properties.MouseOffsetX
The left offset of the mouse position from the shape edge.
Syntax
int = object.properties.MouseOffsetX
properties.MouseOffsetY
The top offset of the mouse position from the shape edge.
Syntax
int = object.properties.MouseOffsetY
properties.MouseTrackChoose
Bit indicating whether the mousedown event captured a shape.
Syntax
boolean = object.properties.MouseTrackChoose
properties.MouseTrackDown
Bit indicating whether the mousedown event is in effect.
Syntax
boolean = object.properties.MouseTrackDown
properties.MouseTrackLeft
The left axis of the mouse in the canvas.
Syntax
int = object.properties.MouseTrackLeft
properties.MouseTrackTop
The top axis of the mouse in the canvas.
Syntax
int = object.properties.MouseTrackTop
Methods
_handle_canvas_mouse
Routes mouse events.
Syntax
void _handle_canvas_mouse(
e
)
Parameters
AddShapeDecorator
Adds a ShapeDecorator to the canvas.
Syntax
void AddShapeDecorator(
)
Clear
Clears the Canvas and Temporary Canvas shapes and drawings.
Syntax
void Clear(
)
ClearCanvas
Clears the Canvas shapes and drawings.
Syntax
void ClearCanvas(
)
ClearTempCanvas
Clears the Temporary Canvas shapes and drawings.
Syntax
void ClearTempCanvas(
)
ConnectShapes
Draws a connection between the two shapes.
Syntax
void ConnectShapes(
oShape, oShape, sType
)
Parameters
- oShape as Shape : The source shape to be connected.
- oShape as Shape : The target shape to be connected.
- sType as String (optional): Type of connection to draw. Currently supports "line" and "elbow" (default).
dispatch_decorators
Dispatches the specified event to specified decorators.
Syntax
void dispatch_decorators(
e
)
Parameters
Draw
Draws the specified shape onto the temporary canvas.
Syntax
void Draw(
oShape, bStroke, bFix
)
Parameters
- oShape as Shape : The shape to be drawn.
- bStroke as boolean : Bit indicating whether the shape should be stroked.
- bFix as boolean (optional): Dev value.
DrawArc
Draws an arc shape.
Syntax
void DrawArc(
oShape
)
Parameters
- oShape as Shape : The shape to be drawn.
DrawEllipse
Draws an ellipse shape. This function is based on the CanvasPaint paint.js implementation.
Syntax
void DrawEllipse(
oShape
)
Parameters
- oShape as Shape : The shape to be drawn.
DrawRect
Draws a rectangular shape.
Syntax
void DrawRect(
oShape
)
Parameters
- oShape as Shape : The shape to be drawn.
DrawRoundedRect
Draws a rounded rectangular shape. This function is based on the CanvasPaint paint.js implementation.
Syntax
void DrawRoundedRect(
oShape
)
Parameters
- oShape as Shape : The shape to be drawn.
DrawText
Draws a text shape. If the measureText method is not implemented, a positioned HTML element is used to supply the text.
Syntax
void DrawText(
oShape
)
Parameters
- oShape as Shape : The shape to be drawn.
FindShapeAt
Finds a shape at the specified coordinates.
Syntax
oShape = FindShapeAt(
x, y
)
Parameters
- x as int : The x axis.
- y as int : The y axis.
Returns
oShape as Shape: A shape object.
handle_canvas_mousedown
Dispatches the mousedown event to any specified decorators. Sets the MouseTrackLeft, MouseTrackTop, MouseTrackChoose, MouseTrackDown, and CurrentShape properties.
Syntax
void handle_canvas_mousedown(
e
)
Parameters
handle_canvas_mousemove
Dispatches the mousemove event to any specified decorators. Sets the MouseTrackLeft, MouseTrackTop, and MouseDropShape property.
Syntax
void handle_canvas_mousemove(
e
)
Parameters
handle_canvas_mouseup
Dispatches the mouseup event to any specified decorators. Clears MouseTrack* properties.
Syntax
void handle_canvas_mouseup(
e
)
Parameters
Initialize
Initializes the Canvas Class.
Syntax
void Initialize(
)
NewCircle
Creates a new Circle Shape.
Syntax
oShape = NewCircle(
x, y, r, sFill, sStroke
)
Parameters
- x as int : X axis.
- y as int : Y axis.
- r as float : Radius.
- sFill as String : Fill color.
- sStroke as String : Stroke color.
Returns
oShape as Shape: A new shape object.
NewEllipse
Creates a new Ellipse Shape.
Syntax
oShape = NewEllipse(
x, y, x2, y2, sFill, sStroke
)
Parameters
- x as int : First x axis.
- y as int : First y axis.
- x2 as int : Second x axis.
- y2 as int : Second y axis.
- sFill as String : Fill color.
- sStroke as String : Stroke color.
Returns
oShape as Shape: A new shape object.
NewRect
Creates a new Rect Shape.
Syntax
oShape = NewRect(
x, y, w, h, sFill, sStroke
)
Parameters
- x as int : X axis.
- y as int : Y axis.
- w as int : Width.
- h as int : Height.
- sFill as String : Fill color.
- sStroke as String : Stroke color.
Returns
oShape as Shape: A new shape object.
NewRoundedRect
Creates a new RoundedRect Shape.
Syntax
oShape = NewRoundedRect(
x, y, w, h, sFill, sStroke
)
Parameters
- x as int : X axis.
- y as int : Y axis.
- w as int : Width.
- h as int : Height.
- sFill as String : Fill color.
- sStroke as String : Stroke color.
Returns
oShape as Shape: A new shape object.
NewShape
Creates a new Shape.
Syntax
oShape = NewShape(
index, sType, sFill, sStroke
)
Parameters
- index as int : The internal index of the shape in the shapes array.
- sType as String : The type of the shape.
- sFill as String : Fill color.
- sStroke as String : Stroke color.
Returns
oShape as Shape: A new shape object.
NewText
Creates a new Text Shape.
Syntax
oShape = NewText(
sText, x, y, sFill, sStroke
)
Parameters
- sText as String : The text value.
- x as int : X axis.
- y as int : Y axis.
- sFill as String : Fill color.
- sStroke as String : Stroke color.
Returns
oShape as Shape: A new shape object.
Rasterize
Moves the shapes from the temporary canvas to the fixed canvas.
Syntax
void Rasterize(
)
Resize
Resizes the canvas and temporary canvas elements.
Syntax
void Resize(
width, height
)
Parameters
- width as String : New width value.
- height as String : New height value.
ShapeAt
Returns the first shape at the specified coordinates, and caches the location until the canvas is cleared.
Syntax
oShape = ShapeAt(
x, y
)
Parameters
- x as int : The x axis.
- y as int : The y axis.
Returns
oShape as Shape: A shape object.
[ Hemi JavaScript Framework - Stephen W. Cote, 2002 - 2009. ]