Difference between revisions of "Polygon"

From JSXGraph Wiki
Jump to navigationJump to search
(New page: == Polygon defined by existing points == One possibility to construct a polygon is to give it an array of already constructed points. So we first have to construct at least three points: <...)
 
 
(16 intermediate revisions by 3 users not shown)
Line 1: Line 1:
 
== Polygon defined by existing points ==
 
== Polygon defined by existing points ==
−
One possibility to construct a polygon is to give it an array of already constructed points. So we first have to construct at least three points:
+
To construct a polygon an array of already constructed points is required. So we first have to construct at least three points:
 
<source lang="javascript">
 
<source lang="javascript">
−
var b = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 100, unitX: 50, unitY: 50});
+
var b1 = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-4, 2, 6, -4]});
−
var p1 = b.createElement('point',[0,0], {name:'A',style:6});
+
var p1 = b1.create('point',[0,0], {name:'X', size:4});
−
var p2 = b.createElement('point',[2,-1], {name:'B',style:6});
+
var p2 = b1.create('point',[2,-1], {name:'B', size:4});
−
var p3 = b.createElement('point',[-2,-3], {name:'C',style:6});
+
var p3 = b1.create('point',[-2,-3], {name:'C', size:4});
−
var p4 = b.createElement('point',[-1,-1], {name:'D',style:6});
+
var p4 = b1.create('point',[-1,-1], {name:'D', size:4});
−
var p5 = b.createElement('point',[3,1], {name:'E',style:6});
+
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.createElement('polygon',["A","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:
−
<html>
+
<jsxgraph box="jxgbox" width="500" height="300">
−
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />
+
var b1 = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-4, 2, 6, -4]});
−
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script>
+
var p1 = b1.create('point',[0,0], {name:'X',size:4});
−
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
+
var p2 = b1.create('point',[2,-1], {name:'B',size:4});
−
<div id="jxgbox" class="jxgbox" style="width:500px; height:300px;"></div>
+
var p3 = b1.create('point',[-2,-3], {name:'C',size:4});
−
<script type="text/javascript">
+
var p4 = b1.create('point',[-1,-1], {name:'D',size:4});
−
var b1 = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 100, unitX: 50, unitY: 50});
+
var p5 = b1.create('point',[3,1], {name:'E',size:4});
−
var p1 = b1.createElement('point',[0,0], {name:'A',style:6});
 
−
var p2 = b1.createElement('point',[2,-1], {name:'B',style:6});
 
−
var p3 = b1.createElement('point',[-2,-3], {name:'C',style:6});
 
−
var p4 = b1.createElement('point',[-1,-1], {name:'D',style:6});
 
−
var p5 = b1.createElement('point',[3,1], {name:'E',style:6});
 
  
−
var poly = b1.createElement('polygon',[p1,p2,p3,p4,p5]);
+
var poly = b1.create('polygon',[p1,p2,p3,p4,p5], { borders:{strokeColor:'black'} });
−
</script>
+
</jsxgraph>
−
</html>
+
 
 +
 
 +
[[Category:Examples]]

Latest revision as of 14: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:

Retrieved from "http://jsxgraph.org/wiki/index.php?title=Polygon&oldid=6994"