JavaScript must be enabled in order for you to use JSXGraph and JSXGraph reference. However, it seems JavaScript is either disabled or not supported by your browser.

Class Index | File Index

Elements
Classes

Class JXG.CanvasRenderer

JXG.AbstractRenderer
      ↳ JXG.CanvasRenderer

JXG.CanvasRenderer

Defined in: canvas.js.
Extends JXG.AbstractRenderer.

Class Summary
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 Summary
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)

Documentation generated by JsDoc Toolkit 2.4.0 on Fri Mar 08 2024 12:21:01 GMT+0100 (Mitteleuropäische Normalzeit)