鼠標靠近對象Javascript

我現在正在爲此苦苦掙扎。我在畫布上繪製一個網格。我添加一個mousemove eventHandler並跟蹤mouseX和mouseY的位置。我希望能夠計算從鼠標位置到網格中項目的距離。我似乎無法做到這一點，我嘗試了一些不同的解決方案，比如在mousemove處理程序中添加一個循環並使用requestAnimationFrame，但兩種解決方案都非常緩慢。鼠標靠近對象Javascript

這裏是我下面的代碼：

function setupCanvas(){ 
     canvas = document.getElementById('canvas'); 
     ctx  = canvas.getContext('2d'); 
     width = canvas.width = window.innerWidth; 
     height = canvas.height = window.innerHeight; 
     blockWidth = width/2 - 150; 
     blockHeight = height/2 - 100; 
     gridArray = []; 
     gridWidthArray = []; 

     ctx.fillRect(0,0,width,height); 

     //drawGrid(); 
     drawInitGrid(); 

     canvas.addEventListener('mousemove',onMouseMoveHandler); 
    } 

    function drawInitGrid(){ 

     for(x = 0; x<16; x++){ 
      for(y = 0; y<11; y++){ 
       var gridBlock = new GridBlock((blockWidth) + x*20, (blockHeight) + y*20, blockWidth, blockHeight); 
       gridBlock.render(ctx); 
       gridArray.push(gridBlock); 

       //gridWidthArray.push(gridBlock.xPos) 
      } 
     } 
    } 

function onMouseMoveHandler(e){ 
     if(containerBounds(e)){ 
      mouseX = e.offsetX; 
      mouseY = e.offsetY; 
      console.log(mouseX, mouseY); 
      //console.log(gridWidthArray); 

      for(var grid in gridArray){ 
       //console.log(gridArray[grid].xPos) 
      } 
     } 
    }

我也試過在網格塊對象添加的MouseEvent，但也似乎不工作。

來源

2015-02-06 Fred

你能提供一個可行的例子嗎？（jsfiddle左右） – dwana 2015-02-06 10:12:54

我剛剛設置了這個 - http://codepen.io/fried/pen/YPENQg雖然由於某種原因 - 無法讓mousehandler在示例中正常工作 – Fred 2015-02-06 10:35:38

你可以計算出任何這樣的2點之間的距離：

var dx=point2.x-point1.x; 
var dy=point2.y-point1.y; 
var distance=Math.sqrt(dx*dx+dy*dy);

在撥弄你的鼠標位置計算應占畫布的窗口內的偏移位置

另外：

var BB=canvas.getBoundingClientRect(); 
var offsetX=BB.left; 
var offsetY=BB.top; 

function onMouseMoveHandler(e){ 
    var mouseX=parseInt(e.clientX-offsetX); 
    var mouseY=parseInt(e.clientY-offsetY); 
}

[查找電網最近點]

假設你有一個鼠標位置[MX，我]，並承擔你有一個左上角爲[0,0]的單元格，單元格大小爲cellWidth X cellHeight。

然後你就可以最接近計算網格單元鼠標這樣的：

var cellX=parseInt((mx+cellWidth/2)/cellWidth)*cellWidth; 
var cellY=parseInt((my+cellHeight/2)/cellHeight)*cellHeight;

當然，如果網格的左上角是不是在[0,0]，你將不得不調整爲網格偏移。

來源

2015-02-06 16:52:31 markE

感謝您的答案markE。問題是獲取特定網格項的值。所以在表達式var dx = point2.x-point1.x;我將如何獲得point1.x的價值？正如我在文章中提到的，我嘗試在mouseHandler中循環網格中的項目，但這有點慢。 – Fred 2015-02-08 16:41:14

不是循環遍歷單元格，而是有一個更直接的計算。看到我的答案的補充。 – markE 2015-02-08 17:32:24

謝謝markE。我接受這個答案是正確的。我仍然需要做一些事情來讓它按照我需要的方式工作，但是這使我指出了正確的方向。 – Fred 2015-02-10 06:52:17

鼠標靠近對象Javascript

回答

相關問題