【问题标题】：How can I get my mouseover to work within the scope that I want?如何让鼠标悬停在我想要的范围内工作？
【发布时间】：2019-01-06 04:10:38
【问题描述】：
我刚刚开始使用 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>
这是我遗漏的地方。当我将鼠标悬停在画布元素上时，它会触发鼠标悬停事件。但是我怎样才能防止鼠标悬停事件发生，直到我只在矩形约束内？
【问题讨论】：
标签：
javascript
events
canvas
mouseevent
【解决方案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);
}
【解决方案2】：
有一些答案。这是我的：
我添加了一个函数来检测鼠标在画布上的位置：oMousePos。请阅读the method getBoundingClientRect
我也使用mousemove 而不是mouseover，因为当鼠标移到画布上时会触发mouseover。 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>
希望对你有帮助。
【解决方案3】：
mouseover 只会在光标进入画布时触发一次。您可以只使用 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/
【解决方案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>