找到位置上最接近格到另一个

Question

嗨，我如何才能找到的线路长度与其他颜色突出显示在上面的图片（问号）？矩形只是绝对位置的div。

我的目标是找到'最接近'的div，但'最接近'是一个非常抽象的定义，所以我决定'最接近'将是上图中最短的突出显示线。也许还有其他更简单的方法来找到'最接近'的div？

Answer 1

前段时间有一个问题，这启发我开始写一个jQuery插件来做这件事。你没有提到jQuery在你的问题中，但它肯定会使这个任务更容易。

这是working example（它突出显示了最接近的红色的div）。你这样调用插件：

$("#myDiv").physicallyClosest("div").css("background-color", "#00ff00"); 

也发现div这在物理上是最接近#myDiv并改变它的背景色。

我相信它还不够完美，但如果你能够使用jQuery，它应该足以让你开始。

Answer 2

Live Demo

纯JS。基本上只是获得偏移量，并进行标准的距离检查。

//setup for the example 
var divs = document.getElementsByTagName('div'); 

// Randomly place some divs around the screen. 
for(var i = 0; i < divs.length; i++){ 
    divs[i].style.top = Math.random()*500 + 'px'; 
    divs[i].style.left = Math.random()*600 + 'px';  
    divs[i].onclick = getClosest; 
} 

// Actual function to get the closest 
function getClosest(e){ 
    var x = this.offsetLeft, 
     y = this.offsetTop, 
     minDist = 99999, 
     closestElement = {}; 

    for(var i = 0; i < divs.length; i++){ 
     if(divs[i] !== this){ 
      var x2 = divs[i].offsetLeft, 
       y2 = divs[i].offsetTop; 

      dist = Math.sqrt((x2 - x) *(x2-x) + (y2 - y) * (y2-y)); 

      if(dist < minDist){ 
       minDist = dist; 
       closestElement = divs[i]; 
      } 
     } 
    } 

    // Set the background of the closest element to red. 
    closestElement.style.background = 'red'; 
} 

这是基于原点在左上角是，但你可以通过只是在做类似的东西改变的元素的中间以下

x = offsetLeft + width/2; 
y = offsetTop + height/2; 

Answer 3

刚刚撰写了它接受一个函数2个参数（元素和div的数组，我们应该在第一个参数中寻找最接近元素的div），并返回最接近的元素。

Live example

function getClosest(element, divs) { 

// Returns x, y coords of object relatively to the whole document 
function getWindowPosition(obj) { 
    var box = obj.getBoundingClientRect(); 
    return { 
    x : box.left, 
    y : box.top 
    } 
} 

var elementLeft = getWindowPosition(element).x; 
var elementRight = elementLeft + element.offsetWidth; 
var elementTop = getWindowPosition(element).y; 
var elementBottom = elementTop + element.offsetHeight; 

var smallestDistance = null; 
var closestElement = null; 
for(var i = 0; i < divs.length; i++) { 
    divs[i].style.background = 'yellow'; //For demo, delete this line 
    var divLeft = getWindowPosition(divs[i]).x; 
    var divRight = divLeft + divs[i].offsetWidth; 
    var divTop = getWindowPosition(divs[i]).y; 
    var divBottom = divTop + divs[i].offsetHeight; 

    var xPosition = 0; 
    //Finding div's postion on x axis 
    if(divRight < elementLeft) { 
     xPosition = elementLeft - divRight; 
    } else if(divLeft > elementRight) { 
     xPosition = divLeft - elementRight; 
    } 

    var yPosition = 0; 
    //Finding div's postion on y axis 
    if(divBottom < elementTop) { 
     yPosition = elementTop - divBottom; 
    } else if(divTop > elementBottom) { 
     yPosition = divTop - elementBottom; 
    } 

    var valueForComparison = 0; 
    if(xPosition > yPosition) { 
     valueForComparison = xPosition; 
    } else { 
     valueForComparison = yPosition; 
    } 

    //Comparing divs 
    if(smallestDistance === null) { 
     smallestDistance = valueForComparison; 
     closestElement = divs[i]; 
    } else if(valueForComparison < smallestDistance) { 
     smallestDistance = valueForComparison; 
     closestElement = divs[i]; 
    } 
} 

closestElement.style.background = 'red'; //For demo, delete this line 
return closestElement; 
}