Javascript手绘多边形的区别

时间:2013-06-19 04:39:37

标签: javascript 2d polygon difference

我正在寻找javascript库或算法来绘制两个手绘的封闭svg路径(多边形)的差异。

我已尝试使用Delaunay三角测量,如建议here

例如,请参阅http://jsfiddle.net/xmWWe/7/ 这里输入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>

所需结果的最佳示例位于第一张图片中:http://www.cs.man.ac.uk/~toby/alan/software/

我怎样才能实现它?

1 个答案:

答案 0 :(得分:2)

Javascript Clipper

这是我的Clipper库的Javascript翻译(用C ++,C#和Delphi编写)。