new Abstract2DDrawBridge()
Different renderer should provide different methods to draw element on context.
Those different implementations are wrapped in draw bridge classes.
Concrete bridge classes do not need to deprived from this class, but they
do need to implement all those essential methods.
In all drawXXX methods, parameter options contains the style information to draw stroke or fill.
It may contain the following fields:
{
strokeWidth: Int, in pixel
strokeColor: String, '#rrggbb'
strokeDash: Bool, whether draw a dash line.
fillColor: String, '#rrggbb'
opacity: Float, 0-1
}
In all drawXXX methods, coord are based on context (not directly on screen).
Methods
-
addToGroup(elem, group)
-
Ad an drawn element to group.
Parameters:
Name Type Description elemObject groupObject -
canModifyGraphic(context) → {Bool}
-
Indicate whether this bridge and context can change glyph content or position after drawing it. Raphael is a typical environment of this type while canvas should returns false.
Parameters:
Name Type Description contextObject Returns:
- Type
- Bool
-
clearContext(context)
-
Clear the whole context.
Parameters:
Name Type Description contextObject -
createContext(parentElem, width, height) → {Object}
-
Create a context element for drawing.
Parameters:
Name Type Description parentElemElement //@param {Int} contextOffsetX X coord of top-left corner of context, in px. //@param {Int} contextOffsetY Y coord of top-left corner of context, in px. widthInt Width of context, in px. heightInt Height of context, in px. Returns:
Context used for drawing.- Type
- Object
-
createGroup(context) → {Object}
-
Create a nested structure on context.
Parameters:
Name Type Description contextObject Returns:
- Type
- Object
-
drawArc(context, centerCoord, radius, startAngle, endAngle, anticlockwise, options) → {Object}
-
Draw an arc on context
Parameters:
Name Type Description contextObject centerCoordHash radiusNumber startAngleNumber endAngleNumber anticlockwiseBool optionsHash Returns:
Element drawn on context- Type
- Object
-
drawCircle(context, baseCoord, radius, options) → {Object}
-
Draw a cirle on context.
Parameters:
Name Type Description contextObject baseCoordHash radiusNumber optionsHash Returns:
Element drawn on context- Type
- Object
-
drawImage(context, src, baseCoord, size, options, callback) → {Object}
-
Draw an image on context
Parameters:
Name Type Description contextObject srcString Src url of image. baseCoordHash sizeHash Target size ({x, y} of drawing image. optionsHash callbackfunction Since image may need to be loaded from src on net, this method may draw concrete image on context async. When the draw job is done or failed, callback(success) will be called. Returns:
Element drawn on context- Type
- Object
-
drawImageElem(context, imgElem, baseCoord, size, options) → {Object}
-
Draw the content of an image element on context
Parameters:
Name Type Description contextObject imgElemHTMLElement Source image element. baseCoordHash sizeHash Target size ({x, y} of drawing image. optionsHash Returns:
Element drawn on context- Type
- Object
-
drawLine(context, coord1, coord2, options) → {Object}
-
Draw a line on context.
Parameters:
Name Type Description contextObject coord1Hash coord2Hash optionsHash Returns:
Element drawn on context- Type
- Object
-
drawPath(context, path, options) → {Object}
-
Use SVG style path object to draw a path on context.
Parameters:
Name Type Description contextObject pathObject optionsHash Returns:
Element drawn on context- Type
- Object
-
drawRect(context, coord1, coord2, options) → {Object}
-
Draw a rectangle on context.
Parameters:
Name Type Description contextObject coord1Hash coord2Hash optionsHash Returns:
Element drawn on context- Type
- Object
-
drawRoundRect(context, coord1, coord2, cornerRadius, options) → {Object}
-
Draw a round corner rectangle on context.
Parameters:
Name Type Description contextObject coord1Hash coord2Hash cornerRadiusNumber optionsHash Returns:
Element drawn on context- Type
- Object
-
drawTriangle(context, coord1, coord2, coord3, options) → {Object}
-
Draw a triangle on context.
Parameters:
Name Type Description contextObject coord1Hash coord2Hash coord3Hash optionsHash Returns:
Element drawn on context- Type
- Object
-
exportToDataUri(context, dataType, options) → {String}
-
Export drawing content to a data URL for
tag to use.
Parameters:
Name Type Description contextObject dataTypeString Type of image data, e.g. 'image/png'. optionsHash Export options, usually this is a number between 0 and 1 indicating image quality if the requested type is image/jpeg or image/webp. Returns:
- Type
- String
-
getContextDimension(context) → {Hash}
-
Get width and height of context.
Parameters:
Name Type Description contextObject Returns:
{width, height}- Type
- Hash
-
getContextElem(context)
-
Get context related element.
Parameters:
Name Type Description contextObject -
releaseContext(context)
-
Destroy context created.
Parameters:
Name Type Description contextObject -
removeDrawnElem(context, elem)
-
Remove an element in context.
Parameters:
Name Type Description contextObject elemObject -
removeFromGroup(elem, group)
-
Remove an element from group.
Parameters:
Name Type Description elemObject groupObject -
setClearColor(context, color)
-
Set background color of content.
Parameters:
Name Type Description contextObject colorString Color in '#RRGGBB' mode. Null means transparent. -
setContextDimension(context, width, height)
-
Set new width and height of context.
Parameters:
Name Type Description contextObject widthInt heightInt -
setContextViewBox(context, x, y, w, h, changeDimension)
-
Set the view box of context. This method will also change context dimension to w/h if param changeDimension is not false.
Parameters:
Name Type Description contextObject xInt Top left x coord. yInt Top left y coord. wInt Width. hInt Height. changeDimensionBool -
transformContextCoordToScreen(context, coord) → {Hash}
-
Transform a context based coord to screen based one (usually in pixel).
Parameters:
Name Type Description contextObject coordHash Returns:
- Type
- Hash
-
transformScreenCoordToContext(context, coord) → {Hash}
-
Transform a screen based coord to context based one.
Parameters:
Name Type Description contextObject coordHash Returns:
- Type
- Hash