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

Posted 2023-03-28

【中文标题】Raphael js - 绘制没有交叉点的路径

【英文标题】：Raphael js - draw path without intersections

【发布时间】：2017-10-14 05:09:22

【问题描述】：

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

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

用户在某个地方点击画布，然后我根据新点的坐标重绘多边形。是否可以拒绝一个多边形中的线之间的交叉点？更新：您可以尝试以this 为例。我不想允许自相交。源码可以在here找到。

【问题讨论】：

你的意思是自相交吗？如果您提供minimal reproducible example 将会很有帮助。

@PaulLeBeau 我添加了更多细节。是的，自相交。

【参考方案1】：

为避免多边形自相交，您当然要做的就是检查您要添加的线段不会与多边形中的任何其他线段相交。。 p>

因此，只需添加线交叉测试并检查最新的线段与之前的所有线段。

您可以在网上搜索用于线交叉测试的算法。找到它不会有任何困难。

【参考方案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);