FabricJS 文本框 - 某些字体的光标位置设置不正确

Posted 2023-03-25

【中文标题】FabricJS 文本框 - 某些字体的光标位置设置不正确

【英文标题】：FabricJS Textbox - The cursor position is not set correctly for certain fonts

【发布时间】：2018-05-07 19:11:16

【问题描述】：

在上图中，光标应该在末尾，但由于某种原因，它位于最后一个字符之前。 这只发生在某些字体上。

我认为这与自定义字体的加载方式无关，这张图片来自http://fabricjs.com/loadfonts。此外，正在使用该库的最新版本。

要重现该问题，您必须执行以下操作：

将字体系列更改为“Pacifico”。 点击文本框进入编辑模式。 开始输入。

有时，即使是最后一个字符也会超出边界框。 我认为这与 _measureChar() 函数的执行方式有关，但我不确定需要更改什么。

提前致谢！

编辑： 我做了更多的测试，似乎这个问题在 IE 中不存在。 这个问题出现在 Chrome 和 Firefox 中。 在每个浏览器中如何呈现字符也很奇怪：

【问题讨论】：

pacifico 有一些奇怪的字距调整，可能是测量错误

是的，我认为这可能是原因。我还注意到在 IE 中似乎没有出现问题。此外，每个字符的形状似乎在浏览器中并不一致。我更新了我的问题，添加了一张图片来显示这一点。

我认为这个问题可能与github.com/kangax/fabric.js/issues/3588有关

这个问题很久以前就解决了。 1.7 中的大部分文本代码不适用于 2.x

【参考方案1】：

在canvas.requestRenderAll()之前添加以下代码；

fabric.charWidthsCache[this.value] = ;
canvas.getActiveObject()._initDimensions();
canvas.getActiveObject().setCoords();

【讨论】：

我在 onInput() 方法中添加了这段代码，就在调用 requestRenderAll() 之前，但是光标位置仍然没有正确设置。

请添加 jsfiddle 所以我会在那里尝试

jsfiddle.net/f1v3/f12841gc 如果您选择“Times New Roman”，则不会出现此问题。我创建了一个 Textbox 子类，通过包含您指定的代码来修改 onInput() 函数