Canvas Mouseover über Coords für 3/4-Tasten abgehört

Question

Bitte beachten Sie die Fiedel unten, erweitern Sie das Sichtfenster so viel wie möglich. Ich versuche es zu bekommen, damit ich über einen Pfeil schweben kann und darauf klicke. Ich habe momentan rote Quadrate als Hover Coords. Leider funktioniert das nur in der Pfeilbox # 0. Ich habe keine Ahnung, warum das bei den anderen 3 Boxen nicht funktioniert. Die Konsole protokolliert die Ausgabe und Sie können sehen, dass die Maus und Hover Coords übereinstimmen und aktualisieren, aber die Stiländerung des Cursors: Zeiger funktioniert nicht!

https://jsfiddle.net/8avwjxjq/

(Beispiel Konsolenausgabe - siehe Code unten)

i: 1

coordsObj.arrows [i]: 116.548

mouseX: 171

mouseY: 569

// Capture Clicks 
      document.addEventListener('mousemove', function(e){ 

       // console.log("mouseX:"+mouseX+", "+mouseY); 

       for (var i = coordsObj.arrows.length - 1; i >= 0; i--) { 
        // console.log("coordsObj: "+[coordsObj.arrows[i-1], coordsObj.arrows[i]]); 
        // console.log("mousePos: "+[mouseX, mouseY]); 
        var mouseX = e.pageX, 
         mouseY = e.pageY, 
         arrowX = coordsObj.arrows[i][0], 
         arrowY = coordsObj.arrows[i][1], 
         radius = 50; 

        // Debugging 
        console.log("i: "+i); 
        console.log("coordsObj.arrows[i]: "+coordsObj.arrows[i]); 
        console.log("mouseX: "+mouseX); 
        console.log("mouseY: "+mouseY); 

        ctx.fillStyle = "red"; 
        ctx.fillRect(arrowX-(2*radius), arrowY-radius, radius, radius); 
        textObj.draw(i, arrowX, arrowY, 24, "#fff"); 

        // Arrow Radius Hover 
        if (mouseX > (arrowX - radius) && mouseX < (arrowX + radius) && mouseY > (arrowY - radius) && mouseY < (arrowY + radius)){ 
         body.style.cursor = "pointer"; 
        } else { 
         body.style.cursor = "default"; 
        } 

       } 

      }); 

Answer 1

Das Problem ist, dass Sie den Cursor für jeden Ort setzen. Wenn die Maus über den Kästchen am Anfang der Schleife steht, stellen Sie den Cursor auf den Zeiger, aber die nächste Box wird immer nicht unter der Maus sein, weil die Maus bereits über der anderen ist.

Vorausgesetzt, dass Sie in einer Schleife müssen alle Elemente für das Rendering, denn wenn du nicht einfach aus der Schleife mit break brechen könnte Ihr Problem einfach

Notwendigkeit zu beheben eine Variable namens Cursor vor der Schleife auf den Satz zu erstellen Standard

var cursor = "default"; // Add this befor the loop 

dann in der Schleife den sonst Teil entfernen und nur die Cursor gesetzt, wenn

for (var i = coordsObj.arrows.length - 1; i >= 0; i--) { 
    // your loop logic....  

    if (mouseX > (arrowX - radius) && mouseX < (arrowX + radius) && mouseY > (arrowY - radius) && mouseY < (arrowY + radius)){ 
      // mouse over button 
      cursor = "pointer"; // set the cursor 
    } // else { // this was the bit turning off the cursor so removing it 
    // body.style.cursor = "default"; 
    //} 

} // end of loop 

dann nach th sein muss e-Schleife der Cursor und das Problem ist gelöst fertig gesetzt ..

body.style.cursor = cursor; // now set the cursor and if over a button 
           // it will be correct 

Glückliche programing ... :)