如何让我的鼠标悬停在我想要的范围内工作？

Question

我刚刚回到 javascript 的事情中，这可能很简单，但它飞过我的头。我这里有一个 canvas 脚本，我只想将鼠标悬停在矩形上并用黑色填充它。

//Establish context
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

//create rectangle
ctx.rect(0, 0, 20, 20);
ctx.stroke();

// when moused over the rectangle, fill it black
function fill() {
  if (event.clientX <= 20 && event.clientY <= 20) {
    ctx.fill();
  }

  console.log(event.clientX + " " + event.clientY);
}

// simple test that shows the position of the mouse on when the mouse moves
function test() {
  console.log("X: " + event.clientX + "Y: " + event.clientY);
}

c.addEventListener("mouseover", fill);
c.addEventListener("mousemove", test);

<canvas id="myCanvas" width="500" height="250" style="border: 2px solid black"></canvas>

这是我遗漏的地方。当我将鼠标悬停在 canvas 元素上时，它会触发鼠标悬停事件。但是我怎样才能防止鼠标悬停事件发生，直到我只在矩形约束内？

Answer 1

我认为您只需要检查事件相对于矩形周长的 clientX 和 clientY 位置。还要确保将 event 传递给您的 fill 函数。

c.addEventListener('mouseover', event => {
    if(event.clientX >=0 && event.clientX <= 20){
        if(event.clientY >=0 && event.clientY <= 20){
            fill(event);
        }
    }
});

function fill(event)
{
    if(event.clientX <= 20 && event.clientY <= 20)
    {
        ctx.fill();
    }

    console.log(event.clientX + " " + event.clientY);
}

Answer 2

mouseover 只会在光标进入 canvas 时触发一次。您可以只使用 mousemove 事件并比较坐标。下面是一个例子，进入时填充，退出时清除：

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

ctx.rect(0, 0, 20, 20);
ctx.stroke();

function fill()
{
    if(event.clientX <= 20 && event.clientY <= 20)
    {
         ctx.fill();       
    }else{
         ctx.clearRect(0, 0, 20, 20);
    }
    console.log(event.clientX + " " + event.clientY);

}

c.addEventListener("mousemove", fill);

这是正在运行的 jsfiddle：https://jsfiddle.net/dL18v63w/

Answer 3

您必须根据以下几项来计算鼠标的位置：

canvas
鼠标位置
canvas

// Establish context
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

// Get canvas position
var rect = c.getBoundingClientRect();
var borderWidth = parseInt(c.style.borderWidth);
    
// Create rectangle
ctx.rect(0, 0, 20, 20);
ctx.stroke();

// Fill the rectangle
function fill() {
  ctx.fillStyle = 'red';
  ctx.fill();
}

// Empty the rectangle
function empty() {
  ctx.fillStyle = 'white';
  ctx.fill();  
}

function onmousemove() {
  // Need to calculate the position of the mouse according to:
  // - the position of the canvas
  // - the border of the canvas (2px)
  if (event.clientX <= rect.left + borderWidth + 20 && event.clientY <= rect.top + borderWidth + 20) {
    fill();
  } else {
    empty();
  }
}
    
// Check the position of the mouse after every move
c.addEventListener('mousemove', onmousemove);
// Empty the rectangle when the mouse leaves the canvas
c.addEventListener('mouseout', empty);

<!doctype html>
<html>
  <head>
    <title>Railio</title>
  </head>
  <body>
    <canvas id="myCanvas" width="500" height="250" style="border: 2px solid black">
    </canvas>
  </body>
</html>

Answer 4

只需将检查鼠标坐标是否小于 20 的部分移动到您的测试函数中，并将其作为参数事件提供。如果我正确理解您的问题，那应该可以解决问题。如果将事件侦听器添加到 canvas.

，则在鼠标悬停在矩形上方之前无法阻止鼠标悬停事件的发生

Answer 5

有一些答案。这是我的：

我添加了一个功能来检测鼠标在 canvas 上的位置：oMousePos。请阅读 the method getBoundingClientRect

另外，我使用 mousemove 而不是 mouseover，因为当鼠标移到 canvas 上时会触发 mouseover。 mousemove 被触发而鼠标移到 canvas.

为了检测鼠标是否在我正在使用的方法 isPointInPath

//Establish context
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
c.width = 500;
c.height = 250;

var mouse={}

//create rectangle
ctx.rect(0, 0, 20, 20);
ctx.stroke();

// when moused over the rectangle, fill it black
function fill(event) {
  mouse = oMousePos(c, event);
  ctx.clearRect(0,0,c.width,c.height);
  ctx.beginPath();
  ctx.rect(0, 0, 20, 20);
  ctx.stroke();
  // if the mouse is in path fill()
  if (ctx.isPointInPath(mouse.x, mouse.y)) {
    ctx.fill();
  }
}

c.addEventListener("mousemove", fill);

function oMousePos(canvas, evt) {
  var ClientRect = canvas.getBoundingClientRect();
  return { //objeto
    x: Math.round(evt.clientX - ClientRect.left),
    y: Math.round(evt.clientY - ClientRect.top)
  }
}

canvas{border: 2px solid;}

<canvas id="myCanvas"></canvas>

希望对您有所帮助。

如何让我的鼠标悬停在我想要的范围内工作？

How can I get my mouseover to work within the scope that I want?

javascript

events

canvas

mouseevent