Как я могу заставить мою мышь работать так, как я хочу?

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

Есть несколько ответов. Это мое:

Я добавил функцию для определения положения мыши на холсте: oMousePos. Пожалуйста, прочитайте о метод 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>

Надеюсь, это поможет.

Answer 2

Просто переместите деталь, которая проверяет координаты мыши на наличие <20, в вашу тестовую функцию и задайте ее как событие параметра. Это должно сработать, если я правильно понял ваш вопрос. Вы не можете предотвратить событие mousover, пока мышь не окажется над прямоугольником, если вы добавите прослушиватель событий на холст. </p>

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

Я думаю, вам просто нужно проверить положение события 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);
}