javascript - 查找离点击点最近的元素

Question

这里需要一些帮助。我是一名 UI 设计师，不擅长做实验性 Web 表单设计的数字，我需要知道哪个输入元素最接近网页上的点击点。我知道如何用点做最近邻，但输入元素是矩形而不是点，所以我被卡住了。

我正在使用 jQuery。我只需要这个小算法的帮助。完成实验后，我会向大家展示我在做什么。

更新

我想过它是如何工作的。看这张图:

每个矩形有 8 个重要的点(或者说 4 个点和 4 条线)。只有 x 值对水平点(红点)有意义，只有 y 值对垂直点(绿点)有意义。 x 和 y 对 Angular 点都很重要。

橙色十字是要衡量的点——在我的用例中是鼠标点击。浅紫色线是橙色十字与它可能最近的点之间的距离。

所以……对于任何给定的橙色十字，循环遍历每个矩形的 8 个点中的每一个，以找到每个矩形最接近橙色十字的边或 Angular 。值最小的矩形是最近的一个。

我可以将其概念化和形象化，但无法将其转化为代码。帮助!

Answer 1

您的算法是正确的。由于您需要代码方面的帮助，而不是算法方面的帮助，因此代码如下:

它可能不是最有效的。但它有效。

// Define the click
var click = Array(-1, -2); // coodinates in x,y

// Define the buttons
// Assuming buttons do not overlap
var button0 = Array(
    Array(0, 0), // bottom-left point (assuming x is horizontal and y is vertical)
    Array(6, 6) // upper-right point
);

var button1 = Array(
    Array(10, 11),
    Array(17, 15)
);

var button2 = Array(
    Array(-8, -5),
    Array(-3, -1)
);

// Which button to trigger for a click
i = which(click, Array(button0, button1, button2));
alert(i);


function which(click, buttons){
    // Check if click is inside any of the buttons
    for (i in buttons){
        var button = buttons[i];
        var bl = button[0];
        var tr = button[1];

        if ( (click[0] >= bl[0] && click[0] <= tr[0]) &&
             (click[1] >= bl[1] && click[1] <= tr[1]) ){
            return i;
        }
    }

    // Now calculate distances
    var distances = Array();

    for (i in buttons){
        var button = buttons[i];
        var bl = button[0];
        var tr = button[1];

        if ( (click[0] >= bl[0] && click[0] <= tr[0])) {
            distances[i] = Math.min( Math.abs(click[1]-bl[1]), Math.abs(click[1]-tr[1]) );
        }
        else if ( (click[1] >= bl[1] && click[1] <= tr[1])) {
            distances[i] = Math.min( Math.abs(click[0]-bl[0]), Math.abs(click[0]-tr[0]) );
        }
        else{
            distances[i] =  Math.sqrt(
                                (Math.pow(Math.min( Math.abs(click[0]-bl[0]), Math.abs(click[0]-tr[0]) ), 2)) +
                                (Math.pow(Math.min( Math.abs(click[1]-bl[1]), Math.abs(click[1]-tr[1]) ), 2))
                            );
        }
    }

    var min_id = 0;
    for (j in distances){
        if (distances[j] < distances[min_id]){
            min_id = j;
        }
    }

    return min_id;
}