Question

问题

我正在编写一个程序，它涉及计算一个运动物体与另一个运动物体重叠的像素数。我必须每秒多次返回此值，因此程序必须高效。我想出的例子似乎不是。

实施例

让我们缩小一分钟，想象我们有一个3 * 3像素的物体和一个3 * 2的物体

a b c
d e f   j k l
g h i   m n o

每个字母代表每个对象的单个像素。 3 * 3对象位于左侧，3 * 2对象位于右侧，x值4大于较大对象的x值。它们没有重叠。

代码

目前，我通过一个简单的函数返回重叠像素的数量，该函数检查对象1中的每个像素与对象2中的每个像素的重叠：

var a = {
    width: 3,
    height: 3,
    x: 0,
    y: 0
}

var b = {
    width: 3,
    height: 2,
    x: 4,
    y: 0
}

function overlappingPixels(object_1, object_2) {
    var overlapping = 0;
    for (var w_1 = 0; w_1 < object_1.width; w_1++) {
        for (var h_1 = 0; h_1 < object_1.height; h_1++) {
            for (var w_2 = 0; w_2 < object_1.width; w_2++) {
                for (var h_2 = 0; h_2 < object_1.height; h_2++) {
                    if (w_1 + object_1.x == w_2 + object_2.x && h_1 + object_1.y == h_2 + + object_2.y) {
                        overlapping++;
                    }
                }
            }
        }
    }
    return overlapping;
}

overlappingPixels(a, b);返回0，因为这两个对象没有重叠的像素。

小结

回顾一下，我已经构建了一个函数，它将对象1的每个像素与对象2的每个像素进行比较以获得任何重叠。这个似乎非常低效，我很好奇是否有更快的选择，如果这个计算需要非常快速地执行移动对象。随着对象大小的增加，函数的速度会迅速崩溃。无论如何，我会在较大的物体上进行这种计算，所以这并不理想。

谢谢！

Answer 1

有一种简单有效的方法可以检查两个矩形是否发生碰撞。

var rect1 = {x: 5, y: 5, width: 50, height: 50}
var rect2 = {x: 20, y: 10, width: 10, height: 10}

if (rect1.x < rect2.x + rect2.width &&
   rect1.x + rect1.width > rect2.x &&
   rect1.y < rect2.y + rect2.height &&
   rect1.height + rect1.y > rect2.y) {
    // collision detected!
}

请参阅MDN 2D object collision detection

一旦你知道确实存在碰撞，获得重叠的大小也很容易。只需获得它们重叠的高度和宽度，并通过乘以它来获得该区域。请参阅代码段中的calculateCollisionLength功能，了解如何计算重叠数据，而无需逐个像素地进行重叠。

const calculateCollisionLength = (point1, point2, length1, length2) => {
    const pointb1 = point1 + length1;
    const pointb2 = point2 + length2;
    const diff1 = Math.abs(point1 - point2);
    const diff2 = Math.abs(pointb1 - pointb2);
    return (length1 + length2 - diff1 - diff2) / 2;
}
function checkCollusion(rect1, rect2) {
    if (rect1.x < rect2.x + rect2.width &&
        rect1.x + rect1.width > rect2.x &&
        rect1.y < rect2.y + rect2.height &&
        rect1.height + rect1.y > rect2.y) {
        // collision detected!

        const collision = { xLength: 0, yLength: 0 };

        collision.xLength = calculateCollisionLength(rect1.x, rect2.x, rect1.width, rect2.width);
        collision.yLength = calculateCollisionLength(rect1.y, rect2.y, rect1.height, rect2.height);

        return collision.xLength * collision.yLength;
    }
    else return null;
}

var rect1 = { x: 5, y: 5, width: 50, height: 50 }
var rect2 = { x: 20, y: 10, width: 10, height: 10 }
console.log(checkCollusion(rect1, rect2))

优化对象重叠检测（Javascript）

问题

实施例

代码

小结

1 个答案: