如何使用 FabricJS 禁用 Textbox 的居中缩放？

1. 简介

FabricJS是一个非常受欢迎的JavaScript库，它用于在HTML5 Canvas上创建交互式的图形设计。然而，有时会出现一些问题，例如默认情况下FabricJS的TextBox在居中缩放时会失去精度，这会影响用户体验。因此，本文将向您展示如何使用FabricJS禁用TextBox的居中缩放。

2. FabricJS中TextBox的居中缩放问题

FabricJS中的一个基本元素是TextBox。它允许您在Canvas上添加文本，支持自动换行和调整大小等功能。当您选择TextBox并尝试改变其大小时，它会现在中心处大小方向的箭头，如下图所示：

然而，对于某些场景，这种居中缩放是不精确的。当调整比较小的TextBox大小时，你会发现它的位置会稍微移动。这可能会导致用户体验不佳，特别是对于有要求的场景，例如图形设计。

3. 禁用TextBox的居中缩放

为了禁用TextBox的居中缩放，请覆盖TextBox类中的_setPositionDimensions方法，并在其中插入以下代码：

fabric.TextBox.prototype._setPositionDimensions = function() {

    fabric.Textbox.prototype._setPositionDimensions.apply(this, arguments);
    this.centeredScaling = false;
};

这将重新定义_setPositionDimensions方法，并将centeredScaling属性设置为false。这个方法会在每次调用的时候先执行基类的_setPositionDimensions方法，然后重新定义centeredScaling属性。

注意：在现有代码基础上，应该在新实例化对象之前使用该片段。因为内部类的定义只会在对象创建时运行，所以它将覆盖默认值。

即如果我们已经有下列代码，FabricJS将会在其内部中重新定义_setPositionDimensions方法：

var textbox = new fabric.Textbox('Hello World', {

    left: 100,
    top: 100,
});

我们现在需要这样修改它：

fabric.TextBox.prototype._setPositionDimensions = function() {

    fabric.Textbox.prototype._setPositionDimensions.apply(this, arguments);
    this.centeredScaling = false;
};
var textbox = new fabric.Textbox('Hello World', {
    left: 100,
    top: 100,
});

这样做后，TextBox的居中缩放就被禁用了，您可以进行准确的调整。

4. 结论

在FabricJS中禁用TextBox的居中缩放需要通过覆盖_setPositionDimensions方法，并在其中设置centeredScaling属性来实现。通过这样的方式，您可以拥有一个更准确和出色的Canvas文本工具。