Line: Difference between revisions
From JSXGraph Wiki
| No edit summary | mNo edit summary | ||
| Line 3: | Line 3: | ||
| <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', {originX: 200, originY: 100, unitX: 50, unitY: 50}); | ||
| var p1 =  | var p1 = b.createElement('point',[-1,1], {name:'A',style:6}); | ||
| var p2 =  | var p2 = b.createElement('point',[2,-1], {name:'B',style:6}); | ||
| </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.createElement('line',["A","B"], {strokeColor:'#00ff00',strokeWidth:2}); | ||
| </source> | </source> | ||
| Line 28: | Line 28: | ||
| <source lang="javascript"> | <source lang="javascript"> | ||
| var li2 =  | var li2 = b.createElement('line',[p1,p2],   | ||
|   {straightFirst:false, straightLast:false, strokeWidth:2, dash:2}); |   {straightFirst:false, straightLast:false, strokeWidth:2, dash:2}); | ||
| </source> | </source> | ||
Revision as of 09:57, 21 October 2008
Construction of a line
A line needs two points. Lets construct two points "A" and "B".
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});
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.createElement('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.createElement('line',[p1,p2], 
 {straightFirst:false, straightLast:false, strokeWidth:2, dash:2});