交互式Canvas：掌握为内部元素添加事件的艺术

2023-12-16 01:54:16

Canvas事件处理：让你的图形界面栩栩如生

事件委托：开启 canvas 事件处理

说到在 canvas 上添加交互功能，事件委托是关键。它让我们能够将事件监听器附加到 canvas 元素上，就像一个中央指挥部，当内部元素触发事件时，这些事件会向上冒泡到 canvas，被它捕获。这样一来，我们就不必为每个子元素单独设置监听器，既方便又高效。

click 事件：点击矩形，获取信息

我们从 click 事件开始，它是 canvas 事件处理的基础。通过绑定一个 click 事件监听器，当用户点击 canvas 时，我们可以获取鼠标点击的位置，然后遍历 canvas 上的所有矩形，检查鼠标是否位于哪个矩形内。如果命中，我们就弹出一个窗口，显示该矩形的详细信息。

canvas.addEventListener('click', function(e) {
  var x = e.clientX;
  var y = e.clientY;
  for (var i = 0; i < rectangles.length; i++) {
    if (x >= rectangles[i].x && x <= rectangles[i].x + rectangles[i].width &&
        y >= rectangles[i].y && y <= rectangles[i].y + rectangles[i].height) {
      alert("矩形信息：\n" + "x: " + rectangles[i].x + "\n" +
              "y: " + rectangles[i].y + "\n" +
              "width: " + rectangles[i].width + "\n" +
              "height: " + rectangles[i].height);
    }
  }
});

mouseover 事件：悬停矩形，显示信息

为了增强交互性，我们还可以添加一个 mouseover 事件监听器。当用户悬停在某个矩形上时，它会触发该监听器，我们可以显示矩形的信息，而无需点击。

canvas.addEventListener('mouseover', function(e) {
  var x = e.clientX;
  var y = e.clientY;
  for (var i = 0; i < rectangles.length; i++) {
    if (x >= rectangles[i].x && x <= rectangles[i].x + rectangles[i].width &&
        y >= rectangles[i].y && y <= rectangles[i].y + rectangles[i].height) {
      console.log("矩形信息：\n" + "x: " + rectangles[i].x + "\n" +
              "y: " + rectangles[i].y + "\n" +
              "width: " + rectangles[i].width + "\n" +
              "height: " + rectangles[i].height);
    }
  }
});

示例代码：让矩形活起来

现在，有了这些事件处理功能，让我们写一个示例代码，让矩形在 canvas 上动起来：

// 创建一个新的 canvas 元素
var canvas = document.createElement('canvas');
canvas.width = 500;
canvas.height = 500;

// 获取 canvas 的绘图上下文
var ctx = canvas.getContext('2d');

// 创建一些矩形对象
var rectangles = [
  { x: 50, y: 50, width: 100, height: 100 },
  { x: 150, y: 150, width: 100, height: 100 },
  { x: 250, y: 250, width: 100, height: 100 }
];

// 绘制矩形
for (var i = 0; i < rectangles.length; i++) {
  ctx.fillStyle = 'red';
  ctx.fillRect(rectangles[i].x, rectangles[i].y, rectangles[i].width, rectangles[i].height);
}

// 添加 click 事件监听器
canvas.addEventListener('click', function(e) {
  var x = e.clientX;
  var y = e.clientY;
  for (var i = 0; i < rectangles.length; i++) {
    if (x >= rectangles[i].x && x <= rectangles[i].x + rectangles[i].width &&
        y >= rectangles[i].y && y <= rectangles[i].y + rectangles[i].height) {
      alert("矩形信息：\n" + "x: " + rectangles[i].x + "\n" +
              "y: " + rectangles[i].y + "\n" +
              "width: " + rectangles[i].width + "\n" +
              "height: " + rectangles[i].height);
    }
  }
});

// 添加 mouseover 事件监听器
canvas.addEventListener('mouseover', function(e) {
  var x = e.clientX;
  var y = e.clientY;
  for (var i = 0; i < rectangles.length; i++) {
    if (x >= rectangles[i].x && x <= rectangles[i].x + rectangles[i].width &&
        y >= rectangles[i].y && y <= rectangles[i].y + rectangles[i].height) {
      console.log("矩形信息：\n" + "x: " + rectangles[i].x + "\n" +
              "y: " + rectangles[i].y + "\n" +
              "width: " + rectangles[i].width + "\n" +
              "height: " + rectangles[i].height);
    }
  }
});

// 将 canvas 添加到文档中
document.body.appendChild(canvas);