在JavaScript中获得最接近的方向点

Question

假设我有一个2D坐标系，上面有很多Rects。以此为例。我现在想要在给定方向上获得最近的下一个元素。让我们以此图片为例：

S 定义了我当前所在的元素。如果我按下，我现在应该在向上方向最接近的元素 A 。我目前的做法是这样的：

Distance = abs((S.x-A.x)+(S.y-A.y);
Angle = abs(atan2((A.y - S.y), (A.x - S.x)) * 180 / Math.PI);
Score = Distance + abs(DirectionAngle-Angle)

然后我根据最低分选择候选人。现在有很多问题：

• 所有元素都会进行迭代，而不仅仅是向上的元素。如果这些元素的方向相反，但左侧和右侧的元素仍处于计算中，则不予考虑。

• 如果 A 由于某种原因向左延伸3个以上，则它不再工作，并且 B 被选中。

  < / LI>

所以我需要的是一个解决方案，只迭代方向上的元素和智能解决方案，只选择最接近的元素，然后停止并返回元素。

顺便说一下。元素实际上是div，因此canvas不是一个选项。

Answer 1

这个巨大的矫枉过正的例子有帮助吗？

您可以在此处找到它：http://jsfiddle.net/Icepickle/Cu88x/

其中我首先确定被点击元素的位置，获取与特定方向匹配的所有元素（检查该点是否在矩形内）

    var offset = helper.offset(element),
    rect = new helper.simpleRect(offset.left - (3 * 20), offset.top - (3 * 20), 6 * 20, 6 * 20),
    left = getElements(DIRECTION.LEFT, element, rect),
    right = getElements(DIRECTION.RIGHT, element, rect),
    up = getElements(DIRECTION.UP, element, rect),
    down = getElements(DIRECTION.DOWN, element, rect);

然后计算已经与方向匹配的元素之间的距离（如果距离相同，则它们也会突出显示为最接近的）：

function highlightClosest(arr, direction, rect) {
    var i = 0, l = arr.length, min = 10000, el, minScoreElement = [], o, a, b, c;
    for (i = 0; i < l; i++) {
        el = arr[i];
        o = helper.offset(el);

        a = Math.abs(o.left - rect.center.left);
        b = Math.abs(o.top - rect.center.top);
        c = (a * a) + (b * b);

        if (c < min) {
            min = c;
            minScoreElement = [el];
        } else if (c == min) {
            minScoreElement.push(el);
        }
    }
    if (minScoreElement) {
        for (i = 0; i < minScoreElement.length; i++) {
            minScoreElement[i].className = direction;
        }
    }
}