Javascript Mouseover Rechteck Leinwand

Question

Ich zeichne Rechtecke auf einer Leinwand mit Javascript. Wenn der Benutzer seine Maus über eines der Rechtecke bewegt, sollte in diesem Rechteck ein Text erscheinen. Nur bei diesem Rechteck (d. H. Nicht bei den anderen Rechtecken).

So habe ich es geschafft, die Rechtecke zu zeichnen und das Mouseover-Ereignis erstellt. Es funktioniert perfekt: Sobald sich die Maus über eines der Rechtecke bewegt, erscheint der Text. Der Text erscheint jedoch in ALLEN Rechtecken ... Irgendwelche Gedanken darüber, was ich falsch mache? Es scheint ein Looping-Problem zu geben, aber ich kann es nicht beheben.

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

Die isPointInPath Verfahren prüft ob die gegebenen Koordinaten in jeder der Formen, die durch den Strompfad sind. Jeder rect wird demselben einzelnen Pfad hinzugefügt, der bereits während des Initialisierungscodes erstellt wurde, der die Rechtecke zeichnet.

Der Effekt ist also, dass, sobald Ihre Maus über eine der Zeichnungen ist, die Bedingung in jeder Iteration Ihrer Schleife erfüllt ist.

diese lösen, indem sie einen neuen Weg in jeder Iteration zu erstellen:

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