重力點不與其他元素

正常工作，有這家名爲Gravity Points真棒codepen，我很喜歡，想在我的下一個項目使用，但事實證明它只能好，如果它是頁面上的唯一元素。一旦你開始在它上面和下面添加內容，它會錯誤地計算鼠標的位置。重力點不與其他元素

看看my fork here，我已經添加它上面的內容。請注意，如果畫布與屏幕完全對齊，則重力點將在右側創建，但如果在半向上滾動時單擊畫布，則會將點創建爲向下幾個像素。

雖然我能夠理解哪些函數正在調用，哪些函數用於繪製點，但我無法理解計算正在發生的位置以及它與其相關的方面，我並不擅長使用javascript和jquery滾動位置。這個函數似乎在左鍵單擊時觸發，但光標座標從哪裏來？

function mouseDown(e) { 
     for (var i = gravities.length - 1; i >= 0; i--) { 
      if (gravities[i].isMouseOver) { 
       gravities[i].startDrag(mouse); 
       return; 
      } 
     } 
     gravities.push(new GravityPoint(e.clientX, e.clientY, G_POINT_RADIUS, { 
      particles: particles, 
      gravities: gravities 
     })); 
    }

那麼有人可以看看它並給出一些見解嗎？

來源

2015-11-06 VeeK

光標COORDS來自'e'參數（簡稱事件） –

這是調用的代碼函數：'canvas.addEventListener（'mousedown'，mouseDown，false）;'。現在如何將座標發送到'mouseDown'，它從哪裏獲取？ – VeeK

您需要獲取相對於畫布邊界矩的位置。一種方法是'var rect = canvas.getBoundingClientRect（）; var x = mouseEvent.clientX - rect.left; var y = mouseEvent.clientY - rect.top;' – Kaiido

<canvas>元件具有其自己的座標系，其從一個文件（一個由mouseEvents發送）不同。
你需要做的是檢查畫布的邊框並刪除其偏移到您的mouseEvents座標：

canvas.onmousemove = function(mouseEvent){ 
    var rect = canvas.getBoundingClientRect(); 
    var x = mouseEvent.clientX - rect.left; 
    var y = mouseEvent.clientY - rect.top; 
    // doSomething with x and y 
    for (var i = gravities.length - 1; i >= 0; i--) { 
    if (gravities[i].isMouseOver) { 
     gravities[i].startDrag(mouse); 
     return; 
    } 
    } 
    gravities.push(new GravityPoint(x, y, G_POINT_RADIUS, { 
    particles: particles, 
    gravities: gravities 
    })); 
}

來源

2015-11-06 07:11:34 Kaiido

是的。非常感謝。我修改了'mouseDown'函數，在函數中包含前3行代碼，並將x，y傳遞給'GravityPoints'。謝謝你的伴侶 – VeeK

重力點不與其他元素

回答

相關問題