0

В canvas нарисованы две фигуры, подскажите можно ли обрабатывать событие при наведении мыши на фигуру без использования сторонних библиотек и если то как?

1
  • Если вам помог ответ, примите его пожалуйста.
    – Axenow
    18 окт 2018 в 6:42

1 ответ 1

2

Вы не можете это сделать за canvas. Canvas - это только bitmap, поэтому hover логика должна быть реализована вручную.

Как это можно сделать:

  • Сохранить все ваши фигуры как простые объекты
  • Для каждого движения мыши на canvas:
    • Взять позицию мыши
    • Пройтись по всем элементам листа объектов
    • Использовать isPointInPath() чтобы определить "hover"
    • Перерисовать оба состояния.

Например

var canvas = document.querySelector("canvas"),
    ctx = canvas.getContext("2d"),
    rects = [
        {x: 10, y: 10, w: 200, h: 50},
        {x: 50, y: 70, w: 150, h: 30}    // etc.
    ], i = 0, r;

// render initial rects.
while(r = rects[i++]) ctx.rect(r.x, r.y, r.w, r.h);
ctx.fillStyle = "blue"; ctx.fill();

canvas.onmousemove = function(e) {

  // important: correct mouse position:
  var rect = this.getBoundingClientRect(),
      x = e.clientX - rect.left,
      y = e.clientY - rect.top,
      i = 0, r;
  
  ctx.clearRect(0, 0, canvas.width, canvas.height); // for demo
   
  while(r = rects[i++]) {
    // add a single rect to path:
    ctx.beginPath();
    ctx.rect(r.x, r.y, r.w, r.h);    
    
    // check if we hover it, fill red, if not fill it blue
    ctx.fillStyle = ctx.isPointInPath(x, y) ? "red" : "blue";
    ctx.fill();
  }

};
<canvas/>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.