使用 Canvas 构建可拖动、可缩放的交互式图形

2023-09-08 04:15:42

借助 Canvas 的强大功能，探索绘制、拖放和缩放形状的奇妙世界，赋予您的 Web 应用程序以生命和互动性。踏上引人入胜的旅程，我们将逐步指导您，从构建画布对象到实现直观的用户交互。

在 Web 开发的广阔领域中，Canvas 元素脱颖而出，因为它具有绘制和操纵图形的非凡能力。通过它的 API，开发人员可以释放他们的想象力，在浏览器的画布上创造出令人惊叹的视觉效果。今天，我们将深入探究如何使用 Canvas 绘制形状，并赋予它们拖动和缩放的交互功能。

1. 构建画布

我们的旅程始于创建一个 HTML5 Canvas 元素。这个元素将充当我们绘制形状和处理用户交互的画板。让我们使用 JavaScript 来获取对 Canvas 元素的引用：

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

2. 绘制形状

有了画布，现在我们可以绘制形状了。我们使用 ctx 对象来访问画布的绘图上下文，该对象提供了绘制形状的各种方法。让我们绘制一个圆：

ctx.beginPath();
ctx.arc(100, 100, 50, 0, 2 * Math.PI);
ctx.fill();

同样，我们可以绘制矩形、三角形和任何其他所需的形状。

3. 支持拖动

要使形状可拖动，我们需要监听 mousedown 事件。当用户按住鼠标按钮时，我们会将该形状标记为被选中，并在鼠标移动时跟踪其位置：

let selectedShape = null;

canvas.addEventListener("mousedown", (e) => {
  const shape = getShapeAtCoordinates(e.clientX, e.clientY);
  if (shape) {
    selectedShape = shape;
  }
});

canvas.addEventListener("mousemove", (e) => {
  if (selectedShape) {
    moveShape(selectedShape, e.clientX, e.clientY);
  }
});

4. 支持缩放

对于缩放功能，我们监听 mousewheel 事件。当用户滚动鼠标滚轮时，我们将相应地调整形状的大小：

canvas.addEventListener("mousewheel", (e) => {
  const shape = getShapeAtCoordinates(e.clientX, e.clientY);
  if (shape) {
    scaleShape(shape, e.deltaY);
  }
});