2

I'm looking for javascript library or algorithm to draw difference of two hand-drawed closed svg path's (polygones).

I've tried to work with Delaunay triangulation, as suggested here.

For example see http://jsfiddle.net/xmWWe/7/ Here the input svg:

<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>

Best example of desired result is in the first image: http://www.cs.man.ac.uk/~toby/alan/software/

How can I achieve it?

Community
  • 1
  • 1
terales
  • 3,116
  • 23
  • 33
  • 1
    Have you had a look at the [Javascript translation of Clipper](http://sourceforge.net/projects/jsclipper/)? – Angus Johnson Jun 19 '13 at 07:20
  • 1
    @AngusJohnson: Could you put your comment as an answer to this question, so everybody can see that this question has answered? And Alexander can then accept it as a right answer. – Timo Kähkönen Oct 11 '13 at 11:40

1 Answers1

2

Javascript Clipper.

It's a Javascript translation of my Clipper library (written in C++, C# and Delphi).

Angus Johnson
  • 4,565
  • 2
  • 26
  • 28