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

A general line is given by two points or three coordinates. 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
 
Line
Attributes Summary
Field Attributes Field Name and Description
 
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, .
 
label
Attributes for the line label.
 
lastArrow
Configure the arrow head at the position of its second point or the corresponding intersection with the canvas border.
 
margin
This number (pixel value) controls where infinite lines end at the canvas border.
 
point1
Attributes for first defining point of the line.
 
point2
Attributes for second defining point of the line.
 
snapSizeX
Defines together with Point#snapSizeY the grid the point snaps on to.
 
snapSizeY
Defines together with Point#snapSizeX the grid the point snaps on to.
 
snapToGrid
If set to true, the point will snap to a grid defined by Point#snapSizeX and Point#snapSizeY.
 
straightFirst
If true, line stretches infinitely in direction of its first point.
 
straightLast
If true, line stretches infinitely in direction of its second point.
 
ticks
Attributes for ticks of the line.
 
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.
 
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.
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, eval, evalVisProp, 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: 
aria, cssClass, dash, dashScale, draft, dragToTopOfLayer, element3D, fillColor, fillOpacity, fixed, frozen, gradient, gradientAngle, gradientCX, gradientCY, gradientEndOffset, gradientFR, gradientFX, gradientFY, gradientR, gradientSecondColor, gradientSecondOpacity, gradientStartOffset, highlight, highlightCssClass, highlightFillColor, highlightFillOpacity, highlightStrokeColor, highlightStrokeOpacity, highlightStrokeWidth, isLabel, layer, lineCap, needsRegularUpdate, nonnegativeOnly, precision, priv, rotatable, scalable, shadow, strokeColor, strokeOpacity, strokeWidth, tabindex, trace, traceAttributes, transitionDuration, transitionProperties, 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, eval, evalVisProp, 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 Apr 04 2025 09:22:41 GMT+0200 (Mitteleuropäische Sommerzeit)