1. 概述
FabricJS 是一个强大的 JavaScript 库，被广泛用于构建 Web 应用程序中的 Canvas 元素。其中，图像缩放是 Canvas 的重要功能之一，它使应用程序更具有交互性和可视化效果。然而，FabricJS 的默认缩放操作可能会导致图像在水平和垂直方向上不均匀地缩放。本文将介绍如何实现在水平和垂直方向上均匀缩放 FabricJS 图像。
2. FabricJS 图像缩放
FabricJS 图像缩放是通过 canvas 的 scale 方法实现的。默认情况下，图像按比例缩放。例如，下面的代码将使图像宽度和高度都缩小到原来的一半：
canvas.getActiveObject().scale(0.5);
canvas.renderAll();
3. 水平和垂直方向的均匀缩放
3.1 理解缩放因子
要实现水平和垂直方向上的均匀缩放，我们需要理解缩放因子。缩放因子是指要应用于图像的缩放的宽度和高度的比率。默认情况下，实现的缩放因子是相等的，因此宽度和高度会以相同比例缩小或放大。如果我们想要在水平和垂直方向上以不同的比例缩放图像，我们需要使用自定义缩放因子。
3.2 自定义缩放因子
通过在 scale 方法中提供两个参数，我们可以自定义缩放因子。第一个参数是水平缩放因子，第二个参数是垂直缩放因子。这些因子是小数，表示当前尺寸的百分比。例如，如果我们想把图像的宽度缩小到原来的一半，但保持高度不变，我们可以这样做：
canvas.getActiveObject().scale(0.5, 1);
canvas.renderAll();
在上面的代码中，我们将水平缩放因子设置为 0.5（缩小了一半），并将垂直缩放因子设置为 1（不变）。这将使图像在水平方向上缩小到原来的一半，但在垂直方向上保持不变。
3.3 均匀缩放因子
要实现在水平和垂直方向上均匀缩放图像，我们需要使用相同的缩放因子。这意味着，我们需要找到宽度和高度的平均值，并将缩放因子设置为这个平均值除以目前的宽度或高度。
var obj = canvas.getActiveObject();
var avg = (obj.width + obj.height) / 2;
var scaleFactor = avg / (obj.width);
obj.scale(scaleFactor, scaleFactor);
canvas.renderAll();
在上面的代码中，我们获取当前激活的对象，计算出宽度和高度的平均值，然后将缩放因子设置为平均值除以当前的宽度。这将以相同的比例缩放宽度和高度。
结论
在本文中，我们已经学习了如何在水平和垂直方向上均匀缩放 FabricJS 图像。我们可以通过自定义缩放因子来控制宽度和高度的缩放比例，也可以使用相同的缩放因子来以相等的比例缩放宽度和高度。