javascript mouseover矩形畫布

Question

我在畫布上用Javascript繪製矩形。當用戶將鼠標移動到其中一個矩形上時，文本應該出現在該矩形中。只有那個矩形（即不是其他矩形）。

所以我設法繪製矩形並創建了mouseover事件。它完美地工作：只要鼠標移動到其中一個矩形上，文本就會出現。然而，文本出現在所有的矩形...任何想我做錯了什麼？似乎有一個循環的問題，但我似乎無法修復它。

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 

：

通過創建在每個迭代一個新的路徑解決這個