Polygon: Difference between revisions

From JSXGraph Wiki
No edit summary
No edit summary
 
(10 intermediate revisions by 2 users not shown)
Line 3: Line 3:
<source lang="javascript">
<source lang="javascript">
var b1 = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-4, 2, 6, -4]});
var b1 = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-4, 2, 6, -4]});
var p1 = b1.create('point',[0,0], {name:'X',size:4});
var p1 = b1.create('point',[0,0], {name:'X', size:4});
var p2 = b1.create('point',[2,-1], {name:'B',size:4});
var p2 = b1.create('point',[2,-1], {name:'B', size:4});
var p3 = b1.create('point',[-2,-3], {name:'C',size:4});
var p3 = b1.create('point',[-2,-3], {name:'C', size:4});
var p4 = b1.create('point',[-1,-1], {name:'D',size:4});
var p4 = b1.create('point',[-1,-1], {name:'D', size:4});
var p5 = b1.create('point',[3,1], {name:'E',size:4});
var p5 = b1.create('point',[3,1], {name:'E', size:4});
</source>
</source>
Note that the "style" option is optional as is the parameter "name".
Note that the "size" attribute is optional as is the attribute "name".
Next we create a polygon through these five points "A" to "E".
Next we create a polygon through these five points "A" to "E".
<source lang="javascript">
<source lang="javascript">
var poly = b.create('polygon',["X","B","C","D","E"]);
var poly = b1.create('polygon',["X","B","C","D","E"], { borders:{strokeColor:'black'} });
</source>
</source>
Of course we can also use the JavaScript objects p1 to p5:
Of course we can also use the JavaScript objects p1 to p5:
<source lang="javascript">
<source lang="javascript">
var poly = b.createElement('polygon',[p1,p2,p3,p4,p5]);
var poly = b1.create('polygon',[p1,p2,p3,p4,p5], { borders:{strokeColor:'black'} });
</source>
</source>
The result is the same:
The result is the same:
Line 27: Line 27:
var p5 = b1.create('point',[3,1], {name:'E',size:4});
var p5 = b1.create('point',[3,1], {name:'E',size:4});


var poly = b1.create('polygon',[p1,p2,p3,p4,p5]);
var poly = b1.create('polygon',[p1,p2,p3,p4,p5], { borders:{strokeColor:'black'} });
</jsxgraph>
</jsxgraph>




[[Category:Examples]]
[[Category:Examples]]

Latest revision as of 12:35, 23 June 2020

Polygon defined by existing points

To construct a polygon an array of already constructed points is required. So we first have to construct at least three points:

var b1 = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-4, 2, 6, -4]});
var p1 = b1.create('point',[0,0], {name:'X', size:4});
var p2 = b1.create('point',[2,-1], {name:'B', size:4});
var p3 = b1.create('point',[-2,-3], {name:'C', size:4});
var p4 = b1.create('point',[-1,-1], {name:'D', size:4});
var p5 = b1.create('point',[3,1], {name:'E', size:4});

Note that the "size" attribute is optional as is the attribute "name". Next we create a polygon through these five points "A" to "E".

var poly = b1.create('polygon',["X","B","C","D","E"], { borders:{strokeColor:'black'} });

Of course we can also use the JavaScript objects p1 to p5:

var poly = b1.create('polygon',[p1,p2,p3,p4,p5], { borders:{strokeColor:'black'} });

The result is the same: