Canvas 使用fabricJS响应画布大小和iText渲染

我正在我的响应网页中使用fabricjs。我正在尝试向画布添加一些文本。到目前为止，这一切正常

因为网页是响应性的，所以画布容器的大小会根据视口的不同而变化。我希望画布总是占据容器元素的90%。因此，我正在缩放画布和其中的所有元素，以便它们保持相同的相对位置，但占据容器的90%。（->有没有更好的方法

一切正常，除了第一次加载画布时的文本渲染。文本元素似乎被拉伸了。其他元素（Rect、Graphic）被添加到ok中

应该是这样的。当我单击画布或启用浏览器的开发人员工具时，iText元素会被渲染到正确的大小

我曾尝试在iText对象上使用object.setCoords（），也尝试在许多帖子中建议使用canvas.calcOffset（），但不幸的是没有成功

对于iText元素，我的光标位置也有问题——当我点击元素并试图编辑它的内容时，coursor不会显示在字符之间（通常是在哪里），而是显示在字符上

---

有其他人遇到这个问题吗？当画布容器的大小发生变化时，在响应式设计中使用fabricjs的技巧是什么？

为了解决光标位置的问题，我们禁用iText对象的缓存

---

设置为false时，将禁用iText对象的（字符宽度）缓存

我不熟悉这个确切的库，但我知道，当涉及到画布大小时，你不能全部用CSS来完成-就像开发一个视频游戏和改变菜单中的分辨率一样，你自己（或fabricjs正在做）将有大量与像素相关的变量/计算这将需要更新以考虑新的尺寸。因此，与大多数元素类型的外观形式是静态的不同，它需要您自己为画布编写某种形式的“onresize”方法，这在某种程度上是有意义的。这当然是字体问题。您的CSS或其他样式相互冲突，并导致初始状态中出现不同的字体。如果你看这两幅图片，文本的大小并没有缩小…而是字体完全不同。谢谢你的回复@Katana314：我没有使用css来调整画布及其元素的大小。我是用js操作fabricJS画布元素的。@Vijay：我已经在画布渲染之后（当问题发生时）和文本渲染之后检查了字体系列，ok。在这两种情况下，字体系列是相同的——“ubuntumedium”、“Helvetica Neue”、Verdana、Arial、无衬线字体。因此字体系列不可能是问题所在。@knospe:您是在firebug css窗格中检查的还是以编程方式检查的？