Как добавить функциональность Hover, используя JavaScript Canvas

Question

У меня есть элемент canvas, который является элементом canvas, состоящим из множества изображений. Я хочу добавить ярлык к каждому изображению на холсте, но хочу, чтобы он отображался только тогда, когда пользователь наводит курсор на правильное изображение.

Мне удалось заставить текст отображаться, но я не могу понять, как отображать его только при наведении курсора мыши и не показывать при отпускании мышью. В настоящее время я проверяю, совпадает ли позиция мыши с позицией мыши в массиве точек. Если это так, он добавляет текст.

canvas.addEventListener('mousemove', handleMouseMove.bind(this));


var handleMouseMove = function (e) {
    var mousePos = getSquare(canvas, e);
    var pos = points.filter((item => mousePos.x === item.x && mousePos.y === item.y));
    if (pos && pos.length) {
      context.fillStyle = "#ffffff";
      console.log(pos);
      context.fillText('Hello', pos[0].x, pos[0].y);
    } else {
      context.fillStyle = "#ffffff00";
      return;
    }
  };

  var getSquare = function (canvas, evt) {
    context.globalCompositeOperation = 'source-atop';
    var rect = canvas.getBoundingClientRect();
    return {
      x: 1 + (evt.clientX - rect.left) - (evt.clientX - rect.left) % 20,
      y: 1 + (evt.clientY - rect.top) - (evt.clientY - rect.top) % 20
    };
  };

По сути, я хочу, чтобы «Привет» отображался, но только когда вы наводите курсор на правильную позицию.

Answer 1

Полагаю, что вы можете сохранить холст в данные (возможно, base64.) Таким образом, когда пользователь наведет курсор мыши, перерисовать холст из данных хранилища.

Answer 2

Вот решение, которое может использовать несколько советов для ваших изображений:

var canvas = document.querySelector('canvas');
var context = canvas.getContext('2d');
var points = [
  {x: 10, y: 20}, 
  {x: 100, y: 50}
];
var images = [{
    src: 'https://via.placeholder.com/40', 
    tip: 'Hello',
    width: 40, height: 40
  }, {
    src: 'https://via.placeholder.com/80x50',
    tip: 'Another Image',
    width: 80, height: 50
  }
];
var drawImages = function () {
  context.clearRect(0,0,canvas.width,canvas.height);
  images.forEach(function (item, index) {
    if (item.img) {
      context.drawImage(item.img, points[index].x, points[index].y);
    } else {
      item.img = new Image();
      item.img.onload = function () {
        context.drawImage(item.img, points[index].x, points[index].y);
      }
      item.img.src = item.src;
    }
  }); 
};

drawImages();

var handleMouseMove = function (e) {
  drawImages();
  var mousePos = getSquare(canvas, e);
  var pos = points.filter((item, index) => (
    (mousePos.x >= item.x && mousePos.x <= item.x + images[index].width ) &&
    (mousePos.y >= item.y && mousePos.y <= item.y + images[index].height)
  ));
  if (pos && pos.length) {
    var index = points.indexOf(pos[0]);
    context.fillText(images[index].tip, mousePos.x, mousePos.y);
  }
};

var getSquare = function (canvas, evt) {
  var rect = canvas.getBoundingClientRect();
  return {
    x: 1 + (evt.clientX - rect.left),
    y: 1 + (evt.clientY - rect.top)
  };
};


canvas.addEventListener('mousemove', handleMouseMove.bind(this));

canvas {border: 1px solid #000}

<canvas>No canvas support</canvas>

Answer 3

Это классическое пересечение, вы должны сравнить x и y положение мыши с x, y, шириной и высотой изображений на холсте.Если они пересекаются, покажите этикетку.

Вы можете сделать это с помощью некоторой относительно простой математики или использовать для этого функцию isPointInPath .

Некоторый сверхпростой псевдокод, есть более удобные способыэто;

image = x20,y50,w200,h100
mouse = x30,y40

if  mouse.x >= image.x
and mouse.x <= image.x + image.width
and mouse.y >= image.y
and mouse.y <= image.y + image.height {
    // mouse is over image
}