JXG.GeometryElement

Own

aria

Description

ARIA settings for JSXGraph elements. Besides 'label' and 'live', all available properties from https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA may be set. In JSXGraph, the available attributes are used without the leading 'aria-'. For example, the value of the JSXGraph attribute aria.label will be set to the HTML attribute 'aria-label' (ignoring 'aria.enabled').

Type

Object

Default Value

{
  enabled: false,
  label: '',
  live: 'assertive'
 }

Source

options.js, line 1629

clip

Description

If set to false, the JSXGraph element can be dragged out of the JSXGraph board. Used in JXG#appBox.

Type

Boolean

Default Value

true

See

• JXG.appBox

Source

options.js, line 1653

cssClass

Description

Apply CSS classes to an element in non-highlighted view. It is possible to supply one or more CSS classes separated by blanks.

For non-text and non-image elements, this feature is available for the SVG renderer, only.

For text and image elements the specificity (priority) of JSXGraph attributes is higher than the CSS class properties, see Text#cssDefaultStyle For other elements, however, the specificity of a CSS class is higher than the corresponding JSXGraph attribute, see the example below. The fill-properties of a CSS class will be set only if the corresponding JSXGraph attributes are set (to a dummy value).

Type

String

Default Value

''

See

• Text#cssClass
• JXG.GeometryElement#highlightCssClass

Example

// CSS class
.line {
    stroke: blue;
    stroke-width: 10px;
    fill: yellow;
}

// JavaScript
var line = board.create('line', [[0, 0], [3, 3]], {
  cssClass: 'line',
  strokeColor: 'black',
  strokeWidth: 2,
  fillColor: '' // Necessary to enable the yellow fill color of the CSS class
});

// The line is blue and has stroke-width 10px;

Source

options.js, line 1666

dash

Description

Determines the elements border-style. Possible values are:

• 0 for a solid line
• 1 for a dotted line
• 2 for a line with small dashes
• 3 for a line with medium dashes
• 4 for a line with big dashes
• 5 for a line with alternating medium and big dashes and large gaps
• 6 for a line with alternating medium and big dashes and small gaps
• 7 for a dotted line. Needs JXG.GeometryElement#linecap set to "round" for round dots.

The dash patterns are defined in JXG.AbstractRenderer#dashArray.

Type

Number

Default Value

0

See

• JXG.GeometryElement#lineCap
• JXG.AbstractRenderer#dashArray

Source

options.js, line 1722

dashScale

Description

If true, the dash pattern is multiplied by strokeWidth / 2.

Type

Boolean

Default Value

false

See

• JXG.GeometryElement#dash
• JXG.AbstractRenderer#dashArray

Source

options.js, line 1747

draft

Description

If draft.draft: true the element will be drawn in grey scale colors (as default) to visualize that it's only a draft.

Type

Object

Default Value

{
  draft: false,
  strokeColor: '#565656',
  fillColor: '#565656',
  strokeOpacity: 0.8,
  fillOpacity: 0.8,
  strokeWidth: 1
}

Source

options.js, line 1759

dragToTopOfLayer

Description

If the element is dragged it will be moved on mousedown or touchstart to the top of its layer. Works only for SVG renderer and for simple elements consisting of one SVG node.

Type

Boolean

Default Value

false

Example

var li1 = board.create('line', [1, 1, 1], {strokeWidth: 20, dragToTopOfLayer: true});
var li2 = board.create('line', [1, -1, 1], {strokeWidth: 20, strokeColor: 'red'});

Source

options.js, line 1784

element3D

Description

Links to the defining 3D element of a 2D element. Otherwise it is null.

Default Value

null

Source

options.js, line 1811

fillColor

Description

The fill color of this geometry element.

Type

String

Default Value

JXG.palette.red

See

• JXG.GeometryElement#highlightFillColor
• JXG.GeometryElement#fillOpacity
• JXG.GeometryElement#highlightFillOpacity

Source

options.js, line 1821

fillOpacity

Description

Opacity for fill color.

Type

Number

Default Value

1

See

• JXG.GeometryElement#fillColor
• JXG.GeometryElement#highlightFillColor
• JXG.GeometryElement#highlightFillOpacity

Source

options.js, line 1833

fixed

Description

If true the element is fixed and can not be dragged around. The element will be repositioned on zoom and moveOrigin events.

Type

Boolean

Default Value

false

Source

options.js, line 1845

frozen

Description

If true the element is fixed and can not be dragged around. The element will even stay at its position on zoom and moveOrigin events. Only free elements like points, texts, images, curves can be frozen.

Type

Boolean

Default Value

false

Example

var txt = board.create('text', [1, 2, 'Hello'], {frozen: true, fontSize: 24});
var sli = board.create('slider', [[-4, 4], [-1.5, 4], [-10, 1, 10]], {
    name:'a',
    frozen: true
});

Source

options.js, line 1855

gradient

Description

Gradient type. Possible values are 'linear'. 'radial' or null.

Type

String

Default Value

null

See

• JXG.GeometryElement#gradientSecondColor
• JXG.GeometryElement#gradientSecondOpacity

Examples

var a = board.create('slider', [[0, -0.2], [3.5, -0.2], [0, 0, 2 * Math.PI]], {name: 'angle'});
    var b = board.create('slider', [[0, -0.4], [3.5, -0.4], [0, 0, 1]], {name: 'offset1'});
    var c = board.create('slider', [[0, -0.6], [3.5, -0.6], [0, 1, 1]], {name: 'offset2'});

    var pol = board.create('polygon', [[0, 0], [4, 0], [4,4], [0,4]], {
                fillOpacity: 1,
                fillColor: 'yellow',
                gradient: 'linear',
                gradientSecondColor: 'blue',
                gradientAngle: function() { return a.Value(); },
                gradientStartOffset: function() { return b.Value(); },
                gradientEndOffset: function() { return c.Value(); },
                hasInnerPoints: true
        });

var cx = board.create('slider', [[0, -.2], [3.5, -.2], [0, 0.5, 1]], {name: 'cx, cy'});
    var fx = board.create('slider', [[0, -.4], [3.5, -.4], [0, 0.5, 1]], {name: 'fx, fy'});
    var o1 = board.create('slider', [[0, -.6], [3.5, -.6], [0, 0.0, 1]], {name: 'offset1'});
    var o2 = board.create('slider', [[0, -.8], [3.5, -.8], [0, 1, 1]], {name: 'offset2'});
    var r = board.create('slider', [[0, -1], [3.5, -1], [0, 0.5, 1]], {name: 'r'});
    var fr = board.create('slider', [[0, -1.2], [3.5, -1.2], [0, 0, 1]], {name: 'fr'});

    var pol = board.create('polygon', [[0, 0], [4, 0], [4,4], [0,4]], {
                fillOpacity: 1,
                fillColor: 'yellow',
                gradient: 'radial',
                gradientSecondColor: 'blue',
                gradientCX: function() { return cx.Value(); },
                gradientCY: function() { return cx.Value(); },
                gradientR: function() { return r.Value(); },
                gradientFX: function() { return fx.Value(); },
                gradientFY: function() { return fx.Value(); },
                gradientFR: function() { return fr.Value(); },
                gradientStartOffset: function() { return o1.Value(); },
                gradientEndOffset: function() { return o2.Value(); },
                hasInnerPoints: true
    });

Source

options.js, line 1890

gradientAngle

Description

Angle (in radians) of the gradiant in case the gradient is of type 'linear'. If the angle is 0, the first color is on the left and the second color is on the right. If the angle is π/2 the first color is on top and the second color at the bottom.

Type

Number

Default Value

0

See

• JXG.GeometryElement#gradient

Source

options.js, line 1999

gradientCX

Description

From the SVG specification: ‘cx’, ‘cy’ and ‘r’ define the largest (i.e., outermost) circle for the radial gradient. The gradient will be drawn such that the 100% gradient stop is mapped to the perimeter of this largest (i.e., outermost) circle. For radial gradients in canvas this is the value 'x1'. Takes a value between 0 and 1.

Type

Number

Default Value

0.5

See

• JXG.GeometryElement#gradient
• JXG.GeometryElement#gradientCY
• JXG.GeometryElement#gradientR

Source

options.js, line 2012

gradientCY

Description

From the SVG specification: ‘cx’, ‘cy’ and ‘r’ define the largest (i.e., outermost) circle for the radial gradient. The gradient will be drawn such that the 100% gradient stop is mapped to the perimeter of this largest (i.e., outermost) circle. For radial gradients in canvas this is the value 'y1'. Takes a value between 0 and 1.

Type

Number

Default Value

0.5

See

• JXG.GeometryElement#gradient
• JXG.GeometryElement#gradientCX
• JXG.GeometryElement#gradientR

Source

options.js, line 2027

gradientEndOffset

Description

The gradientEndOffset attribute is a number (ranging from 0 to 1) which indicates where the second gradient stop is placed, see the SVG specification for more information. For linear gradients, this attribute represents a location along the gradient vector. For radial gradients, it represents a percentage distance from (fx,fy) to the edge of the outermost/largest circle.

Type

Number

Default Value

1.0

See

• JXG.GeometryElement#gradient
• JXG.GeometryElement#gradientStartOffset

Source

options.js, line 2042

gradientFR

Description

This attribute defines the radius of the start circle of the radial gradient. The gradient will be drawn such that the 0% <stop> is mapped to the perimeter of the start circle. For radial gradients in canvas this is the value 'r0'. Takes a value between 0 and 1.

Type

Number

Default Value

0.0

See

• JXG.GeometryElement#gradient
• JXG.GeometryElement#gradientFX
• JXG.GeometryElement#gradientFY

Source

options.js, line 2085

gradientFX

Description

‘fx’ and ‘fy’ define the focal point for the radial gradient. The gradient will be drawn such that the 0% gradient stop is mapped to (fx, fy). For radial gradients in canvas this is the value 'x0'. Takes a value between 0 and 1.

Type

Number

Default Value

0.5

See

• JXG.GeometryElement#gradient
• JXG.GeometryElement#gradientFY
• JXG.GeometryElement#gradientFR

Source

options.js, line 2056

gradientFY

Description

y-coordinate of the circle center for the second color in case of gradient 'radial'. (The attribute fy in SVG) For radial gradients in canvas this is the value 'y0'. Takes a value between 0 and 1.

Type

Number

Default Value

0.5

See

• JXG.GeometryElement#gradient
• JXG.GeometryElement#gradientFX
• JXG.GeometryElement#gradientFR

Source

options.js, line 2071

gradientR

Description

From the SVG specification: ‘cx’, ‘cy’ and ‘r’ define the largest (i.e., outermost) circle for the radial gradient. The gradient will be drawn such that the 100% gradient stop is mapped to the perimeter of this largest (i.e., outermost) circle. For radial gradients in canvas this is the value 'r1'. Takes a value between 0 and 1.

Type

Number

Default Value

0.5

See

• JXG.GeometryElement#gradient
• JXG.GeometryElement#gradientCX
• JXG.GeometryElement#gradientCY

Source

options.js, line 2100

gradientSecondColor

Description

Second color for gradient.

Type

String

Default Value

'#ffffff'

See

• JXG.GeometryElement#gradient
• JXG.GeometryElement#gradientSecondOpacity

Source

options.js, line 2115

gradientSecondOpacity

Description

Opacity of second gradient color. Takes a value between 0 and 1.

Type

Number

Default Value

1

See

• JXG.GeometryElement#gradient
• JXG.GeometryElement#gradientSecondColor

Source

options.js, line 2126

gradientStartOffset

Description

The gradientStartOffset attribute is a number (ranging from 0 to 1) which indicates where the first gradient stop is placed, see the SVG specification for more information. For linear gradients, this attribute represents a location along the gradient vector. For radial gradients, it represents a percentage distance from (fx,fy) to the edge of the outermost/largest circle.

Type

Number

Default Value

0.0

See

• JXG.GeometryElement#gradient
• JXG.GeometryElement#gradientEndOffset

Source

options.js, line 2137

highlight

Type

Boolean

Default Value

true

Source

options.js, line 2151

highlightCssClass

Description

Apply CSS classes to an element in highlighted view. It is possible to supply one or more CSS classes separated by blanks.

For non-text and non-image elements, this feature is available for the SVG renderer, only.

Type

String

Default Value

''

See

• Text#highlightCssClass
• JXG.GeometryElement#cssClass

Source

options.js, line 1706

highlightFillColor

Description

The fill color of the given geometry element when the mouse is pointed over it.

Type

String

Default Value

'none'

See

• JXG.GeometryElement#fillColor
• JXG.GeometryElement#fillOpacity
• JXG.GeometryElement#highlightFillOpacity

Source

options.js, line 2159

highlightFillOpacity

Description

Opacity for fill color when the object is highlighted.

Type

Number

Default Value

1

See

• JXG.GeometryElement#fillColor
• JXG.GeometryElement#highlightFillColor
• JXG.GeometryElement#fillOpacity

Source

options.js, line 2171

highlightStrokeColor

Description

The stroke color of the given geometry element when the user moves the mouse over it.

Type

String

Default Value

'#c3d9ff'

See

• JXG.GeometryElement#strokeColor
• JXG.GeometryElement#strokeWidth
• JXG.GeometryElement#strokeOpacity
• JXG.GeometryElement#highlightStrokeOpacity

Source

options.js, line 2183

highlightStrokeOpacity

Description

Opacity for stroke color when the object is highlighted.

Type

Number

Default Value

1

See

• JXG.GeometryElement#strokeColor
• JXG.GeometryElement#highlightStrokeColor
• JXG.GeometryElement#strokeWidth
• JXG.GeometryElement#strokeOpacity

Source

options.js, line 2196

highlightStrokeWidth

Description

Width of the element's stroke when the mouse is pointed over it.

Type

Number

Default Value

2

See

• JXG.GeometryElement#strokeColor
• JXG.GeometryElement#highlightStrokeColor
• JXG.GeometryElement#strokeOpacity
• JXG.GeometryElement#highlightStrokeOpacity
• JXG.GeometryElement#highlightFillColor

Source

options.js, line 2209

ignoreForLabelAutoposition

Description

Decides if the element should be ignored when using auto positioning for some label.

Type

boolean

Default Value

false

See

• Label#autoPosition

Source

options.js, line 2718

isLabel

Default Value

false

Source

options.js, line 2223

layer

Description

Display layer which will contain the element.

Default Value

See JXG.Options#layer

See

• JXG.Options#layer

Source

options.js, line 2232

lineCap

Description

Line endings (linecap) of a stroke element, i.e. line, circle, curve. Possible values are:

• 'butt',
• 'round',
• 'square'.

Not available for VML renderer.

Type

String

Default Value

'butt'

Source

options.js, line 2241

needsRegularUpdate

Description

If this is set to true, the element is updated in every update call of the board. If set to false, the element is updated only after zoom events or more generally, when the bounding box has been changed. Examples for the latter behavior should be axes.

Type

Boolean

Default Value

true

See

• JXG.GeometryElement#needsRegularUpdate

Source

options.js, line 2258

nonnegativeOnly

Description

If some size of an element is controlled by a function, like the circle radius or segments of fixed length, this attribute controls what happens if the value is negative. By default, the absolute value is taken. If true, the maximum of 0 and the value is used.

Type

Boolean

Default Value

false

Example

var slider = board.create('slider', [[4, -3], [4, 3], [-4, 1, 4]], { name: 'a'});
var circle = board.create('circle', [[-1, 0], 1], {
    nonnegativeOnly: true
});
circle.setRadius('a');         // Use JessieCode
var seg = board.create('segment', [[-4, 3], [0, 3], () => slider.Value()], {
    point1: {visible: true},
    point2: {visible: true},
    nonnegativeOnly: true
});

Source

options.js, line 2271

precision

Description

Precision options for JSXGraph elements. This attributes takes either the value 'inherit' or an object of the form:

precision: {
     touch: 30,
     mouse: 4,
     pen: 4
}

In the first case, the global, JSXGraph-wide values of JXGraph.Options.precision are taken.

Type

String | Object

Default Value

'inherit'

See

• JXG.Options#precision

Source

options.js, line 2316

priv

Description

A private element will be inaccessible in certain environments, e.g. a graphical user interface.

Type

Boolean

Default Value

false

Source

options.js, line 2338

rotatable

Description

Determines whether two-finger manipulation may rotate this object. If set to false, the object can only be scaled and translated.

In case the element is a polygon or line and it has the attribute "rotatable:false", moving the element with two fingers results in a rotation or translation.

If an element is set to be neither scalable nor rotatable, it can only be translated.

In case of a polygon, scaling is only possible if no vertex has snapToGrid or snapToPoints enabled and no vertex is fixed by some other constraint. Also, the polygon itself has to have snapToGrid disabled.

Type

Boolean

Default Value

true

See

• JXG.GeometryElement#scalable

Source

options.js, line 2348

scalable

Description

Determines whether two-finger manipulation of this object may change its size. If set to false, the object is only rotated and translated.

In case the element is a horizontal or vertical line having ticks, scalable:true enables zooming of the board by dragging ticks lines. This feature is enabled, for the ticks element of the line element the attribute fixed has to be false and the line element's scalable attribute has to be true.

In case the element is a polygon or line and it has the attribute scalable:false, moving the element with two fingers results in a rotation or translation.

If an element is set to be neither scalable nor rotatable, it can only be translated.

In case of a polygon, scaling is only possible if no vertex has snapToGrid or snapToPoints enabled and no vertex is fixed by some other constraint. Also, the polygon itself has to have snapToGrid disabled.

Type

Boolean

Default Value

true

See

• JXG.GeometryElement#fixed
• JXG.GeometryElement#rotatable

Source

options.js, line 2369

shadow

Description

If enabled:true the (stroke) element will get a customized shadow.

Customize color and opacity: If the object's RGB stroke color is [r,g,b] and its opacity is op, and the shadow parameters color is given as [r', g', b'] and opacity as op' the shadow will receive the RGB color

[blend*r + r', blend*g + g', blend*b + b']

and its opacity will be equal to op * op'. Further, the parameters blur and offset can be adjusted.

This attribute is only available with SVG, not with canvas.

Type

Object

Default Value

shadow: {
  enabled: false,
  color: [0, 0, 0],
  opacity: 1,
  blur: 3,
  blend: 0.1,
  offset: [5, 5]
}

Example

board.options.line.strokeWidth = 2
// No shadow
var li1 = board.create('line', [[-2, 5], [2, 6]], {strokeColor: 'red', shadow: false});

// Default shadow
var li2 = board.create('line', [[-2, 3], [2, 4]], {strokeColor: 'red', shadow: true});

// No shadow
var li3 = board.create('line', [[-2, 1], [2, 2]], {strokeColor: 'blue', shadow: {enabled: false}});

// Shadow uses same color as line
var li4 = board.create('line', [[-2, -1], [2, 0]], {strokeColor: 'blue',
            shadow: {enabled: true, color: '#000000', blend: 1}
        });

// Shadow color as a mixture between black and the line color, additionally set opacity
var li5 = board.create('line', [[-2, -3], [2, -2]], {strokeColor: 'blue',
            shadow: {enabled: true, color: '#000000', blend: 0.5, opacity: 0.5}
        });

// Use different value for blur and offset [dx, dy]
var li6 = board.create('line', [[-2, -5], [2, -4]], {strokeColor: 'blue',
            shadow: {enabled: true, offset:[0, 25], blur: 6}
        });

Source

options.js, line 2396

snapToGrid

Description

Snaps the element or its parents to the grid. Currently only relevant for points, circles, and lines. Points are snapped to grid directly, on circles and lines it's only the parent points that are snapped

Type

Boolean

Default Value

false

Source

options.js, line 2493

strokeColor

Description

The stroke color of the given geometry element.

Type

String

Default Value

JXG.palette.blue

See

• JXG.GeometryElement#highlightStrokeColor
• JXG.GeometryElement#strokeWidth
• JXG.GeometryElement#strokeOpacity
• JXG.GeometryElement#highlightStrokeOpacity

Source

options.js, line 2504

strokeOpacity

Description

Opacity for element's stroke color.

Type

Number

Default Value

1

See

• JXG.GeometryElement#strokeColor
• JXG.GeometryElement#highlightStrokeColor
• JXG.GeometryElement#strokeWidth
• JXG.GeometryElement#highlightStrokeOpacity

Source

options.js, line 2517

strokeWidth

Description

Width of the element's stroke.

Type

Number

Default Value

2

See

• JXG.GeometryElement#strokeColor
• JXG.GeometryElement#highlightStrokeColor
• JXG.GeometryElement#strokeOpacity
• JXG.GeometryElement#highlightStrokeOpacity

Source

options.js, line 2530

tabindex

Description

Controls if an element can get the focus with the tab key. tabindex corresponds to the HTML attribute of the same name. See description at MDN. The additional value "null" completely disables focus of an element. The value will be ignored if keyboard control of the board is not enabled or if the element is not visible.

Type

Number

Default Value

-1

See

• JXG.Board#keyboard
• JXG.GeometryElement#fixed
• JXG.GeometryElement#visible

Source

options.js, line 2543

trace

Description

If true the element will be traced, i.e. on every movement the element will be copied to the background. Use JXG.GeometryElement#clearTrace to delete the trace elements.

The calling of element.setAttribute({trace:false}) additionally deletes all traces of this element. By calling element.setAttribute({trace:'pause'}) the removal of already existing traces can be prevented.

The visual appearance of the trace can be influenced by JXG.GeometryElement#traceAttributes.

Type

Boolean | String

Default Value

false

See

• JXG.GeometryElement#clearTrace
• JXG.GeometryElement#traces
• JXG.GeometryElement#numTraces
• JXG.GeometryElement#traceAttributes

Source

options.js, line 2561

traceAttributes

Description

Extra visual attributes for traces of an element

Type

Object

Default Value

{}

See

• JXG.GeometryElement#trace

Example

JXG.Options.elements.traceAttributes = {
    size: 2
};

const board = JXG.JSXGraph.initBoard(BOARDID, {
    boundingbox: [-4, 4, 4, -4],
    keepaspectratio: true
});

var p = board.create('point', [0.0, 2.0], {
    trace: true,
    size: 10,
    traceAttributes: {
        color: 'black',
        face: 'x'
    }
});

Source

options.js, line 2583

transitionDuration

Description

Transition duration (in milliseconds) for certain changes of properties like color and opacity. The properties can be set in the attribute transitionProperties Works in SVG renderer, only.

Type

Number

Default Value

100 JXG.Options.elements#transitionDuration

See

• JXG.GeometryElement#transitionProperties
• JXG.GeometryElement#strokeColor
• JXG.GeometryElement#highlightStrokeColor
• JXG.GeometryElement#strokeOpacity
• JXG.GeometryElement#highlightStrokeOpacity
• JXG.GeometryElement#fillColor
• JXG.GeometryElement#highlightFillColor
• JXG.GeometryElement#fillOpacity
• JXG.GeometryElement#highlightFillOpacity

Source

options.js, line 2635

transitionProperties

Description

Attributes which change smoothly in the time set in transitionDuration. Possible values are ['fill', 'fill-opacity', 'stroke', 'stroke-opacity', 'stroke-width', 'width', 'height', 'rx', 'ry'] (and maybe more) for geometry elements and ['color', 'opacity', 'all'] for HTML texts.

Type

Array

See

• JXG.GeometryElement#transitionDuration

Example

var p1 = board.create("point", [0, 2], {
    name: "A",
    highlightStrokeWidth: 10,
    transitionDuration: 1000,
    transitionProperties: ['width', 'height', 'stroke-width',
        'fill', 'fill-opacity', 'rx', 'ry', 'stroke', 'stroke-opacity'] });

Source

options.js, line 2655

visible

Description

If false the element won't be visible on the board, otherwise it is shown.

Type

Boolean

Default Value

true

See

• JXG.GeometryElement#hideElement
• JXG.GeometryElement#showElement

Source

options.js, line 2696

withLabel

Description

If true a label will display the element's name. Using this to suppress labels is more efficient than visible:false.

Type

Boolean

Default Value

false

Source

options.js, line 2707

Inherited

Own

(constant) _org_type : Number

Description

Original type of the element at construction time. Used for removing glider property.

Type

Number

Source

base/element.js, line 326

(private) _pos : Number

Description

The position of this element inside the JXG.Board#objectsList.

Type

Number

Default Value

-1

Source

base/element.js, line 228

ancestors : Object

Description

Elements on which this element depends on are stored here.

Type

Object

Source

base/element.js, line 150

(private) baseElement : JXG.GeometryElement

Type

JXG.GeometryElement

Default Value

null

Source

base/element.js, line 138

board : JXG.Board

Description

Reference to the board associated with the element.

Type

JXG.Board

Source

base/element.js, line 312

childElements : Object

Description

Stores all dependent objects to be updated when this point is moved.

Type

Object

Source

base/element.js, line 87

descendants : Object

Description

Elements depending on this element are stored here.

Type

Object

Source

base/element.js, line 144

dump : Boolean

Description

The element is saved with an explicit entry in the file (true) or implicitly via a composition.

Type

Boolean

Default Value

true

Source

base/element.js, line 207

elType : String

Description

The string used with JXG.Board#create

Type

String

Source

base/element.js, line 199

(constant) elementClass : Number

Description

The element's class.

Type

Number

Source

base/element.js, line 333

hasLabel : Boolean

Description

If element has a label subelement then this property will be set to true.

Type

Boolean

Default Value

false

Source

base/element.js, line 94

highlighted : Boolean

Description

True, if the element is currently highlighted.

Type

Boolean

Default Value

false

Source

base/element.js, line 101

id : String

Description

Unique identifier for the element. Equivalent to id-attribute of renderer element.

Type

String

Source

base/element.js, line 339

inherits : Object

Description

Inherits contains the subelements, which may have an attribute (in particular the attribute 'visible') having value 'inherit'.

Type

Object

Source

base/element.js, line 220

isDraggable : Boolean

Description

Controls if this element can be dragged. In GEONExT only free points and gliders can be dragged.

Type

Boolean

Default Value

false

Source

base/element.js, line 74

isReal : Boolean

Description

If element is in two dimensional real space this is true, else false.

Type

Boolean

Default Value

true

Source

base/element.js, line 81

lastDragTime : Date

Description

Time stamp containing the last time this element has been dragged.

Type

Date

Default Value

creation time

Source

base/element.js, line 303

methodMap : Object

Description

The methodMap determines which methods can be called from within JessieCode and under which name it can be used. The map is saved in an object, the name of a property is the name of the method used in JessieCode, the value of a property is the name of the method in JavaScript.

Type

Object

Source

base/element.js, line 2639

mouseover : Boolean

Description

Is the mouse over this element?

Type

Boolean

Default Value

false

Source

base/element.js, line 296

name : String

Description

Not necessarily unique name for the element.

Type

String

Default Value

Name generated by JXG.Board#generateName.

See

• JXG.Board#generateName

Source

base/element.js, line 357

needsUpdate : Boolean

Description

Controls if updates are necessary

Type

Boolean

Default Value

true

Source

base/element.js, line 66

notExistingParents : Object

Description

Stores all Intersection Objects which in this moment are not real and so hide this element.

Type

Object

Source

base/element.js, line 108

numTraces : Number

Description

Counts the number of objects drawn as part of the trace of the element.

Type

Number

See

• JXG.GeometryElement#clearTrace
• JXG.GeometryElement#traces

Source

base/element.js, line 124

parents : Object

Description

Ids of elements on which this element depends directly are stored here.

Type

Object

Source

base/element.js, line 156

quadraticform : Array

Description

Quadratic form representation of circles (and conics)

Type

Array

Default Value

[[1,0,0],[0,1,0],[0,0,1]]

Source

base/element.js, line 261

rendNode : Object

Description

Stores the SVG (or VML) rendering node for the element. This enables low-level access to SVG nodes. The properties of such an SVG node can then be changed by calling setAttribute(). Note that there are a few elements which consist of more than one SVG nodes:

• Elements with arrow tail or head: rendNodeTriangleStart, rendNodeTriangleEnd
• SVG (or VML) texts: rendNodeText
• Button: rendNodeForm, rendNodeButton, rendNodeTag
• Checkbox: rendNodeForm, rendNodeCheckbox, rendNodeLabel, rendNodeTag
• Input: rendNodeForm, rendNodeInput, rendNodeLabel, rendNodeTag

Here is are two examples: The first example shows how to access the SVG node, the second example demonstrates how to change SVG attributes.

Type

Object

Examples

var p1 = board.create('point', [0, 0]);
    console.log(p1.rendNode);
    // returns the full SVG node details of the point p1, something like:
    // <ellipse id='box_jxgBoard1P6' stroke='#ff0000' stroke-opacity='1' stroke-width='2px'
    //   fill='#ff0000' fill-opacity='1' cx='250' cy='250' rx='4' ry='4'
    //   style='position: absolute;'>
    // </ellipse>

var s = board.create('segment', [p1, p2], {strokeWidth: 60});
    s.rendNode.setAttribute('stroke-linecap', 'round');

Source

base/element.js, line 193

stdform : Array

Description

[c, b0, b1, a, k, r, q0, q1]

See A.E. Middleditch, T.W. Stacey, and S.B. Tor: "Intersection Algorithms for Lines and Circles", ACM Transactions on Graphics, Vol. 8, 1, 1989, pp 25-40.

The meaning of the parameters is: Circle: points p=[p0, p1] on the circle fulfill a<p, p> + <b, p> + c = 0 For convenience we also store r: radius k: discriminant = sqrt(<b,b>-4ac) q=[q0, q1] center

Points have radius = 0. Lines have radius = infinity. b: normalized vector, representing the direction of the line.

Should be put into Coords, when all elements possess Coords.

Type

Array

Default Value

[1, 0, 0, 0, 1, 1, 0, 0]

Source

base/element.js, line 254

subs : Object

Description

Subs contains the subelements, created during the create method.

Type

Object

Source

base/element.js, line 213

symbolic : Object

Description

Stores variables for symbolic computations

Type

Object

Source

base/element.js, line 162

traces : Object

Description

Keeps track of all objects drawn as part of the trace of the element.

Type

Object

See

• JXG.GeometryElement#clearTrace
• JXG.GeometryElement#numTraces

Source

base/element.js, line 116

transformations : Array

Description

Stores the transformations which are applied during update in an array

Type

Array

See

• JXG.Transformation

Source

base/element.js, line 131

(constant) type : Number

Description

Type of the element.

Type

Number

Source

base/element.js, line 319

visProp : Object

Description

An associative array containing all attributes.

Type

Object

Default Value

empty object

Source

base/element.js, line 272

visPropCalc : Object

Description

An associative array containing attributes which are calculated from the attribute values (i.e. visProp) and from other constraints. An example: if an intersection point does not have real coordinates, visPropCalc.visible is set to false. Additionally, the user can control visibility with the attribute "visible", even by supplying a functions as value.

Type

Object

Default Value

empty object

Source

base/element.js, line 285

Inherited

Own

// Movable function graph
var A = board.create('point', [1, 0], {name:'A'}),
    B = board.create('point', [3, 1], {name:'B'}),
    f = board.create('functiongraph', function(x) {
         var ax = A.X(),
             ay = A.Y(),
             bx = B.X(),
             by = B.Y(),
             a = (by - ay) / ( (bx - ax) * (bx - ax) );
          return a * (x - ax) * (x - ax) + ay;
     }, {fixed: false});
f.addParents([A, B]);

// Set attribute directly on creation of an element using the attributes object parameter
var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-1, 5, 5, 1]};
var p = board.create('point', [2, 2], {visible: false});

// Now make this point visible and fixed:
p.setAttribute({
    fixed: true,
    visible: true
});

// Move one of the points 'A' or ''B' to make
  // their midpoint visible.
  const point1 = board.create("point", [-3, 1]);
  const point2 = board.create("point", [2,  1]);
  var mid = board.create("midpoint", [point1, point2]);
  const point3 = board.create("point", [-0.5, 1], {size: 10, color: 'blue'});

  mid.coords.on('update', function() {
      mid.toTopOfLayer();
  });
  point3.coords.on('update', function() {
      point3.toTopOfLayer();
  });

Inherited

Own

Inherited