javascript - 通过坐标对 Canvas 鼠标悬停进行 3/4 按钮的窃听

Question

请看下面的 fiddle ，尽可能扩大观察窗口。我正在尝试获取它，以便将鼠标悬停在箭头上并单击它。我目前有红色方 block 作为悬停坐标。不幸的是，这只适用于 #0 箭头框。我不知道为什么这对其他 3 个盒子不起作用。控制台记录输出，您可以看到鼠标和悬停坐标匹配并更新，但光标的样式更改:指针不起作用!

https://jsfiddle.net/8avwjxjq/

(控制台输出示例 - 请参阅下面的代码)

我:1

coordsObj.arrows[i]:116,548

鼠标X:171

鼠标Y: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

问题在于您正在为每个位置设置光标。因此，当鼠标位于循环开始处的框上时，您将光标设置为指针，但下一个框将始终不在鼠标下方，因为鼠标已准备好位于另一个框上。

假设您需要循环所有项目进行渲染，因为如果不需要，您可以使用 break 打破循环来解决您的问题

需要在循环设置为默认值之前创建一个名为cursor的变量

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

然后在循环中删除 else 部分，并根据需要设置光标

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

然后循环完成后设置光标，你的问题就解决了..

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

祝你编程愉快...:)