大写 Fabric JS 上的文本输入

Question

我有一个 HTML5 画布，我打算在上面写作。 我正在使用 FabricJS。 但是，我希望文本输入为大写，而用户不必使用“大写锁定”。

我试过了

textbox.hiddenTextarea.autoCapitalize = "on";

和

让 textbox = new fabric.IText("", { textAlign: "center",
自动大写：“开”，

}

我什至也尝试过：

textbox.hiddenTextarea.onkeyup = (e) => { e.target.value = e.target.value.toUpperCase(); }

没有任何效果。 做我想要实现的目标的正确方法是什么？ 或者有什么黑客？ 请指出我正确的方向。

Answer 1

您可以使用此语法。 那么请获取 activeObject 。

activeObject.set('fontCharacterStyle', 'Caps');

Answer 2

我创建了 IText 的子类以允许将 textTransformation 设置为大写：

const TransformableText = fabric.util.createClass(fabric.IText, {
  _splitTextIntoLines: function() {
    const transformedText = this.textTransform === 'uppercase' ? this.text.toUpperCase() : this.text;

    return this.callSuper('_splitTextIntoLines', transformedText);
  },
});

可以用作：

const textbox = new TransformableText("", { textTransform: "uppercase" });