查找最接近点击点的元素

Question

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

我正在使用jQuery.我只需要帮助这个小算法.一旦我完成了实验,我会告诉你们我正在做什么.

UPDATE

我想过它是如何工作的.看看这个图:

每个矩形有8个点(或者更确切地说是4个点和4个线),这些点是重要的.只有x值对于水平点(红点)才有意义,只有y值对于垂直点(绿点)才有意义.x和y都是角落的重要部分.

橙色十字架是要测量的点 - 在我的用例中点击鼠标.浅紫色线是橙色十字和它可能的最近点之间的距离.

因此......对于任何给定的橙色十字,循环遍历每个矩形的8个点中的每一个,以找到每个矩形最接近橙色十字的最近边或角.具有最低值的矩形是最近的矩形.

我可以概念化和可视化它,但不能把它放入代码中.救命!

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