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.
Constructor Attributes | Constructor Name and Description |
---|---|
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
In case firstArrow is an object it has the sub-attributes:
{ type: 1, // possible values are 1, 2, . |
|
Attributes for the line label.
|
|
Configute the arrow head at the position of its second point or the corresponding
intersection with the canvas border.
|
|
Line endings (linecap) of a straight line.
|
|
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 and Line#firstArrow is set to true, the arrow head will just touch
the circle line of the start point of the line.
|
|
If set to true and Line#lastArrow is set to true, the arrow head will just touch
the circle line of the start point of the line.
|
- Methods borrowed from class JXG.Line:
- addTransform, generatePolynomial, getAngle, getRise, getSlope, hasPoint, L, maxX, minX, setLabelRelativeCoords, setStraight, 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, fullUpdate, getAttribute, getAttributes, getLabelAnchor, getName, getParents, getProperty, getSnapSizes, getTextAnchor, getType, handleSnapToGrid, hide, hideElement, labelColor, 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
- 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
In case firstArrow is an object it has the sub-attributes:
Defined in: options.js.
{ 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
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'}});
- Default Value:
- false
{Label}
label
Attributes for the line label.
Defined in: options.js.
Defined in: options.js.
{Boolean / Object}
lastArrow
Configute the arrow head at the position of its second point or the corresponding
intersection with the canvas border.
In case lastArrow is an object it has the sub-attributes:
Defined in: options.js.
{ 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
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'}});
- Default Value:
- false
{String}
lineCap
Line endings (linecap) of a straight line.
Possible values are:
Defined in: options.js.
- 'butt',
- 'round',
- 'square'.
Defined in: options.js.
- Default Value:
- 'butt'
{Point}
point1
Attributes for first defining point of the line.
Defined in: options.js.
Defined in: options.js.
{Point}
point2
Attributes for second defining point of the line.
Defined in: options.js.
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.
Defined in: options.js.
- 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.
Defined in: options.js.
- 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.
Defined in: options.js.
- 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.
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.
Defined in: options.js.
- See:
- Line#straightFirst
- Default Value:
- true
{Ticks}
ticks
Attributes for ticks of the line.
Defined in: options.js.
Defined in: options.js.
{Boolean}
touchFirstPoint
If set to true and Line#firstArrow is set to true, the arrow head will just touch
the circle line of the start point of the line.
Defined in: options.js.
Defined in: options.js.
- See:
- Line#firstArrow
- Default Value:
- false
{Boolean}
touchLastPoint
If set to true and Line#lastArrow is set to true, the arrow head will just touch
the circle line of the start point of the line.
Defined in: options.js.
Defined in: options.js.
- See:
- Line#firstArrow
- Default Value:
- false
Attributes borrowed from other Elements
- Attributes borrowed from class JXG.GeometryElement:
- dash, draft, dragToTopOfLayer, fillColor, fillOpacity, fixed, frozen, gradient, gradientAngle, gradientCX, gradientCY, gradientEndOffset, gradientFR, gradientFX, gradientFY, gradientR, gradientSecondColor, gradientSecondOpacity, gradientStartOffset, highlight, highlightFillColor, highlightFillOpacity, highlightStrokeColor, highlightStrokeOpacity, highlightStrokeWidth, needsRegularUpdate, precision, 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, generatePolynomial, getAngle, getRise, getSlope, hasPoint, L, maxX, minX, setLabelRelativeCoords, setStraight, 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, fullUpdate, getAttribute, getAttributes, getLabelAnchor, getName, getParents, getProperty, getSnapSizes, getTextAnchor, getType, handleSnapToGrid, hide, hideElement, labelColor, 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
Events borrowed from other Elements