FabricJS 中怎样禁用矩形的居中缩放

在使用 FabricJS 进行图形处理与交互开发时，有时我们需要对矩形的缩放行为进行特定设置，比如禁用矩形的居中缩放。这一需求在某些特定场景下非常实用，例如当我们希望用户以矩形的某个角点为基准进行缩放操作，而不是默认的以中心为基准时。

要在 FabricJS 中禁用矩形的居中缩放，首先要了解 FabricJS 中缩放的基本原理。默认情况下，当对矩形执行缩放操作时，它会围绕其中心点进行缩放，这是由其内部的坐标计算和变换逻辑决定的。

我们可以通过自定义矩形的缩放行为来实现禁用居中缩放。一种常见的方法是通过修改矩形的 scaleX 和 scaleY 属性的更新逻辑。具体来说，我们可以在缩放操作的回调函数中，改变缩放的原点。

假设我们已经创建了一个 FabricJS 的矩形实例 rect。我们可以通过如下代码来改变其缩放行为：

rect.on('scaling', function (e) {
    var scaleX = e.transform.scaleX;
    var scaleY = e.transform.scaleY;
    var originX = rect.originX;
    var originY = rect.originY;
    // 以左上角为缩放原点
    rect.set({
        left: rect.left - (rect.width * (scaleX - 1) * (originX === 'left'? 0 : 0.5)),
        top: rect.top - (rect.height * (scaleY - 1) * (originY === 'top'? 0 : 0.5)),
        scaleX: scaleX,
        scaleY: scaleY
    });
    rect.setCoords();
});

在这段代码中，我们监听了矩形的 scaling 事件。当缩放发生时，获取当前的缩放因子 scaleX 和 scaleY，以及当前设置的原点 originX 和 originY。通过重新计算矩形的 left 和 top 坐标，我们改变了缩放的原点，从而实现了不再以中心为基准缩放，也就禁用了居中缩放。最后，调用 setCoords 方法来更新矩形的内部坐标缓存，以确保后续的交互和显示正常。

通过这种方式，在 FabricJS 开发中，我们能够灵活控制矩形的缩放行为，满足各种复杂的业务需求，为用户带来更加符合预期的交互体验。