FabricJS Textbox - The cursor position is not set correctly for certain fonts

。_饼干妹妹 提交于 2020-05-17 05:53:42

问题


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.

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. Change the font-family to "Pacifico".
  2. Click on the text box to enter in edit mode.
  3. Start typing.

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.

Thanks in advance!

Edit: 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:


回答1:


add below code before canvas.requestRenderAll();

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


来源:https://stackoverflow.com/questions/47461935/fabricjs-textbox-the-cursor-position-is-not-set-correctly-for-certain-fonts

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!