# Difference between revisions of "Line"

From JSXGraph Wiki

Jump to navigationJump to search (Added that 'line' also accepts an array of two numbers, [x,y], as input for each of the points.) |
|||

(10 intermediate revisions by 5 users not shown) | |||

Line 2: | Line 2: | ||

A line needs two points. Lets construct two points "A" and "B". | A line needs two points. Lets construct two points "A" and "B". | ||

<source lang="javascript"> | <source lang="javascript"> | ||

− | var b = JXG.JSXGraph.initBoard('jxgbox', { | + | var b = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5, 2, 5, -2]}); |

− | var p1 = | + | var p1 = b.create('point',[-1,1], {name:'A',size:4}); |

− | var p2 = | + | var p2 = b.create('point',[2,-1], {name:'B',size:4}); |

</source> | </source> | ||

Then we construct a line through "A" and "B". The setting of a new color and changing the stroke-width is not necessary. | Then we construct a line through "A" and "B". The setting of a new color and changing the stroke-width is not necessary. | ||

<source lang="javascript"> | <source lang="javascript"> | ||

− | var li = | + | var li = b.create('line',["A","B"], {strokeColor:'#00ff00',strokeWidth:2}); |

</source> | </source> | ||

− | < | + | <jsxgraph box="jxgbox" width="500" height="200"> |

− | + | var b = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5, 2, 5, -2]}); | |

− | + | var p1 = b.create('point',[-1,1], {name:'A',size:4}); | |

− | + | var p2 = b.create('point',[2,-1], {name:'B',size:4}); | |

− | + | var li = b.createElement('line',["A","B"], {strokeColor:'#00ff00',strokeWidth:2}); | |

− | + | </jsxgraph> | |

− | |||

− | |||

− | |||

− | |||

− | </ | ||

− | |||

Generally it is better to use JavaScript variables and not Geometry-Element names when constructing. | Generally it is better to use JavaScript variables and not Geometry-Element names when constructing. | ||

− | Now, we do the same examples with JavaScript variables. Further, we don't show the whole line, but only a segment. To show another | + | Now, we do the same examples with JavaScript variables. Further, we don't show the whole line, but only a segment. To show another variation, we use a dashed line style. |

<source lang="javascript"> | <source lang="javascript"> | ||

− | var li2 = | + | var li2 = b.create('line',[p1,p2], |

+ | {straightFirst:false, straightLast:false, strokeWidth:2, dash:2}); | ||

</source> | </source> | ||

− | < | + | <jsxgraph box="jxgbox2" width="500" height="200"> |

− | + | var b2 = JXG.JSXGraph.initBoard('jxgbox2', {boundingbox: [-5, 2, 5, -2]}); | |

− | + | var p1 = b2.create('point',[-1,1], {name:'A',size:4}); | |

− | + | var p2 = b2.create('point',[2,-1], {name:'B',size:4}); | |

− | + | var li2 = b2.create('line',[p1,p2], {straightFirst:false, straightLast:false, strokeWidth:2, dash:2}); | |

− | + | </jsxgraph> | |

− | + | ||

− | </ | + | |

− | </html> | + | "Line" also accepts point coordinates as input, so you can create a line without having to declare the points separately. |

+ | |||

+ | <source lang="javascript"> | ||

+ | var li3 = b3.create('line',[[-1,1],[2,-1]], {straightFirst:false, straightLast:false, strokeWidth:2}); | ||

+ | </source> | ||

+ | |||

+ | <jsxgraph box="jxgbox3" width="500" height="200"> | ||

+ | var b3 = JXG.JSXGraph.initBoard('jxgbox3', {boundingbox: [-5, 2, 5, -2]}); | ||

+ | var li3 = b3.create('line',[[-1,1],[2,-1]], {straightFirst:false, straightLast:false, strokeWidth:2}); | ||

+ | </jsxgraph> | ||

+ | |||

+ | |||

+ | |||

+ | Here are some of the options that can be used with lines. A complete list can be found on our [http://jsxgraph.uni-bayreuth.de/docs/symbols/Line.html Line reference page]. | ||

+ | {| cellpadding="8" cellspacing="0" border="1" | ||

+ | ! Attribute !! Type !! Effect | ||

+ | |- | ||

+ | | strokeColor || HTML colorstring || Colors the line in the color specified. | ||

+ | |- | ||

+ | | highlightStrokeColor || HTML colorstring || Colors the line, when moused over, in the color specified. If same as strokeColor , removes highlighting. | ||

+ | |- | ||

+ | | strokeColorOpacity || float || Colors the line with the given opacity. Must be between 0 and 1.<br>0: Line is fully transparent.<br>1: Line is not transparent. | ||

+ | |- | ||

+ | | highlightStrokeColorOpacity || float || Colors the line, when moused over, with the given opacity. Must be between 0 and 1.<br>0: Line is fully transparent.<br>1: Line is not transparent. | ||

+ | |- | ||

+ | | dash || int || Creates a dashed line. Value must be between 0 and 6. <br> 0: solid line<br> 1: dotted line<br>2: line with small dashes<br>3: line with normal dashes<br>4: line with long dashes<br>5: line with alternating medium and big dashes and large gaps<br>6: line with alternating medium and big dashes and small gaps | ||

+ | |- | ||

+ | | strokeWidth || int || Determines the thickness of the line | ||

+ | |- | ||

+ | | straightFirst || bool || Determines whether the line is drawn beyond the first defining point. | ||

+ | |- | ||

+ | | straightLast || bool || Determines whether the line is drawn beyond the second defining point. | ||

+ | |- | ||

+ | | firstArrow || bool || Determines whether the line has an arrow at the first defining point. | ||

+ | |- | ||

+ | | lastArrow || bool || Determines whether the line has an arrow at the second defining point. | ||

+ | |- | ||

+ | | trace || bool || Determines whether the line is traced. | ||

+ | |- | ||

+ | | shadow || bool || Determines whether the line has a shadow. | ||

+ | |- | ||

+ | | visible || bool || Determines whether the line is shown. | ||

+ | |} | ||

+ | |||

+ | |||

+ | [[Category:Examples]] |

## Latest revision as of 22:07, 30 August 2014

## Construction of a line

A line needs two points. Lets construct two points "A" and "B".

```
var b = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5, 2, 5, -2]});
var p1 = b.create('point',[-1,1], {name:'A',size:4});
var p2 = b.create('point',[2,-1], {name:'B',size:4});
```

Then we construct a line through "A" and "B". The setting of a new color and changing the stroke-width is not necessary.

```
var li = b.create('line',["A","B"], {strokeColor:'#00ff00',strokeWidth:2});
```

Generally it is better to use JavaScript variables and not Geometry-Element names when constructing. Now, we do the same examples with JavaScript variables. Further, we don't show the whole line, but only a segment. To show another variation, we use a dashed line style.

```
var li2 = b.create('line',[p1,p2],
{straightFirst:false, straightLast:false, strokeWidth:2, dash:2});
```

"Line" also accepts point coordinates as input, so you can create a line without having to declare the points separately.

```
var li3 = b3.create('line',[[-1,1],[2,-1]], {straightFirst:false, straightLast:false, strokeWidth:2});
```

Here are some of the options that can be used with lines. A complete list can be found on our Line reference page.

Attribute | Type | Effect |
---|---|---|

strokeColor | HTML colorstring | Colors the line in the color specified. |

highlightStrokeColor | HTML colorstring | Colors the line, when moused over, in the color specified. If same as strokeColor , removes highlighting. |

strokeColorOpacity | float | Colors the line with the given opacity. Must be between 0 and 1. 0: Line is fully transparent. 1: Line is not transparent. |

highlightStrokeColorOpacity | float | Colors the line, when moused over, with the given opacity. Must be between 0 and 1. 0: Line is fully transparent. 1: Line is not transparent. |

dash | int | Creates a dashed line. Value must be between 0 and 6. 0: solid line 1: dotted line 2: line with small dashes 3: line with normal dashes 4: line with long dashes 5: line with alternating medium and big dashes and large gaps 6: line with alternating medium and big dashes and small gaps |

strokeWidth | int | Determines the thickness of the line |

straightFirst | bool | Determines whether the line is drawn beyond the first defining point. |

straightLast | bool | Determines whether the line is drawn beyond the second defining point. |

firstArrow | bool | Determines whether the line has an arrow at the first defining point. |

lastArrow | bool | Determines whether the line has an arrow at the second defining point. |

trace | bool | Determines whether the line is traced. |

shadow | bool | Determines whether the line has a shadow. |

visible | bool | Determines whether the line is shown. |