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', {originX: 200, originY: 100, unitX: 50, unitY: 50});
+
var b = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5, 2, 5, -2]});
var p1 = board.createElement('point',[-1,1], {name:'A',style:6});
+
var p1 = b.create('point',[-1,1], {name:'A',size:4});
var p2 = board.createElement('point',[2,-1], {name:'B',style:6});
+
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 = brd.createElement('line',["A","B"], {strokeColor:'#00ff00',strokeWidth:2});
+
var li = b.create('line',["A","B"], {strokeColor:'#00ff00',strokeWidth:2});
 
</source>
 
</source>
  
<html>
+
<jsxgraph box="jxgbox" width="500" height="200">
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />
+
var b = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5, 2, 5, -2]});
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script>
+
var p1 = b.create('point',[-1,1], {name:'A',size:4});
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
+
var p2 = b.create('point',[2,-1], {name:'B',size:4});
<div id="jxgbox" class="jxgbox" style="width:500px; height:200px;"></div>
+
var li = b.createElement('line',["A","B"], {strokeColor:'#00ff00',strokeWidth:2});
<script type="text/javascript">
+
</jsxgraph>
var brd = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 100, unitX: 50, unitY: 50});
 
var p1 = brd.createElement('point',[-1,1], {name:'A',style:6});
 
var p2 = brd.createElement('point',[2,-1], {name:'B',style:6});
 
var li = brd.createElement('line',["A","B"], {strokeColor:'#00ff00',strokeWidth:2});
 
</script>
 
</html>
 
  
 
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 variant, we use a dashed line style.
+
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 = brd2.createElement('line',[p1,p2], {straightFirst:false, straightLast:false, strokeWidth:2});
+
var li2 = b.create('line',[p1,p2],  
 +
{straightFirst:false, straightLast:false, strokeWidth:2, dash:2});
 
</source>
 
</source>
  
<html>
+
<jsxgraph box="jxgbox2" width="500" height="200">
<div id="jxgbox2" class="jxgbox" style="width:500px; height:200px;"></div>
+
var b2 = JXG.JSXGraph.initBoard('jxgbox2', {boundingbox: [-5, 2, 5, -2]});
<script type="text/javascript">
+
var p1 = b2.create('point',[-1,1], {name:'A',size:4});
var brd2 = JXG.JSXGraph.initBoard('jxgbox2', {originX: 200, originY: 100, unitX: 50, unitY: 50});
+
var p2 = b2.create('point',[2,-1], {name:'B',size:4});
var p1 = brd2.createElement('point',[-1,1], {name:'A',style:6});
+
var li2 = b2.create('line',[p1,p2], {straightFirst:false, straightLast:false, strokeWidth:2, dash:2});
var p2 = brd2.createElement('point',[2,-1], {name:'B',style:6});
+
</jsxgraph>
var li2 = brd2.createElement('line',[p1,p2], {straightFirst:false, straightLast:false, strokeWidth:2, dash:2});
+
 
</script>
+
 
</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.