如何让我的鼠标悬停在我想要的范围内工作?
How can I get my mouseover to work within the scope that I want?
我刚刚回到 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 元素上时,它会触发鼠标悬停事件。但是我怎样才能防止鼠标悬停事件发生,直到我只在矩形约束内?
我认为您只需要检查事件相对于矩形周长的 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);
}
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/
您必须根据以下几项来计算鼠标的位置:
- 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>
只需将检查鼠标坐标是否小于 20 的部分移动到您的测试函数中,并将其作为参数事件提供。如果我正确理解您的问题,那应该可以解决问题。如果将事件侦听器添加到 canvas.
,则在鼠标悬停在矩形上方之前无法阻止鼠标悬停事件的发生
有一些答案。这是我的:
我添加了一个功能来检测鼠标在 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>
希望对您有所帮助。
我刚刚回到 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 元素上时,它会触发鼠标悬停事件。但是我怎样才能防止鼠标悬停事件发生,直到我只在矩形约束内?
我认为您只需要检查事件相对于矩形周长的 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);
}
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/
您必须根据以下几项来计算鼠标的位置:
- 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>
只需将检查鼠标坐标是否小于 20 的部分移动到您的测试函数中,并将其作为参数事件提供。如果我正确理解您的问题,那应该可以解决问题。如果将事件侦听器添加到 canvas.
,则在鼠标悬停在矩形上方之前无法阻止鼠标悬停事件的发生有一些答案。这是我的:
我添加了一个功能来检测鼠标在 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>
希望对您有所帮助。