javascript 鼠标悬停矩形 canvas

Question

我正在用 Javascript 在 canvas 上绘制矩形。当用户将鼠标移到其中一个矩形上时，文本应出现在该矩形中。仅在那个矩形（即不是其他矩形）。

所以我设法绘制了矩形并创建了鼠标悬停事件。它完美地工作：一旦鼠标移到其中一个矩形上，文本就会出现。但是，文本出现在所有矩形中......有没有想过我做错了什么？似乎有一个循环问题，但我似乎无法修复它。

function handleMouseMove(e){

    mouseX=parseInt(e.clientX-offsetX);
    mouseY=parseInt(e.clientY-offsetY);

    for(var i=0;i<entities.length;i++){

        var entity=entities[i];

        ctx.rect(entity.x, entity.y, width, height);

        if(ctx.isPointInPath(mouseX,mouseY)){ 

            ctx.font = "10px Arial";
            ctx.fillStyle = "black";
            ctx.textAlign = "left";
            ctx.fillText("edit", entity.x + 5 , entity.y + 5 );

        }

    }
}

Answer 1

isPointInPath 方法将检查给定坐标是否位于当前路径形成的任何形状中。每个 rect 都被添加到在绘制矩形的初始化代码期间已经创建的相同的单一路径。

因此效果是，一旦您的鼠标悬停在任何绘图上，在循环的每次迭代中条件都为真。

通过在每次迭代中创建一条新路径来解决此问题：

for(var i=0;i<entities.length;i++){
    var entity=entities[i];
    ctx.beginPath(); // <----
    ctx.rect(entity.x, entity.y, width, height);
    // ...etc

javascript 鼠标悬停矩形 canvas

javascript mouseover rectangle canvas

javascript

canvas

mouseover