学会图形缩放，你也可以成为绘画高手

2023-03-31 16:24:02

内容缩放至适应画布，轻松搞定图像难题

在图形编辑器的世界里，缩放功能就像一把万能钥匙，可以轻松调整图像大小，适应不同的画布尺寸。今天，我们就来聊聊如何让内容缩放至适应画布大小，让你在创作过程中更加得心应手。

计算包围盒：图像的边界

缩放至适应画布，说白了就是让图像在画布上看起来不留空白，也不至于被裁剪。为了实现这个目标，我们需要用到一个叫包围盒的概念。包围盒就是把所有图形都框起来的一个矩形，只要画布的大小刚好能容纳这个包围盒，图像就能完美适应画布了。

计算包围盒的步骤如下：

遍历所有图形，找到它们的最左上角坐标和最右下角坐标。
用这些坐标计算出包围盒的左上角坐标和右下角坐标。
根据包围盒的坐标，计算出它的宽度和高度。

举个例子，假设我们有两个矩形，一个位于 (0, 0) 点，宽度为 100，高度为 50；另一个位于 (50, 50) 点，宽度为 50，高度为 100。那么，包围盒的左上角坐标为 (0, 0)，右下角坐标为 (150, 150)，宽度为 150，高度为 150。

调整画布大小：为图像腾出空间

知道了包围盒的大小，就可以调整画布的大小了。这里要注意，画布的大小必须大于或等于包围盒的大小，否则图像就会被裁剪。

回到上面的例子，由于包围盒的宽度和高度都是 150，因此画布的宽度和高度也必须至少为 150。我们可以将画布设置为 200 x 200，这样图像就可以完全容纳在画布中了。

缩放图像：均匀改变大小

调整好画布大小后，就可以缩放图像了。这里要注意，缩放比例必须是均匀的，否则图像就会变形。

缩放比例就是新尺寸与原始尺寸的比值。在上面的例子中，画布的宽度和高度都比包围盒大 1/3，因此图像的缩放比例为 1.33。

代码示例：让它发挥作用

理论讲完了，现在让我们用代码来实现它。以下是一个 JavaScript 函数，它可以根据包围盒的大小来缩放图像以适应画布：

function zoomToFit(canvas, graphics) {
  // 计算包围盒
  let boundingBox = getBoundingBox(graphics);

  // 调整画布大小
  canvas.width = boundingBox.width;
  canvas.height = boundingBox.height;

  // 缩放图像
  let scaleX = canvas.width / boundingBox.width;
  let scaleY = canvas.height / boundingBox.height;
  graphics.scale(scaleX, scaleY);

  // 重新绘制图像
  graphics.render(canvas);
}

使用这个函数，你就可以轻松地将任何图像缩放至适应画布大小了。