Line - Documentation

Usage (signatures)

board.create('line', [point1, point2]);

Create a line from two points, coordinate arrays or functions.

In the latter two cases 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.

Parameters

Name	Type	Description
`point1`	PointLike	First point
`point2`	PointLike	Second point

Examples

Two points

// 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]]);

Line displayed as segment

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});

board.create('line', [a, b, c]);

Create a line from homogeneous coordinates.

A line can also be created providing three numbers. The line is defined as the set of solutions of the equation $a\cdot z+b \cdot x+c\cdot y = 0$, i.e. a point $(z,x, y)$ is on the line $(a,b,c)$ if and only if $a\cdot z+b \cdot x+c\cdot y = 0$. In JSXGraph, for all finite points, z is normalized to the value 1.

It is possible to provide three functions returning numbers, too.

Parameters

Name	Type	Description
`a`	number \| function
`b`	number \| function
`c`	number \| function

Example

Three coordinates

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

board.create('line', [f]);

Line by one function

Parameters

Name	Type	Description
`f`	function	This function must return an array containing three numbers forming the line's homogeneous coordinates.

board.create('line', [l1, t]);

Create a line 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.

Parameters

Name	Type	Description
`l1`	Line
`t`	Transformation

Examples

New line (red) from line (blue) and transformation

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

Reflect line

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

var l1 = board.create('line', [1,-5,1], {strokeColor: 'blue'});      // Source
var l2 = board.create('line', [l1, reflectionline], {strokeColor: 'red'}); // Image

Attributes

Own

firstArrow

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, ..., 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}).

Type

Boolean | Object

Default Value

false

See

Example

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'}});

Source

options.js, line 7103

label

Description

Attributes for the line label.

Type

Object

See

Label

Source

options.js, line 7371

lastArrow

Description

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}).

Type

Boolean | Object

Default Value

false

See

Examples

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'}});

Source

options.js, line 7168

margin

Description: 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).
Type: Number
Default Value: 0
Source: options.js, line 7265

point1

Description: Attributes for first defining point of the line.
Type: Object
Overrides: JXG.Line#point1
Source: options.js, line 7307

point2

Description: Attributes for second defining point of the line.
Type: Object
Overrides: JXG.Line#point2
Source: options.js, line 7327

snapSizeX

Description

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.

Type

Number

Default Value

See

Source

options.js, line 7396

snapSizeY

Description

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.

Type

Number

Default Value

See

Source

options.js, line 7412

snapToGrid

Description

If set to true, the point will snap to a grid defined by Point#snapSizeX and Point#snapSizeY.

Type

Boolean

Overrides

JXG.Line#snapToGrid

Default Value

false

See

Source

options.js, line 7383

straightFirst

Description

If true, line stretches infinitely in direction of its first point. Otherwise it ends at point1.

Type

Boolean

Default Value

true

See

Line#straightLast

Source

options.js, line 7277

straightLast

Description

If true, line stretches infinitely in direction of its second point. Otherwise it ends at point2.

Type

Boolean

Default Value

true

See

Line#straightFirst

Source

options.js, line 7289

ticks

Description

Attributes for ticks of the line.

Type

Object

Overrides

JXG.Line#ticks

See

Ticks

Source

options.js, line 7347

touchFirstPoint

Description

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.

Type

Boolean

Default Value

false

See

Line#firstArrow

Source

options.js, line 7428

touchLastPoint

Description

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.

Type

Boolean

Default Value

false

See

Line#firstArrow

Source

options.js, line 7440

Inherited

gradientSecondOpacity

highlightStrokeOpacity

highlightStrokeWidth

ignoreForLabelAutoposition

Members

Own

none

Inherited

Methods

Own

none

Inherited

addParentsFromJCFunctions

setLabelRelativeCoords

updateSegmentFixedLength

updateStdform

updateVisibility

useLocale

Events

Own

none

Inherited

Type Definitions

LineType

Description: A line or an array of size 3 with homogenous coordinates defining the line.
Type: Line | Array.<number>
Source: jxg.js, line 170

Throws

If the element cannot be constructed with the given parent objects an exception is thrown.
Type Exception

Details

Type: JXG.Line
Source: base/line.js, line 1176

Extends

JXG.Line