鼠标接近对象 Javascript

Question

我为此苦苦挣扎了一段时间。我正在 canvas 上绘制网格。我添加了一个 mousemove 事件处理程序并跟踪 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)
            }
        }
    }

我也试过在 GridBlock 对象中添加鼠标事件，但这似乎也不起作用。

Answer 1

您可以像这样计算任意两点之间的距离：

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

另外，在您的 fiddle 中，您的鼠标位置计算应考虑 canvas 在 window 中的偏移位置：

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]，则需要调整网格偏移。

鼠标接近对象 Javascript

Mouse Proximity to object Javascript

javascript

canvas

mouseevent