Question

我只是重新开始使用javascript，这可能很简单，但是却扑朔迷离。我这里有一个画布脚本，我想简单地将鼠标悬停在矩形上并用黑色填充。

//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元素上单击鼠标时，它将触发鼠标悬停事件。但是如何防止鼠标悬停事件直到Im仅在矩形约束内发生？

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

有一些答案。这是我的：

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

的信息

我还使用mousemove而不是mouseover，因为将鼠标移到画布上时会触发mouseover。在鼠标移到画布上方的同时，{strong}触发mousemove。

要检测鼠标是否在矩形上方，我正在使用方法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>

希望对您有帮助。

Answer 3

鼠标悬停只会在光标进入画布时触发一次。您可以只使用 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 4

您必须根据几件事来计算鼠标的位置：

画布的位置
鼠标的位置
画布样式

// 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 5

只需将检查鼠标坐标是否小于20的部分移到测试功能并将其作为参数事件即可。如果我正确理解您的问题，那应该可以解决问题。如果将事件侦听器添加到画布上，则无法阻止mousover事件的发生，直到鼠标移到矩形上方为止。

如何将鼠标悬停在我想要的范围内？

5 个答案: