2

I have an array of coordinates. And that coordinates occur dynamicly. So for some possibilities, it does not draw convex. Please check the example.

<div style="width :  700 , height : 700">
<svg width ="700px" height = '700px'>
<polygon points="203.21954686687195,209.09106845446956 103.21846501684684,30.73408772834725 98.7205079235916,110.89560444878055 213.4424487588524,32.1353347676166 " fill="lime" stroke="black" fillRule= 'nonzero' />
</svg>
</div>

Here is link :https://jsfiddle.net/zcj4qwpz/7/

So my question is simple : How can i make it convex for every time ? Should i generate new array for this? If so, how can i do that.

Or is there any solution by changing something on html-canvas props?

Note: I checked many questions but they didn't help me. For example this (the closest question to mine): How to determine if a list of polygon points are in clockwise order?

escalepion
  • 641
  • 2
  • 7
  • 17
  • 1
    What you are after is called a Convex Hull. The [Wikipedia article](https://en.wikipedia.org/wiki/Convex_hull_algorithms) has more information. – Paul LeBeau Mar 08 '18 at 14:10
  • It didn't help me actually. Because , there is not any problem about my coordinates that makes it polygon. The problem is the order of coordinates that i pass to html-svg. It tries to draw exactly same lines by order and fails in some scenarios. – escalepion Mar 08 '18 at 15:00
  • The Convex Hull algorithm will tell you how to order your coordinates so that you get a convex polygon. Is that not what you want? – Paul LeBeau Mar 08 '18 at 15:04
  • Ok i ll check it out thank you . – escalepion Mar 09 '18 at 06:46

0 Answers0