巧妙运用 Canvas 图形事件委托，缔造灵动互动！

2023-10-05 02:39:28

赋予 Canvas 图形生命力：事件代理的艺术

让图形对象栩栩如生

在数字世界的广袤空间中，Canvas 图形以其无限的可能性和丰富的表现力脱颖而出。但让这些图形对象真正焕发光彩的秘诀在于赋予它们生命，使其响应用户的交互。而事件代理正是这一魔法的源泉。

事件代理的魅力

事件代理是一种巧妙的机制，它允许我们通过监听父级元素来捕捉子元素的事件。想象一下一个包含多个按钮的画布，每个按钮都有自己独特的行为。使用传统的事件处理方法，我们将不得不为每个按钮添加单独的事件监听器。然而，通过事件代理，我们可以优雅地将所有事件集中到画布本身上。

这种方法不仅简化了代码结构，更显著提升了性能。通过将事件监听集中在一个父级元素上，我们消除了为每个子元素逐一添加监听器的开销。这对于包含大量元素的复杂应用程序尤为重要。

事件代理的实践

为了更好地理解事件代理的实际应用，我们准备了两个示例，演示如何利用它来实现点击和拖拽事件。

示例一：捕捉画布上的点击

const canvas = document.getElementById("myCanvas");
const context = canvas.getContext("2d");

// 绘制一个矩形
context.fillStyle = "red";
context.fillRect(100, 100, 100, 100);

// 添加点击事件监听器
canvas.addEventListener("click", (event) => {
  // 获取鼠标点击坐标
  const x = event.clientX;
  const y = event.clientY;

  // 检查鼠标是否点击在矩形内
  if (x >= 100 && x <= 200 && y >= 100 && y <= 200) {
    // 点击在矩形内，改变颜色
    context.fillStyle = "blue";
    context.fillRect(100, 100, 100, 100);
  }
});

在这个示例中，我们监听了 Canvas 的点击事件。当用户单击画布时，我们将获取鼠标点击的坐标，并检查点击是否落在矩形区域内。如果是，则矩形将变为蓝色。

示例二：拖拽画布上的矩形

const canvas = document.getElementById("myCanvas");
const context = canvas.getContext("2d");

// 绘制一个矩形
context.fillStyle = "red";
context.fillRect(100, 100, 100, 100);

// 添加拖拽事件监听器
canvas.addEventListener("mousedown", (event) => {
  // 获取鼠标点击坐标
  const x = event.clientX;
  const y = event.clientY;

  // 检查鼠标是否点击在矩形内
  if (x >= 100 && x <= 200 && y >= 100 && y <= 200) {
    // 开始拖拽矩形
    let isDragging = true;

    // 添加鼠标移动事件监听器
    canvas.addEventListener("mousemove", (event) => {
      if (isDragging) {
        // 获取鼠标移动的坐标
        const newX = event.clientX;
        const newY = event.clientY;

        // 计算矩形的新位置
        const dx = newX - x;
        const dy = newY - y;

        // 移动矩形
        context.clearRect(0, 0, canvas.width, canvas.height);
        context.fillStyle = "red";
        context.fillRect(100 + dx, 100 + dy, 100, 100);
      }
    });

    // 添加鼠标抬起事件监听器
    canvas.addEventListener("mouseup", () => {
      // 停止拖拽
      isDragging = false;
    });
  }
});