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

Question

我在响应式网页中使用了fabricjs。我试图在画布上添加一些文字。到目前为止这个工作正常。

由于网页具有响应性，因此画布容器会根据视口的大小进行更改。我希望画布总是占用容器元素的90％。因此，我正在缩放画布及其中的所有元素，以便它们保持相同的相对位置，但占据容器的90％。 （ - ＆gt;有更好的方法吗？）

除了第一次加载画布时的文本渲染外，一切正常。文本元素似乎是街头的。其他元素（Rect，Graphic）添加正常。

它应该是这样的。当我点击画布或启用浏览器的开发工具时，iText元素将呈现为正确的大小。

我已经尝试在iText对象上使用object.setCoords（）以及canvas.calcOffset（），这是我在许多帖子中提出的，但遗憾的是没有成功。

通过iText元素我也有光标位置的问题 - 当我点击元素并尝试编辑它的内容时，游标不会显示在字符之间（在哪里可能是正常的），而是在字符上。

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

Answer 1

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

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