Line

2008-11-24T14:00:51Z

PW: /* Construction of a line */

== Construction of a line ==
A line needs two points. Lets construct two points "A" and "B".
<source lang="javascript">
var b = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 100, unitX: 50, unitY: 50});
var p1 = b.createElement('point',[-1,1], {name:'A',style:6});
var p2 = b.createElement('point',[2,-1], {name:'B',style:6});
</source>
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">
var li = b.createElement('line',["A","B"], {strokeColor:'#00ff00',strokeWidth:2});
</source>

<html>
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script>
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
<div id="jxgbox" class="jxgbox" style="width:500px; height:200px; position:relative;"></div>
<script type="text/javascript">
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.
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">
var li2 = b.createElement('line',[p1,p2],
{straightFirst:false, straightLast:false, strokeWidth:2, dash:2});
</source>

<html>
<div id="jxgbox2" class="jxgbox" style="width:500px; height:200px; position:relative;"></div>
<script type="text/javascript">
var brd2 = JXG.JSXGraph.initBoard('jxgbox2', {originX: 200, originY: 100, unitX: 50, unitY: 50});
var p1 = brd2.createElement('point',[-1,1], {name:'A',style:6});
var p2 = brd2.createElement('point',[2,-1], {name:'B',style:6});
var li2 = brd2.createElement('line',[p1,p2], {straightFirst:false, straightLast:false, strokeWidth:2, dash:2});
</script>
</html>

[[Category:Examples]]

JSXGraph Wiki - User contributions [en]

Line