大写 Fabric JS 上的文本输入

Posted 2023-03-25

【中文标题】大写 Fabric JS 上的文本输入

【英文标题】：Capitalize text input on 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 属性。文档中没有列表。你从哪里得到这个属性的？

【参考方案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" );