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

2024-03-02

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

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

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

  1. 将字体系列更改为“Pacifico”。
  2. 单击文本框即可进入编辑模式。
  3. 开始打字。

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

提前致谢!

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: enter image description here


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

fabric.charWidthsCache[this.value] = {};
canvas.getActiveObject()._initDimensions();
canvas.getActiveObject().setCoords();
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

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

  • setAngle 不是 Fabricjs 的函数

    我最近开始使用fabricjs 我有一个关于连接对象的问题 我正在创建用于连接的示例演示parent object to child object用箭头连接 我得到了示例演示http kpomservices com HTML5Canvas
  • 在fabric.js中编写乳胶公式

    我希望能够在 Fabric js 画布中用乳胶编写公式 也许可以使用 MathJax http fabricjs com fabric intro part 2 text http fabricjs com fabric intro par
  • Fabric.js + 谷歌字体

    可以用吗Fabric js https github com kangax fabric js wiki How to render text使用网络字体 而不附加 Cufon 库及其字体 我可以使用标准画布功能轻松做到这一点 所以我想知道
  • 如何使用 Fabric.js 设置对比度和饱和度

    我想在图像编辑器中设置对比度 饱和度和色调 为此 我使用fabric js 但它只有亮度选项 这是我的 Fabric JS 代码 function fabric Object prototype transparentCorners fal
  • Fabric.js:如何填充徒手路径来绘制形状?

    在fabric js中 我们可以徒手绘制路径 例如http fabricjs com freedrawing http fabricjs com freedrawing 但是 在 HTML canvas 2d context ctx 中 我
  • 具有 CSS 类的 img 的 DataURL

    我必须应用一些样式 img 感谢 CSS 类 是否有可能获得dataURL of the img 与CSS样式 function Original const imgOriginal document getElementById orig
  • 如何禁用 freedrawfabricjs 选择

    在 FabricJs 中使用 FreeDrawing 绘制某些内容后 您可以选择绘制的内容并移动它 有没有办法禁用此选择 如果您不需要在画布上进行任何交互 您可以使用静态画布 var canvas this canvas new fabri
  • 如何在FabricJs中设置相对位置(oCoords)?

    我在fabricJs中有一个文本 我设置了顶部和左侧 这会将 aCoords 正确设置为这些值 但是 oCoords 不匹配 并且文本未显示在正确的位置 我怀疑我需要以某种方式设置为 oCoords 以便文本显示在画布上的右侧像素坐标 顶部
  • FabricJS 文本框 - 某些字体的光标位置设置不正确

    在上图中 光标应该位于末尾 但由于某种原因 它被放置在最后一个字符之前 这只发生在某些字体上 我认为这与自定义字体的加载方式无关 该图像取自http fabricjs com loadfonts http fabricjs com load
  • Fabricjs intersectsWithObject 当对象为 Fabric.Rect 时返回 false

    我试图在观察 object moving 事件时确定fabric Rect何时与另一个fabric Rect重叠 但fabric Group与fabric Rect之间的结果不一致 当我将 Group 移动到 Rect 实例上时 inter
  • FabricJS 触摸平移/缩放整个画布

    我需要在 FabricJS 画布上启用触摸缩放 平移 有些库允许在图像上执行此行为 请参阅捏缩放画布 https github com vash15 pinch zoom canvas 或通过鼠标单击事件 参见这个小提琴 http jsfi
  • 某些字体的字符宽度计算错误,可以自动缩进

    i create a normal textbox and type some i s inside the font i use is Lobster1 3 as you can see i just selection one char
  • 在fabricJS中以相同的左原点缩放时保持相同的对象大小

    我见过这个帖子 https stackoverflow com questions 48578974 maintaining object size while zooming in fabric js并尝试仅使用 X 缩放来完成我自己的功
  • 使用fabric js连接两个对象

    我目前有一个画布应用程序 可以在其中添加对象 形状 这是我的FIDDLE http jsfiddle net vxqL4yg9 您基本上单击新模拟将初始化画布 然后您可以添加圆形或矩形 我正在尝试添加一个名为 添加子项 的功能 您可以在其中
  • 尝试在 FabricJS 中使用句柄创建对话气泡

    我正在尝试使用 FabricJS 创建一个语音气泡 以集成到 WordPress 插件中 希望 免费发布 以帮助人们注释图像 我在这里找到了原始的气泡 语音气泡 html5 canvas js https stackoverflow com
  • Fabric.js 鼠标右键单击

    有没有办法在 Fabric js 画布上接收右键单击鼠标事件 以下代码仅适用于左键单击 canvas observe mouse down function console log mouse down NOTE 上面的大多数答案都已经过时
  • 添加到画布后更改文本

    在fabric js中 我正在制作矩形组和文本字段 然后将其添加到画布中 我正在使用以下代码 但是一旦将文本字段添加到画布中 我可以更改文本字段的文本吗 我做了小提琴请检查 http jsfiddle net HAb4N 5 http js
  • 使用groupSVGElements后如何选择子元素

    我正在将 svg 加载到具有子元素的 Fabric 中 我使用 groupSVGElements 对它们进行分组 我需要能够选择每个子元素 这是一个 onclick 事件 允许我选择一个子对象 我把这个小提琴放在一起http jsfiddl
  • 如何使用 Fabric js 以编程方式自由绘制?

    使用 Fabric js 构建多人涂鸦 尝试使用 Fabric js 实现多人涂鸦 想法是当 U1 在画布上绘制时 我们将点推送到 RTDB 并在客户端上获取这些点 并以编程方式在两个客户端中绘制笔画 您可以将画布的数据保存在path cr
  • Fabric.js 如何在不拉伸文本的情况下水平调整 IText 大小

    我在父 Group 对象中有这个 IText 对象 当我选择组并水平 以及垂直 调整其大小时 IText 也会调整大小 这使得文本拉伸并且看起来很糟糕 现在我想做的是将 IText 中心本身 保持其纵横比 放在组内 我怎样才能做到这一点 我

随机推荐