Мышь Близость к объекту Javascript

Question

Я боюсь с этим некоторое время. Я рисую сетку на холсте. Я добавляю mousemove eventHandler и отслеживаю позиции mouseX и mouseY. Я хотел бы иметь возможность рассчитать расстояние от позиции мыши до элемента в сетке. Я не могу понять, что это правильно, я пробовал несколько разных решений, например, добавление цикла в обработчик mousemove и использование requestAnimationFrame, но оба решения очень медленные.

Вот мой код ниже:

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 в объекте GridBlock, но это также не похоже на работу.

Answer 1

Вы можете рассчитать расстояние между любыми 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, my] и принимайте у вас есть сетка с верхним левым в [0,0] и с размером ячейки в cellWidth X cellHeight.

Тогда можно вычислить ячейку сетки ближе к мыши, как это:

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

Конечно, если верхний левый сетке не является в [0,0], вам придется настроить для смещение сетки.