鼠标靠近对象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

回答

相关问题