如何使用JavaScript Canvas添加懸停功能

Question

我有一個canvas元素，它是由一堆圖像組成的canvas元素。 我想為畫布上的每個圖像添加一個標簽，但是只希望當用戶將鼠標懸停在正確的圖像上時才顯示它。

我設法顯示了一些文本，但我想不出如何只在鼠標懸停時顯示它而不在mouseleave上顯示。 目前，我正在檢查鼠標位置是否與points數組的鼠標位置匹配。 如果這樣做，則會添加文本。

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
    };
  };

本質上，我希望“ Hello”出現，但僅當您將鼠標懸停在正確的位置上時。

Answer 1

這是經典的交集，您必須將鼠標的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
}

Answer 2

我猜您可以將畫布保存到數據（可能是base64。）因此，當用戶將鼠標移出時，請從存儲數據中重畫畫布。

Answer 3

這是一個可以對圖像使用多種技巧的解決方案：

 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>