StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POJavascript hand-drawed polygon difference
text
Body
copied!<p>I'm looking for javascript library or algorithm to draw difference of two hand-drawed closed svg path's (polygones).</p> <p>I've tried to work with Delaunay triangulation, as suggested <a href="https://stackoverflow.com/a/2277205/1363799">here</a>.</p> <p>For example see <a href="http://jsfiddle.net/xmWWe/7/" rel="nofollow noreferrer">http://jsfiddle.net/xmWWe/7/</a> Here the input svg:</p> <pre><code><svg width="500" height="500"> <path id="testGreen" fill="green" d="M 200.178955078125 185.72727966308594 l0 -1 l -4 -3 l -18 -5 l -17.999969482421875 -1 l -12 1 l -11 4 l -9 4 l -7 5 l -3 4 l -3 6 l -5 14 l -6 15 l -3 11 l 0 11 l 8 11.999984741210938 l 12 14 l 14 9 l 21 6 l 22.999969482421875 -3 l 10 -11 l 0 -13 l -10 -10.999984741210938 l -6 -11 l -1.999969482421875 -4 l 1.999969482421875 -6 l 6 -4 l 6 -6 l 8 -4 l 5 -5 l 2 -6 l 0 -7 l 0 -6 l 0 -4 l 0 -6"></path> <path id="testBlue" fill="blue" d="M 240.178955078125 150.72727966308594 l0 -1 l -4 -3 l -18 -5 l -17.999969482421875 -1 l -12 1 l -11 4 l -9 4 l -7 5 l -3 4 l -3 6 l -5 14 l -6 15 l -3 11 l 0 11 l 8 11.999984741210938 l 12 14 l 14 9 l 21 6 l 22.999969482421875 -3 l 10 -11 l 0 -13 l -10 -10.999984741210938 l -6 -11 l -1.999969482421875 -4 l 1.999969482421875 -6 l 6 -4 l 6 -6 l 8 -4 l 5 -5 l 2 -6 l 0 -7 l 0 -6 l 0 -4 l 0 -6"></path></svg> </code></pre> <p>Best example of desired result is in the first image: <a href="http://www.cs.man.ac.uk/~toby/alan/software/" rel="nofollow noreferrer">http://www.cs.man.ac.uk/~toby/alan/software/</a></p> <p>How can I achieve it?</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload