javascript - Canvas 三 Angular 形、五 Angular 形、矩形相互碰撞检测？

Question

关闭。这个问题需要多问 focused 。目前不接受答案。

---

想要改进此问题吗？更新问题，使其仅关注一个问题 editing this post .

已关闭 6 年前。

Improve this question

我有一些代码，其中绘制一个三 Angular 形并返回一个带有 x1, y1, x2, y2, x3, y3 的对象在里面。我还有一个矩形绘图函数，它返回 x, y, w, h ，以及返回 x1, y1, x2, y2, x3, y3, x4, y4, x5, y5 的五边形绘制函数。如何制作一个碰撞检测函数来检测矩形和五边形或三 Angular 形和五边形是否发生碰撞？

Answer 1

测试三 Angular 形的任意边(线段)是否与矩形的任意边相交

如果任何边相交，则三 Angular 形和矩形发生碰撞。

• 根据矩形的每条边测试三 Angular 形的第 1 条边，
• 根据矩形的每条边测试三 Angular 形的第 2 条边，
• 根据矩形的每条边测试三 Angular 形的第 3 条边，
• 如果您在测试时发现拦截，您可以停止，因为形状确实发生了碰撞。

有关“两条线段是否相交？”的详细信息，请参阅下文

对任何其他多边形进行相同的侧面拦截测试，看看它们是否发生碰撞。

这里重现了 2 行拦截的测试:

// point object: {x:, y:}
// p0 & p1 form one segment, p2 & p3 form the second segment
// Returns true if lines segments are intercepting
var lineSegmentsIntercept = (function(){ // function as singleton so that closure can be used

    var v1, v2, v3, cross, u1, u2;  // working variable are closed over so they do not need creation 
                               // each time the function is called. This gives a significant performance boost.
    v1 = {x : null, y : null}; // line p0, p1 as vector
    v2 = {x : null, y : null}; // line p2, p3 as vector
    v3 = {x : null, y : null}; // the line from p0 to p2 as vector

    function lineSegmentsIntercept (p0, p1, p2, p3) {
        v1.x = p1.x - p0.x; // line p0, p1 as vector
        v1.y = p1.y - p0.y; 
        v2.x = p3.x - p2.x; // line p2, p3 as vector
        v2.y = p3.y - p2.y; 
        if((cross = v1.x * v2.y - v1.y * v2.x) === 0){  // cross prod 0 if lines parallel
            return false; // no intercept
        }
        v3 = {x : p0.x - p2.x, y : p0.y - p2.y};  // the line from p0 to p2 as vector
        u2 = (v1.x * v3.y - v1.y * v3.x) / cross; // get unit distance along line p2 p3 
        // code point B
        if (u2 >= 0 && u2 <= 1){                   // is intercept on line p2, p3
            u1 = (v2.x * v3.y - v2.y * v3.x) / cross; // get unit distance on line p0, p1;
            // code point A
            return (u1 >= 0 && u1 <= 1);           // return true if on line else false.
            // code point A end
        }
        return false; // no intercept;
        // code point B end
    }
    return lineSegmentsIntercept;  // return function with closure for optimisation.
})();

<小时/><小时/>

两条线段是否相交？

(attribution to user blindman67 for assisting with the following example)

如果两条线段相交，此示例中的函数将返回 true，否则返回 false。

该示例是为了性能而设计的，并使用闭包来保存工作变量

``` JavaScript //点对象: {x:, y:} //p0 & p1 构成第一个段，p2 & p3 构成第二个段 //如果线段被截取则返回 true var lineSegmentsIntercept = (function(){//函数作为单例，以便可以使用闭包

    var v1, v2, v3, cross, u1, u2;  // working variable are closed over so they do not need creation 
                               // each time the function is called. This gives a significant performance boost.
    v1 = {x : null, y : null}; // line p0, p1 as vector
    v2 = {x : null, y : null}; // line p2, p3 as vector
    v3 = {x : null, y : null}; // the line from p0 to p2 as vector

    function lineSegmentsIntercept (p0, p1, p2, p3) {
        v1.x = p1.x - p0.x; // line p0, p1 as vector
        v1.y = p1.y - p0.y; 
        v2.x = p3.x - p2.x; // line p2, p3 as vector
        v2.y = p3.y - p2.y; 
        if((cross = v1.x * v2.y - v1.y * v2.x) === 0){  // cross prod 0 if lines parallel
            return false; // no intercept
        }
        v3 = {x : p0.x - p2.x, y : p0.y - p2.y};  // the line from p0 to p2 as vector
        u2 = (v1.x * v3.y - v1.y * v3.x) / cross; // get unit distance along line p2 p3 
        // code point B
        if (u2 >= 0 && u2 <= 1){                   // is intercept on line p2, p3
            u1 = (v2.x * v3.y - v2.y * v3.x) / cross; // get unit distance on line p0, p1;
            // code point A
            return (u1 >= 0 && u1 <= 1);           // return true if on line else false.
            // code point A end
        }
        return false; // no intercept;
        // code point B end
    }
    return lineSegmentsIntercept;  // return function with closure for optimisation.
})();

```

使用示例

var p1 = {x: 100, y: 0};   // line 1
var p2 = {x: 120, y: 200};
var p3 = {x: 0,   y: 100}; // line 2
var p4 = {x: 100, y: 120};
var areIntersepting = lineSegmentsIntercept (p1, p2, p3, p4); // true

该示例很容易修改以返回截取点。将代码点A和A end之间的代码替换为

if(u1 >= 0 && u1 <= 1){
    return {
        x : p0.x + v1.x * u1,
        y : p0.y + v1.y * u1,
    };
}

或者，如果您想获取线条上的截取点，请忽略线段的开始和结束，将 code point B 和 B end 之间的代码替换为

return {
    x : p2.x + v2.x * u2,
    y : p2.y + v2.y * u2,
};

如果没有截距，这两种修改都会返回 false，或者返回截距点为 {x : xCoord, y : yCoord}