轻松掌握Canvas高级路径操作之拖拽对象

2023-11-22 05:00:57

在Canvas世界里，让拖拽对象随心所欲

探索拖拽对象的奥秘

在Canvas的虚拟画布上，交互式元素的实现离不开拖拽功能。从简单的按钮到复杂的图形，拖拽赋予了这些元素自由移动的能力，让用户与画布之间的互动更加直观和高效。而这一切的幕后功臣，正是Canvas提供的强大API——isPointInPath()。

isPointInPath() API是判定一个点是否位于路径中的关键依据。它为拖拽操作提供了判断鼠标指针位置的基石，让我们可以精确定位被拖拽的对象。

拖拽对象的原理

要理解拖拽对象的原理，我们需要深入剖析它的运作步骤：

鼠标按下： 当鼠标指针落在画布上并按下时，程序需要判断指针所在的位置是否在某个对象上。此时，isPointInPath()登场，它将判断指针的位置是否落在对象的路径内。如果落在路径内，则进入下一步；否则，此次鼠标按下事件会被忽略。
鼠标移动： 如果鼠标指针位于对象上，随着鼠标的移动，对象的位置也需要随之改变。程序需要不断获取鼠标的当前位置，并根据位置信息计算出对象的偏移量。
鼠标松开： 当鼠标松开时，拖拽操作宣告结束，对象的位置被固定在当前位置。

代码实现：拖拽一个矩形

掌握了拖拽对象的原理，让我们动手实现一个拖拽矩形的实例：

<canvas id="canvas" width="500" height="500"></canvas>

<script>
  const canvas = document.getElementById('canvas');
  const ctx = canvas.getContext('2d');

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

  // 鼠标按下事件处理函数
  canvas.addEventListener('mousedown', onMouseDown);

  // 鼠标移动事件处理函数
  canvas.addEventListener('mousemove', onMouseMove);

  // 鼠标松开事件处理函数
  canvas.addEventListener('mouseup', onMouseUp);

  let isDragging = false;
  let startX, startY;

  // 鼠标按下事件处理函数
  function onMouseDown(e) {
    // 获取鼠标当前位置
    const x = e.clientX;
    const y = e.clientY;

    // 判断鼠标指针是否位于矩形内
    if (ctx.isPointInPath(x, y)) {
      isDragging = true;
      startX = x;
      startY = y;
    }
  }

  // 鼠标移动事件处理函数
  function onMouseMove(e) {
    if (isDragging) {
      // 获取鼠标当前位置
      const x = e.clientX;
      const y = e.clientY;

      // 计算矩形的偏移量
      const dx = x - startX;
      const dy = y - startY;

      // 将矩形移动
      ctx.translate(dx, dy);

      // 重新绘制矩形
      ctx.fillStyle = 'red';
      ctx.fillRect(100, 100, 100, 100);
    }
  }

  // 鼠标松开事件处理函数
  function onMouseUp() {
    isDragging = false;
  }
</script>

这个例子中，我们通过isPointInPath()判断鼠标指针是否落在矩形上，从而实现矩形的拖拽。

拓展：拖拽多个对象

如果我们想在画布上拖拽多个对象，该怎么办呢？我们可以为每个对象添加独立的路径，并分别判断鼠标指针是否落在这些路径内。

<canvas id="canvas" width="500" height="500"></canvas>

<script>
  const canvas = document.getElementById('canvas');
  const ctx = canvas.getContext('2d');

  // 存储所有对象的路径
  const paths = [];

  // 存储所有对象的拖拽状态
  const isDragging = [];

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

  // 将矩形对象的路径添加到paths数组中
  paths.push(ctx.getPath());

  // 将矩形对象的拖拽状态添加到isDragging数组中
  isDragging.push(false);

  // 绘制一个圆形
  ctx.fillStyle = 'blue';
  ctx.beginPath();
  ctx.arc(200, 200, 50, 0, 2 * Math.PI);
  ctx.fill();

  // 将圆形对象的路径添加到paths数组中
  paths.push(ctx.getPath());

  // 将圆形对象的拖拽状态添加到isDragging数组中
  isDragging.push(false);

  canvas.addEventListener('mousedown', onMouseDown);
  canvas.addEventListener('mousemove', onMouseMove);
  canvas.addEventListener('mouseup', onMouseUp);

  function onMouseDown(e) {
    // 获取鼠标当前位置
    const x = e.clientX;
    const y = e.clientY;

    // 遍历所有对象的路径
    for (let i = 0; i < paths.length; i++) {
      // 判断鼠标指针是否位于当前对象上
      if (ctx.isPointInPath(x, y, paths[i])) {
        // 如果鼠标指针位于对象上，则开始拖拽
        isDragging[i] = true;

        // 记录鼠标按下的位置，以便计算出对象的偏移量
        startX = x;
        startY = y;

        // 跳出循环，因为我们只需要找到第一个被拖拽的对象
        break;
      }
    }
  }

  function onMouseMove(e) {
    // 遍历所有对象的拖拽状态
    for (let i = 0; i < isDragging.length; i++) {
      // 如果当前对象正在拖拽
      if (isDragging[i]) {
        // 获取鼠标当前位置
        const x = e.clientX;
        const y = e.clientY;

        // 计算出对象的偏移量
        const dx = x - startX;
        const dy = y - startY;

        // 将对象的坐标加上偏移量，实现拖拽
        ctx.translate(dx, dy);

        // 重新绘制对象
        ctx.fillStyle = i === 0 ? 'red' : 'blue';
        if (i === 0) {
          ctx.fillRect(100, 100, 100, 100);
        } else {
          ctx.beginPath();
          ctx.arc(200, 200, 50, 0, 2 * Math.PI);
          ctx.fill();
        }
      }
    }
  }

  function onMouseUp() {
    // 将所有对象的拖拽状态设为false
    for (let i = 0; i < isDragging.length; i++) {
      isDragging[i] = false;
    }
  }
</script>