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)
            }
        }
    }

我也尝试在GridBlock对象中添加一个mouseevent，但这似乎也不起作用。

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]，则必须调整网格偏移量。

鼠标接近对象Javascript

1 个答案: