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

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