FabricJS文本框-某些字体的光标位置设置不正确 [英] FabricJS Textbox - The cursor position is not set correctly for certain fonts

问题描述

在上图中，光标应位于末尾，但由于某种原因，它被放置在最后一个字符之前. 这仅适用于某些字体.

In the above image, the cursor should be at the end, but for some reason, it is placed before the last character. This only happens for certain fonts.

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

I don't think it is related with how the custom font is being loaded, this image was taken from http://fabricjs.com/loadfonts. Also, the last version of the library is being used.

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

To reproduce the issue you have to do the following:

1. 将字体系列更改为"Pacifico".
2. 单击文本框以进入编辑模式.
3. 开始输入.

有时，即使最后一个字符也位于边界框之外. 我认为这与_measureChar()函数的执行方式有关，但是我不确定需要更改哪些内容.

Sometimes, even the last character goes outside of the bounding box. I think that this has something to do with how the _measureChar() function executes, but I'm not sure what needs to be changed.

提前谢谢！

修改: 我做了更多的测试，看来IE中没有这个问题. 此问题出现在Chrome和Firefox中. 在每个浏览器中如何呈现字符也很奇怪:

I did more tests and it seems that this problem is not present in IE. This problem appears in Chrome and Firefox. It is also strange how the characters are being rendered in each browser:

推荐答案

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

add below code before canvas.requestRenderAll();

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

这篇关于FabricJS文本框-某些字体的光标位置设置不正确的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！