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

Element Line

JXG.GeometryElement
   ↳ JXG.Line
         ↳ Line

This element is used to provide a constructor for a general line. A general line is given by two points. By setting additional properties a line can be used as an arrow and/or axis.

Defined in: line.js.
Extends JXG.Line.

Element Summary
Constructor Attributes Constructor Name and Description
 
Attributes Summary
Field Attributes Field Name and Description
 
Configure the arrow head at the position of its first point or the corresponding intersection with the canvas border The attribute firstArrow can be a Boolean or an object with the following sub-attributes:
{
     type: 1, // possible values are 1, 2, .
 
Attributes for the line label.
 
Configure the arrow head at the position of its second point or the corresponding intersection with the canvas border.
 
This number (pixel value) controls where infinite lines end at the canvas border.
 
Attributes for first defining point of the line.
 
Attributes for second defining point of the line.
 
Defines together with Point#snapSizeY the grid the point snaps on to.
 
Defines together with Point#snapSizeX the grid the point snaps on to.
 
If set to true, the point will snap to a grid defined by Point#snapSizeX and Point#snapSizeY.
 
If true, line stretches infinitely in direction of its first point.
 
If true, line stretches infinitely in direction of its second point.
 
Attributes for ticks of the line.
 
If set to true, Line#firstArrow is set to true and the point is visible, the arrow head will just touch the circle line of the start point of the line.
 
If set to true, Line#lastArrow is set to true and the point is visible, the arrow head will just touch the circle line of the start point of the line.
Methods borrowed from class JXG.Line:
addTransform, Direction, getAngle, getRise, getSlope, hasPoint, isHorizontal, isVertical, L, maxX, minX, setFixedLength, setLabelRelativeCoords, setStraight, Slope, updateRenderer, updateSegmentFixedLength, updateStdform, X, Y, Z
Methods borrowed from class JXG.GeometryElement:
_set, addChild, addDescendants, addParents, addParentsFromJCFunctions, addRotation, addTicks, animate, bounds, clearTrace, cloneToBackground, countChildren, createGradient, createLabel, draggable, formatNumberLocale, fullUpdate, generatePolynomial, getAttribute, getAttributes, getLabelAnchor, getName, getParents, getProperty, getSnapSizes, getTextAnchor, getType, handleSnapToGrid, hide, hideElement, noHighlight, normalize, prepareUpdate, remove, removeAllTicks, removeChild, removeDescendants, removeTicks, resolveShortcuts, setArrow, setAttribute, setDash, setDisplayRendNode, setLabel, setLabelText, setName, setParents, setPosition, setPositionDirectly, setProperty, show, showElement, snapToPoints, update, updateVisibility, useLocale
Events borrowed from class JXG.GeometryElement:
attribute, attribute:key, down, drag, keydrag, mousedown, mousedrag, mousemove, mouseout, mouseover, mouseup, move, out, over, pendown, pendrag, penup, touchdown, touchdrag, touchup, up
Element Detail
Line
This element has no direct constructor. To create an instance of this element you have to call JXG.Board#create with type "line".

Possible parent array combinations are:
{JXG.Point|array|function} point1
{JXG.Point|array|function} point2

Parent elements can be two elements either of type JXG.Point or array of numbers describing the coordinates of a point. In the latter case the point will be constructed automatically as a fixed invisible point. It is possible to provide a function returning an array or a point, instead of providing an array or a point.


{Number|function} a
{Number|function} b
{Number|function} c

A line can also be created providing three numbers. The line is then described by the set of solutions of the equation a*z+b*x+c*y = 0. For all finite points, z is normalized to the value 1. It is possible to provide three functions returning numbers, too.


{function} f

This function must return an array containing three numbers forming the line's homogeneous coordinates.

Additionally, a line can be created by providing a line and a transformation (or an array of transformations). Then, the result is a line which is the transformation of the supplied line.



Throws:
{Exception}
If the element cannot be constructed with the given parent objects an exception is thrown.
Examples:
// Create a line using point and coordinates/
// The second point will be fixed and invisible.
var p1 = board.create('point', [4.5, 2.0]);
var l1 = board.create('line', [p1, [1.0, 1.0]]);

				
				
// Create a line using three coordinates
var l1 = board.create('line', [1.0, -2.0, 3.0]);

				
				
        // Create a line (l2) as reflection of another line (l1)
        // reflection line
        var li = board.create('line', [1,1,1], {strokeColor: '#aaaaaa'});
        var reflect = board.create('transform', [li], {type: 'reflect'});

        var l1 = board.create('line', [1,-5,1]);
        var l2 = board.create('line', [l1, reflect]);


				
				
var t = board.create('transform', [2, 1.5], {type: 'scale'});
var l1 = board.create('line', [1, -5, 1]);
var l2 = board.create('line', [l1, t]);


				
				
//create line between two points
var p1 = board.create('point', [0,0]);
var p2 = board.create('point', [2,2]);
var l1 = board.create('line', [p1,p2], {straightFirst:false, straightLast:false});

				
                
Attribute Detail
{Boolean | Object} firstArrow
Configure the arrow head at the position of its first point or the corresponding intersection with the canvas border The attribute firstArrow can be a Boolean or an object with the following sub-attributes:
{
     type: 1, // possible values are 1, 2, ..., 7. Default value is 1.
     size: 6, // size of the arrow head. Default value is 6.
              // This value is multiplied with the strokeWidth of the line
              // Exception: for type=7 size is ignored
     highlightSize: 6, // size of the arrow head in case the element is highlighted. Default value
}
type=7 is the default for curves if firstArrow: true

An arrow head can be turned off with line.setAttribute({firstArrow: false}).
Defined in: options.js.

    board.options.line.lastArrow = false;
    board.options.line.firstArrow = {size: 10, highlightSize: 10};
    board.options.line.point1 = {visible: false, withLabel: true, label: {visible: true, anchorX: 'right'}};
    board.options.line.strokeWidth = 4;
    board.options.line.highlightStrokeWidth = 4;

    board.create('segment', [[-5,4], [3,4]], {firstArrow: {type: 1}, point1: {name: 'type:1'}});
    board.create('segment', [[-5,3], [3,3]], {firstArrow: {type: 2}, point1: {name: 'type:2'}});
    board.create('segment', [[-5,2], [3,2]], {firstArrow: {type: 3}, point1: {name: 'type:3'}});
    board.create('segment', [[-5,1], [3,1]], {firstArrow: {type: 4}, point1: {name: 'type:4'}});
    board.create('segment', [[-5,0], [3,0]], {firstArrow: {type: 5}, point1: {name: 'type:5'}});
    board.create('segment', [[-5,-1], [3,-1]], {firstArrow: {type: 6}, point1: {name: 'type:6'}});
    board.create('segment', [[-5,-2], [3,-2]], {firstArrow: {type: 7}, point1: {name: 'type:7'}});


					
					

						
						
						
							
See:
Line#lastArrow
Line#touchFirstPoint
Default Value:
false

{Object} label
Attributes for the line label.
Defined in: options.js.
See:
Label

{Boolean | Object} lastArrow
Configure the arrow head at the position of its second point or the corresponding intersection with the canvas border. The attribute lastArrow can be a Boolean or an object with the following sub-attributes:
{
     type: 1, // possible values are 1, 2, ..., 7. Default value is 1.
     size: 6, // size of the arrow head. Default value is 6.
              // This value is multiplied with the strokeWidth of the line.
              // Exception: for type=7 size is ignored
     highlightSize: 6, // size of the arrow head in case the element is highlighted. Default value is 6.
}
type=7 is the default for curves if lastArrow: true

An arrow head can be turned off with line.setAttribute({lastArrow: false}).
Defined in: options.js.

    var p1 = board.create('point', [-5, 2], {size:1});
    var p2 = board.create('point', [5, 2], {size:10});
    var li = board.create('segment', ['A','B'],
        {name:'seg',
         strokeColor:'#000000',
         strokeWidth:1,
         highlightStrokeWidth: 5,
         lastArrow: {type: 2, size: 8, highlightSize: 6},
         touchLastPoint: true,
         firstArrow: {type: 3, size: 8}
        });

    board.options.line.strokeWidth = 4;
    board.options.line.highlightStrokeWidth = 4;
    board.options.line.firstArrow = false;
    board.options.line.lastArrow = {size: 10, highlightSize: 10};
    board.options.line.point2 = {visible: false, withLabel: true, label: {visible: true}};

    board.create('segment', [[-5,4], [3,4]], {lastArrow: {type: 1}, point2: {name: 'type:1'}});
    board.create('segment', [[-5,3], [3,3]], {lastArrow: {type: 2}, point2: {name: 'type:2'}});
    board.create('segment', [[-5,2], [3,2]], {lastArrow: {type: 3}, point2: {name: 'type:3'}});
    board.create('segment', [[-5,1], [3,1]], {lastArrow: {type: 4}, point2: {name: 'type:4'}});
    board.create('segment', [[-5,0], [3,0]], {lastArrow: {type: 5}, point2: {name: 'type:5'}});
    board.create('segment', [[-5,-1], [3,-1]], {lastArrow: {type: 6}, point2: {name: 'type:6'}});
    board.create('segment', [[-5,-2], [3,-2]], {lastArrow: {type: 7}, point2: {name: 'type:7'}});


					
					

						
						
						
							
See:
Line#firstArrow
Line#touchLastPoint
Default Value:
false

{Number} margin
This number (pixel value) controls where infinite lines end at the canvas border. If zero, the line ends exactly at the border, if negative there is a margin to the inside, if positive the line ends outside of the canvas (which is invisible).
Defined in: options.js.
Default Value:
0

{Point} point1
Attributes for first defining point of the line.
Defined in: options.js.

{Point} point2
Attributes for second defining point of the line.
Defined in: options.js.

{Number} snapSizeX
Defines together with Point#snapSizeY the grid the point snaps on to. The point will only snap on integer multiples to snapSizeX in x and snapSizeY in y direction. If this value is equal to or less than 0, it will use the grid displayed by the major ticks of the default ticks of the default x axes of the board.
Defined in: options.js.
See:
Point#snapToGrid
Point#snapSizeY
JXG.Board#defaultAxes
Default Value:
1

{Number} snapSizeY
Defines together with Point#snapSizeX the grid the point snaps on to. The point will only snap on integer multiples to snapSizeX in x and snapSizeY in y direction. If this value is equal to or less than 0, it will use the grid displayed by the major ticks of the default ticks of the default y axes of the board.
Defined in: options.js.
See:
Point#snapToGrid
Point#snapSizeX
JXG.Board#defaultAxes
Default Value:
1

{Boolean} snapToGrid
If set to true, the point will snap to a grid defined by Point#snapSizeX and Point#snapSizeY.
Defined in: options.js.
See:
Point#snapSizeX
Point#snapSizeY
Default Value:
false

{Boolean} straightFirst
If true, line stretches infinitely in direction of its first point. Otherwise it ends at point1.
Defined in: options.js.
See:
Line#straightLast
Default Value:
true

{Boolean} straightLast
If true, line stretches infinitely in direction of its second point. Otherwise it ends at point2.
Defined in: options.js.
See:
Line#straightFirst
Default Value:
true

{Object} ticks
Attributes for ticks of the line.
Defined in: options.js.
See:
Ticks

{Boolean} touchFirstPoint
If set to true, Line#firstArrow is set to true and the point is visible, the arrow head will just touch the circle line of the start point of the line.
Defined in: options.js.
See:
Line#firstArrow
Default Value:
false

{Boolean} touchLastPoint
If set to true, Line#lastArrow is set to true and the point is visible, the arrow head will just touch the circle line of the start point of the line.
Defined in: options.js.
See:
Line#firstArrow
Default Value:
false

Attributes borrowed from other Elements
Attributes borrowed from class JXG.GeometryElement:
dash, dashScale, draft, dragToTopOfLayer, fillColor, fillOpacity, fixed, frozen, gradient, gradientAngle, gradientCX, gradientCY, gradientEndOffset, gradientFR, gradientFX, gradientFY, gradientR, gradientSecondColor, gradientSecondOpacity, gradientStartOffset, highlight, highlightFillColor, highlightFillOpacity, highlightStrokeColor, highlightStrokeOpacity, highlightStrokeWidth, isLabel, layer, lineCap, needsRegularUpdate, precision, priv, rotatable, scalable, shadow, strokeColor, strokeOpacity, strokeWidth, tabindex, trace, traceAttributes, transitionDuration, transitionProperties, viewport, visible, withLabel

Fields borrowed from other Elements
Fields borrowed from class JXG.Line:
defaultTicks, parentPolygon
Fields borrowed from class JXG.GeometryElement:
_org_type, _pos, ancestors, baseElement, board, childElements, descendants, dump, elementClass, elType, hasLabel, highlighted, id, inherits, isDraggable, isReal, lastDragTime, methodMap, mouseover, name, needsUpdate, notExistingParents, numTraces, parents, quadraticform, rendNode, stdform, subs, symbolic, traces, transformations, type, visProp, visPropCalc

Methods borrowed from other Elements
Methods borrowed from class JXG.Line:
addTransform, Direction, getAngle, getRise, getSlope, hasPoint, isHorizontal, isVertical, L, maxX, minX, setFixedLength, setLabelRelativeCoords, setStraight, Slope, updateRenderer, updateSegmentFixedLength, updateStdform, X, Y, Z
Methods borrowed from class JXG.GeometryElement:
_set, addChild, addDescendants, addParents, addParentsFromJCFunctions, addRotation, addTicks, animate, bounds, clearTrace, cloneToBackground, countChildren, createGradient, createLabel, draggable, formatNumberLocale, fullUpdate, generatePolynomial, getAttribute, getAttributes, getLabelAnchor, getName, getParents, getProperty, getSnapSizes, getTextAnchor, getType, handleSnapToGrid, hide, hideElement, noHighlight, normalize, prepareUpdate, remove, removeAllTicks, removeChild, removeDescendants, removeTicks, resolveShortcuts, setArrow, setAttribute, setDash, setDisplayRendNode, setLabel, setLabelText, setName, setParents, setPosition, setPositionDirectly, setProperty, show, showElement, snapToPoints, update, updateVisibility, useLocale

Events borrowed from other Elements
Events borrowed from class JXG.GeometryElement:
attribute, attribute:key, down, drag, keydrag, mousedown, mousedrag, mousemove, mouseout, mouseover, mouseup, move, out, over, pendown, pendrag, penup, touchdown, touchdrag, touchup, up
Documentation generated by JsDoc Toolkit 2.4.0 on Fri Mar 08 2024 12:21:02 GMT+0100 (Mitteleuropäische Normalzeit)