在JavaScript中获取方向上最近的点

假设我有一个二维坐标系，上面有很多矩形。以此为例。现在我想得到给定方向上最近的下一个元素。让我们以此图像为例：

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

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

---

顺便说一句，元素实际上是div，所以canvas不是一个选项。

这个巨大的过度杀伤力示例是否有帮助

你可以在这里找到它：

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

然后计算已与方向匹配的元素之间的距离（如果情况2距离相同，则它们也会高亮显示为最近的元素）：

功能高亮最近（arr、方向、rect）{
变量i=0，l=arr.length，min=10000，el，minScoreElement=[]，o，a，b，c；
对于（i=0；i

您的方向有多受限（例如，仅90度的倍数？）您的数据结构是什么？如果A向左移动三个空格会发生什么？是的，只有90度的倍数，基本上是箭头键。目前，我只存储所有对象的中点，并根据我发布的内容迭代选择最佳候选对象。点的结构是[数字（x），数字（y）]。它们被保存在一个简单的数组中。编辑：如果A左边是3块，那么B应该是下一块。如果A向左延伸3段，它仍然应该是下一段。如果你想抓住A被延伸的情况，你还应该存储矩形的宽度，并将左右边缘位于当前位置任一侧的情况视为最佳（比如0°）。（当然，你需要东西方向的高度。）现在我认为最好检查这个方向上最近的顶点。这将使每个按键的检查次数增加4次，或者如果优化为至少2次。@SargoDarya您不需要检查每个顶点，只需检查

min（abs（A.x0-S.x），abs（A.x1-S.x））

例如（即最近x坐标的delta-x）

    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;
        }
    }
}