# Difference between revisions of "Polygon"

From JSXGraph Wiki

Jump to navigationJump to searchA WASSERMANN (talk | contribs) |
A WASSERMANN (talk | contribs) |
||

(3 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 " | + | 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 = | + | 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 = | + | 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 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: