Class JXG.CanvasRenderer
JXG.AbstractRenderer
↳ JXG.CanvasRenderer
JXG.CanvasRenderer
Defined in: canvas.js.
Extends
JXG.AbstractRenderer.
| Constructor Attributes | Constructor Name and Description |
|---|---|
|
JXG.CanvasRenderer(container, dim)
Uses HTML Canvas to implement the rendering methods defined in JXG.AbstractRenderer.
|
- Fields borrowed from class JXG.AbstractRenderer:
- container, dashArray, enhancedRendering, supportsForeignObject, type, vOffsetText
- Fields borrowed from class JXG.AbstractRenderer:
- container, dashArray, enhancedRendering, supportsForeignObject, type, vOffsetText
| Method Attributes | Method Name and Description |
|---|---|
| <private> |
_drawPolygon(shape, degree, doFill)
Draws a filled polygon.
|
| <private> |
_fill(el)
Sets the fill color and fills an area.
|
| <private> |
_rotatePoint(angle, x, y)
Rotates a point around (0, 0) by a given angle.
|
| <private> |
_rotateShape(shape, angle)
Rotates an array of points around (0, 0).
|
| <private> |
_setColor(el, type, targetType)
Sets color and opacity for filling and stroking.
|
| <private> |
_stroke(el)
Sets color and opacity for drawing paths and lines and draws the paths and lines.
|
| <private> |
_translateShape(shape, x, y)
Translates a set of points.
|
| <private> |
drawArrows(el, scr1, scr2, hl, a)
Draws arrows of an element (usually a line) in canvas renderer.
|
| <private> |
updateGradientAngle(node, radians)
Set the gradient angle for linear color gradients.
|
| <private> |
updateGradientCircle(node, cx, cy, r, fx, fy, fr)
Set circles for radial color gradients.
|
- Methods borrowed from class JXG.AbstractRenderer:
- _css2js, _getHighlighted, _setArrowWidth, _updateVisual, appendChildPrim, appendNodesToElement, changePointStyle, createPrim, createTouchpoints, display, displayCopyright, drawCurve, drawEllipse, drawImage, drawInternalText, drawLine, drawNavigationBar, drawPoint, drawPolygon, drawText, drawTicks, dumpToCanvas, dumpToDataURI, getArrowHeadData, getElementById, getPositionArrowHead, handleTouchpoints, hide, hideTouchpoint, highlight, joinTransforms, makeArrows, noHighlight, remove, removeDraft, removeToInsertLater, resize, screenshot, setArrowSize, setBuffering, setDashStyle, setDraft, setGradient, setLayer, setLineCap, setObjectFillColor, setObjectStrokeColor, setObjectStrokeWidth, setObjectTransition, setObjectViewport, setPropertyPrim, setShadow, show, showTouchpoint, suspendRedraw, transformImage, unsuspendRedraw, updateCurve, updateEllipse, updateEllipsePrim, updateGradient, updateImage, updateImageStyle, updateImageURL, updateInternalText, updateInternalTextStyle, updateLine, updateLinePrim, updateLineWithEndings, updatePath, updatePathPrim, updatePathStringBezierPrim, updatePathStringPoint, updatePathStringPrim, updatePathWithArrowHeads, updatePoint, updatePolygon, updatePolygonPrim, updateRectPrim, updateText, updateTextStyle, updateTicks, updateTouchpoint
Class Detail
JXG.CanvasRenderer(container, dim)
Uses HTML Canvas to implement the rendering methods defined in JXG.AbstractRenderer.
- Parameters:
- {Node} container
- Reference to a DOM node containing the board.
- {Object} dim
- The dimensions of the board
- {Number} dim.width
- {Number} dim.height
- See:
- JXG.AbstractRenderer
Method Detail
<private>
_drawPolygon(shape, degree, doFill)
Draws a filled polygon.
- Parameters:
- {Array} shape
- A matrix presented by a two dimensional array of numbers.
- degree
- doFill
- See:
- JXG.AbstractRenderer#drawArrows
<private>
_fill(el)
Sets the fill color and fills an area.
- Parameters:
- {JXG.GeometryElement} el
- An arbitrary JSXGraph element, preferably one with an area.
<private>
{Array}
_rotatePoint(angle, x, y)
Rotates a point around (0, 0) by a given angle.
- Parameters:
- {Number} angle
- An angle, given in rad.
- {Number} x
- X coordinate of the point.
- {Number} y
- Y coordinate of the point.
- Returns:
- {Array} An array containing the x and y coordinate of the rotated point.
<private>
{Array}
_rotateShape(shape, angle)
Rotates an array of points around (0, 0).
- Parameters:
- {Array} shape
- An array of array of point coordinates.
- {Number} angle
- The angle in rad the points are rotated by.
- Returns:
- {Array} Array of array of two dimensional point coordinates.
<private>
{Boolean}
_setColor(el, type, targetType)
Sets color and opacity for filling and stroking.
type is the attribute from visProp and targetType the context[targetTypeStyle].
This is necessary, because the fill style of a text is set by the stroke attributes of the text element.
- Parameters:
- {JXG.GeometryElement} el
- Any JSXGraph element.
- {String} type Optional, Default: 'stroke'
- Either fill or stroke.
- {String} targetType Optional, Default: type
- (optional) Either fill or stroke.
- Returns:
- {Boolean} If the color could be set, true is returned.
<private>
_stroke(el)
Sets color and opacity for drawing paths and lines and draws the paths and lines.
- Parameters:
- {JXG.GeometryElement} el
- An JSXGraph element with a stroke.
<private>
{Array}
_translateShape(shape, x, y)
Translates a set of points.
- Parameters:
- {Array} shape
- An array of point coordinates.
- {Number} x
- Translation in X direction.
- {Number} y
- Translation in Y direction.
- Returns:
- {Array} An array of translated point coordinates.
<private>
drawArrows(el, scr1, scr2, hl, a)
Draws arrows of an element (usually a line) in canvas renderer.
- Parameters:
- {JXG.GeometryElement} el
- Line to be drawn.
- {Array} scr1
- Screen coordinates of the start position of the line or curve.
- {Array} scr2
- Screen coordinates of the end position of the line or curve.
- {String} hl
- String which carries information if the element is highlighted. Used for getting the correct attribute.
- a
<private>
updateGradientAngle(node, radians)
Set the gradient angle for linear color gradients.
- Parameters:
- {JXG.GeometryElement} node
- An arbitrary JSXGraph element, preferably one with an area.
- {Number} radians
- angle value in radians. 0 is horizontal from left to right, Pi/4 is vertical from top to bottom.
<private>
updateGradientCircle(node, cx, cy, r, fx, fy, fr)
Set circles for radial color gradients.
- Parameters:
- {SVGnode} node
- SVG gradient node
- {Number} cx
- Canvas value x1 (but value between 0 and 1)
- {Number} cy
- Canvas value y1 (but value between 0 and 1)
- {Number} r
- Canvas value r1 (but value between 0 and 1)
- {Number} fx
- Canvas value x0 (but value between 0 and 1)
- {Number} fy
- Canvas value x1 (but value between 0 and 1)
- {Number} fr
- Canvas value r0 (but value between 0 and 1)