Raphael js - 绘制没有交叉点的路径

Question

我使用 svg 库 raphaeljs 来绘制多边形。我这样做：

path.attr({path: "
M 301 248 613 283 588 533 370 497 232 382 232 382 Z
"})

用户在某个地方点击canvas，然后我根据新点的坐标重新绘制多边形。是否可以拒绝一个多边形中线之间的交点？
更新：你可以试试this as an example. I don't want to allow self-intersections. Source code could be found here。

Answer 1

要避免自相交的多边形，您肯定要做的就是检查要添加的线段是否与多边形中的任何其他线段相交.

所以只需添加线相交测试并检查最新的线段与之前的所有线段。

您可以在网上搜索直线相交测试的算法。你不会有困难找到它。

Answer 2

我只是想知道 Raphael 是否有一些嵌入功能来查找线段之间的交点。最后我使用了这种基于向量乘法的方法：

function intersection(ax1, ay1, ax2, ay2, bx1, by1, bx2, by2){
   var v1 = (bx2-bx1)*(ay1-by1)-(by2-by1)*(ax1-bx1);
   var v2 = (bx2-bx1)*(ay2-by1)-(by2-by1)*(ax2-bx1);
   var v3 = (ax2-ax1)*(by1-ay1)-(ay2-ay1)*(bx1-ax1);
   var v4 = (ax2-ax1)*(by2-ay1)-(ay2-ay1)*(bx2-ax1);
   return (v1*v2<0) && (v3*v4<0);
}

Raphael js - 绘制没有交叉点的路径

Raphael js - draw path without intersections

svg

raphael

intersection