大写 Fabric JS 上的文本输入答案

【问题标题】：Capitalize text input on Fabric JS大写 Fabric JS 上的文本输入
【发布时间】：2017-11-10 03:59:56
【问题描述】：

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

我试过了

textbox.hiddenTextarea.autoCapitalize = "on";

和

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

}

我也试过了：

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

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

【问题讨论】：

我正在尝试做同样的事情，但我认为 fabric.js IText 上没有 autoCapitalize 属性。文档中没有列表。你从哪里得到这个属性的？

标签： javascript html event-handling html5-canvas fabricjs

【解决方案1】：

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

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

【讨论】：

它不起作用，你有关于fabricjs这个属性的任何文档吗？
@ThoBuiNgoc 感谢评论，但亲爱的，我在我的项目中为 fabricjs 3.1.0 版本使用了相同的代码，它对我有用
你需要自定义fabricjs来使用这个属性设置吗？我在 fabricjs 源代码中寻找这个属性，但我找不到这个属性。你能给我一个演示代码来解决这个问题吗？谢谢！
我没有做任何事情或自定义，我刚刚为我的项目选择了fabricjs 3.1.0，并简单地获取了文本的activeobject并使用了这段代码。 activeObject.set('fontCharacterStyle', 'Caps');

【解决方案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" });

【讨论】：