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.9
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.9
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 ContextConfig: Applies configuration to the context.
- public Point: Object that describes a point.
- 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 DrawPolygon (internal): Draws a polygon.
- 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 getContext: Returns the Canvas 2D Context.
- public getContextConfig: Returns the current context configuration as applied to the context.
- public getContextConfigByName
- public getTemporaryContext: Returns the Temporary Canvas 2D Context.
- 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 NewArc: Creates a new Circle Shape.
- public NewCircle: Creates a new Circle Shape.
- public newContextConfig: Applies configuration to the context.
- public NewEllipse: Creates a new Ellipse Shape.
- public NewPoint: Creates a new Point.
- public NewPolygon: Creates a new Polygon 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 NewTriangle: Creates a new isoscelese Triangle Shape.
- public Rasterize: Moves the shapes from the temporary canvas to the fixed canvas.
- public Resize: Resizes the canvas and temporary canvas elements.
- public setTemporaryContextConfig: Applies the specified context configuration to the context.
- public ShapeAt: Returns the first shape at the specified coordinates, and caches the location until the canvas is cleared.
Objects
ContextConfig
Applies configuration to the context.
Properties
- stroke as variant: Stroke style
- fill as variant: Fill style
- alpha as variant: Global alpha
- lineWidth as variant: Line width
- lineCap as variant: Line cap
- lineJoin as variant: Line join
- miterLimit as variant: Miter limit
- shadowOffsetX as variant: Shadow offset X
- shadowOffsetY as variant: Shadow offset Y
- shadowColor as variant: Shadow color
- globalComposite as variant: Global composite operation
- font as variant: Font
- textAlign as variant: Text align
- textBaseline as variant: Text baseline
Point
Object that describes a point.
Properties
- x as int: X position of the point.
- y as int: Y position of the point.
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.
DrawPolygon
Draws a polygon.
Syntax
void DrawPolygon(
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.
getContext
Returns the Canvas 2D Context.
Syntax
ctx = getContext(
)
Returns
ctx as Context: The Canvas 2D Context
getContextConfig
Returns the current context configuration as applied to the context.
Syntax
cfg = getContextConfig(
ctx
)
Parameters
- ctx as Context (optional): Context from which the configuration is queried.
Returns
cfg as ContextConfig: The context configuration.
getContextConfigByName
Syntax
cfg = getContextConfigByName(
name
)
Parameters
- name as String : The name of the configuration
Returns
cfg as ContextConfig: The context configuration.
getTemporaryContext
Returns the Temporary Canvas 2D Context.
Syntax
ctx = getTemporaryContext(
)
Returns
ctx as Context: The Canvas 2D Context
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(
)
NewArc
Creates a new Circle Shape.
Syntax
oShape = NewArc(
x, y, r, s, e, b, sFill, sStroke
)
Parameters
- x as int : X axis.
- y as int : Y axis.
- r as float : Radius.
- s as float : Start angle (degrees).
- e as float : End angle (degrees).
- b as float : Stroke to slice.
- sFill as String : Fill color.
- sStroke as String : Stroke color.
Returns
oShape as Shape: A new shape object.
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.
newContextConfig
Applies configuration to the context.
Syntax
void newContextConfig(
name, stroke, fill, alpha, lWidth, lCap, lJoin, miter, shadowX, shadowY, shadowColor, composite, font, textAlign, textBaseline
)
Parameters
- name as String : The name of the configuration.
- stroke as variant (optional): Stroke style
- fill as variant (optional): Fill style
- alpha as variant (optional): Global alpha
- lWidth as variant (optional): Line width
- lCap as variant (optional): Line cap
- lJoin as variant (optional): Line join
- miter as variant (optional): Miter limit
- shadowX as variant (optional): Shadow offset X
- shadowY as variant (optional): Shadow offset Y
- shadowColor as variant (optional): Shadow color
- composite as variant (optional): Global composite operation
- font as variant (optional): Font
- textAlign as variant (optional): Text align
- textBaseline as variant (optional): Text baseline
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.
NewPoint
Creates a new Point.
Syntax
oPoint = NewPoint(
x, y
)
Parameters
- x as int : X axis.
- y as int : Y axis.
Returns
oPoint as Point: A point object.
NewPolygon
Creates a new Polygon Shape.
Syntax
oShape = NewPolygon(
aPoints, sFill, sStroke
)
Parameters
- aPoints as Array<Point> : Array of points.
- 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, sFz, sFf
)
Parameters
- sText as String : The text value.
- x as int : X axis.
- y as int : Y axis.
- sFill as String : Fill color.
- sFz as String : Font size
- sFf as String : Font family.
Returns
oShape as Shape: A new shape object.
NewTriangle
Creates a new isoscelese Triangle Shape.
Syntax
oShape = NewTriangle(
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 isoscelese triangle 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.
setTemporaryContextConfig
Applies the specified context configuration to the context.
Syntax
void setTemporaryContextConfig(
cfg
)
Parameters
- cfg as ContextConfig : The context configuration
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 - 2011. ]