# Difference between revisions of "Line"

From JSXGraph Wiki

Jump to navigationJump to searchA WASSERMANN (talk | contribs) |
|||

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 = b. | + | var p1 = b.create('point',[-1,1], {name:'A',size:4}); |

− | var p2 = b. | + | 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 = b. | + | 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. | ||

Line 27: | Line 22: | ||

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

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

{straightFirst:false, straightLast:false, strokeWidth:2, dash:2}); | {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> | |

− | |||

− | </ | ||

− | |||

− | Here are some of the options that can be used with lines. | + | 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" | {| cellpadding="8" cellspacing="0" border="1" | ||

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

## Revision as of 10:31, 8 June 2011

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

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