javascript 鼠标悬停矩形画布答案

【问题标题】：javascript mouseover rectangle canvasjavascript 鼠标悬停矩形画布
【发布时间】：2017-08-19 17:51:13
【问题描述】：

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

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

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

        }

    }
}

【问题讨论】：

标签： javascript canvas mouseover

【解决方案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

【讨论】：