javascript多边形交集

Question

我使用了以下代码:http: //www.amphibian.com/blogstuff/collision.html.在html测试文件中,我将第一个三角形更改为

triangle1.addPoint({"x":-20, "y":-20});
triangle1.addPoint({"x":-20, "y":20});
triangle1.addPoint({"x":20, "y":20});
triangle1.addPoint({"x":20, "y":10});
triangle1.addPoint({"x":10, "y":10});
triangle1.addPoint({"x":10, "y":-20});

现在,当我在穿过它之前移动另一个三角形内部这个形状给我错误的交叉点.知道哪里可能是问题？

Answer 1

好吧,我为其他想要玩这个的人设置了一个小提琴.结果如下:

该脚本使用分离轴定理或(如维基百科所称)超平面分离定理,如以下源代码所述polygon.js:

/*
 *  To detect intersection with another Polygon object, this
 *  function uses the Separating Axis Theorem. It returns false
 *  if there is no intersection, or an object if there is. The object
 *  contains 2 fields, overlap and axis. Moving the polygon by overlap
 *  on axis will get the polygons out of intersection.
 */
Polygon.prototype.intersectsWith = function(other) {

该定理仅适用于凸多边形.你的形状不凸,因为它有一个"凹痕".这就是脚本错误地报告形状相交的原因.如果你需要使它与凹形一起工作,你必须首先将凹形分割成单独的凸形部分然后将该定理应用于所有单独的部分.显然,这会使脚本更复杂,因为您需要迭代两个形状的凹陷部分的叉积.