Hemi.graphics.canvasHemi JavaScript FrameworkHemi JavaScript Framework Project/Hemi/Hemi.graphics.canvasHemiThe Canvas class provides a shape management layer for browsers that support Canvas, including a temporary drawing layer and event to shape coordination.Canvas3.1.9Static initializer for CanvasInstance objects.newInstanceXHTML Node reference, either a canvas element, or an element into which a canvas should be created.A new instance of the Canvas class.Creates a new instance of the Hemi Graphics Canvas class.ShapeDecorator3.1.9A shape decorator receives event dispatches from the CanvasInstance allowing managed shapes to be manipulated in response to those events. Event properties and positions are captured prior to the event being dispatched to the decorator, and are available on the CanvasInstance.properties member.handle_canvas_mousedownA reference to the CanvasInstance.The event captured for the Canvas.Dispatched by the CanvasIntance for a mousedown event.handle_canvas_mousemoveA reference to the CanvasInstance.The event captured for the Canvas.Dispatched by the CanvasIntance for a mousemove event.handle_canvas_mouseupA reference to the CanvasInstance.The event captured for the Canvas.Dispatched by the CanvasIntance for a mouseup event.CanvasInstance3.1.9The 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. shapes contains object representations of vectors applied to the canvas temp_shapes contains shapes currently applied to the temporary canvas shape_track_map is a jagged array of x-axis[int],y-axis[int],node_indices[] InitializeInitializes the Canvas Class. If context is still undefined, leave ContextConfigApplies configuration to the context.Stroke styleFill styleGlobal alphaLine widthLine capLine joinMiter limitShadow offset XShadow offset YShadow colorGlobal composite operationFontText alignText baselinegetContextConfigByNameThe name of the configurationThe context configuration.newContextConfigApplies configuration to the context.The name of the configuration.Stroke styleFill styleGlobal alphaLine widthLine capLine joinMiter limitShadow offset XShadow offset YShadow colorGlobal composite operationFontText alignText baselinesetTemporaryContextConfigThe context configurationApplies the specified context configuration to the context.getContextConfigContext from which the configuration is queried.The context configuration.Returns the current context configuration as applied to the context.getContextReturns the Canvas 2D Context.The Canvas 2D ContextgetTemporaryContextReturns the Temporary Canvas 2D Context.The Canvas 2D ContextAddShapeDecoratorAdds a ShapeDecorator to the canvas.ClearClears the Canvas and Temporary Canvas shapes and drawings.ClearTempCanvasClears the Temporary Canvas shapes and drawings.ClearCanvasClears the Canvas shapes and drawings. TODO: Delete non-vectors based on shape property, not blind delete all spans DrawThe shape to be drawn.Bit indicating whether the shape should be stroked.Dev value.Draws the specified shape onto the temporary canvas. this.DrawArc(o.x, o.y, o.radius, o.startAngle, o.endAngle, b, o.fillStyle, o.strokeStyle); DrawPolygonThe shape to be drawn.Draws a polygon. Hemi.log("Fill = " + o.fillStyle); Hemi.log("Line " + p + ": " + oLP.x + "," + oLP.y); Hemi.log("Line: " + oLP.x + "," + oLP.y); DrawRoundedRectThe shape to be drawn.Draws a rounded rectangular shape. This function is based on the CanvasPaint paint.js implementation. RoundedRect based on CanvasPaint's paint.js - http://canvaspaint.org DrawEllipseThe shape to be drawn.Draws an ellipse shape. This function is based on the CanvasPaint paint.js implementation. Elipse based on CanvasPaint blog - http://canvaspaint.org/blog/2006/12/ellipse/ DrawArcThe shape to be drawn.Draws an arc shape. n.DrawArc = function (x, y, r, s, e, b, f, c) { o.x, o.y, o.radius, o.startAngle, o.endAngle, b, o.fillStyle, o.strokeStyle if (!f) f = tc2.fillStyle; if (!c) c = f; DrawRectThe shape to be drawn.Draws a rectangular shape. tc2 = _p[(o.rendered ? "canvas_2d" : "temp_canvas_2d")]; alert(x + "," + y + "\n" + w + "," + h); tc2[(b ? "strokeRect" : "fillRect")](x, y, w, h); alert(b + "?" + f + "\n" + c); DrawTextThe shape to be drawn.Draws a text shape. If the measureText method is not implemented, a positioned HTML element is used to supply the text. this.log("Draw Text at " + vX + ", " + vY); this.log("Draw Text at " + vX + ", " + vY); ConnectShapesThe source shape to be connected.The target shape to be connected.Type of connection to draw. Currently supports "line" and "elbow" (default).Draws a connection between the two shapes. positive o2 horz position if (x2 >= x1) { top center 1 >= x2 is over or off-center-right of x1 top center y2 is at least half-way above y1 bottom center right center left center 1 left center 1 bottom center 2 negative vert position left center 2 } Negative 2o horz position top center 1 left center1 bottom center 2 Straight Line Elbow Connector RasterizeMoves the shapes from the temporary canvas to the fixed canvas. Repaint temp objects from the temp canvas to the final canvas NewEllipseFirst x axis.First y axis.Second x axis.Second y axis.Fill color.Stroke color.A new shape object.Creates a new Ellipse Shape.NewArcX axis.Y axis.Radius.Start angle (degrees).End angle (degrees).Stroke to slice.Fill color.Stroke color.A new shape object.Creates a new Circle Shape.NewCircleX axis.Y axis.Radius.Fill color.Stroke color.A new shape object.Creates a new Circle Shape.NewTextThe text value.X axis.Y axis.Fill color.Font sizeFont family.A new shape object.Creates a new Text Shape.NewRoundedRectX axis.Y axis.Width.Height.Fill color.Stroke color.A new shape object.Creates a new RoundedRect Shape.PointObject that describes a point.X position of the point.Y position of the point.NewPointX axis.Y axis.A point object.Creates a new Point.NewTriangleX axis.Y axis.Width.Height.Fill color.Stroke color.A new isoscelese triangle object.Creates a new isoscelese Triangle Shape. Top Left Right NewPolygonArray of points.Fill color.Stroke color.A new shape object.Creates a new Polygon Shape.NewRectX axis.Y axis.Width.Height.Fill color.Stroke color.A new shape object.Creates a new Rect Shape.ShapeObject that describes a shape that can be rendered to the Canvas.Index of the shape in the shapes array.The type of the shape.Dev only.The shape x axis. Applies to limited shapes.The second shape x axis. Applies to limited shapes.The shape y axis. Applies to limited shapes.The second shape y axis. Applies to limited shapes.The shape kappa. Applies to limited shapes.The beginning arc position. Applies to limited shapes.The ending arc position. Applies to limited shapes.The arc radius. Applies to limited shapes.The shape width. Applies to limited shapes.The shape height. Applies to limited shapes.The text value. Applies to text shapes.Dev only.Dev only.Placeholder for coordinating shape objects with other objects.Bit indicating whether the shape should be captured as a source or target prior to dispatching events to any specified decorators.Bit indicating whether HTML was used to accommodate an incomplete Canvas implemenetation.The fill style for the shape.The stroke style for the shape.The shape identifier.Bit indicating whether the shape has been rendered.NewShapeThe internal index of the shape in the shapes array.The type of the shape.Fill color.Stroke color.A new shape object.Creates a new Shape.ShapeAtThe x axis.The y axis.A shape object.Returns the first shape at the specified coordinates, and caches the location until the canvas is cleared.FindShapeAtThe x axis.The y axis.A shape object.Finds a shape at the specified coordinates. Not valid - replace with point - circle intersection HemiEngine.message.service.sendMessage("Skip: " + oShape.type + " : " + oShape.x); handle_canvas_mousemoveEvent.Dispatches the mousemove event to any specified decorators. Sets the MouseTrackLeft, MouseTrackTop, and MouseDropShape property.handle_canvas_mouseupEvent.Dispatches the mouseup event to any specified decorators. Clears MouseTrack* properties.properties.MouseDropShapeThe shape at the current MouseTrackLeft and MouseTrackTop location.properties.CurrentShapeThe shape at the MouseTrackLeft and MouseTrackTop location where the mousedown event fired.properties.MouseTrackDownBit indicating whether the mousedown event is in effect.properties.MouseTrackChooseBit indicating whether the mousedown event captured a shape.properties.MouseTrackLeftThe left axis of the mouse in the canvas.properties.MouseTrackTopThe top axis of the mouse in the canvas.properties.MouseOffsetXThe left offset of the mouse position from the shape edge.properties.MouseOffsetYThe top offset of the mouse position from the shape edge.dispatch_decoratorsEvent.Dispatches the specified event to specified decorators. this.log("Dispatch " + e.type + " to " + aD.length + " decorators"); handle_canvas_mousedownEvent.Dispatches the mousedown event to any specified decorators. Sets the MouseTrackLeft, MouseTrackTop, MouseTrackChoose, MouseTrackDown, and CurrentShape properties._handle_canvas_mouseEvent.Routes mouse events.ResizeNew width value.New height value.Resizes the canvas and temporary canvas elements.The Canvas class provides a shape management layer for browsers that support Canvas, including a temporary drawing layer and event to shape coordination.Hemi_api.htmlAPI Index