【发布时间】：2015-03-18 19:19:48
【问题描述】：
我在我的响应式网页中使用了 fabricjs。我正在尝试向画布添加一些文本。到目前为止，这工作正常。
因为网页是响应式的，所以画布容器的大小会根据视口而变化。我希望画布始终占据容器元素的 90%。因此，我正在缩放画布和其中的所有元素，以便它们保持相同的相对位置但占据容器的 90%。 ( -> 有没有更好的方法来做到这一点？)
一切正常，除了第一次加载画布时的文本渲染。文本元素似乎是街头巷尾。其他元素（矩形、图形）都添加好了。
这就是它应该的样子。当我单击画布或启用浏览器的开发人员工具时，iText 元素会呈现为正确的大小。
我曾尝试在 iText 对象上使用 object.setCoords() 以及 canvas.calcOffset()，这在我遇到的许多帖子中都有建议，但不幸的是没有成功。
通过 iText 元素，我的光标位置也有问题 - 当我单击元素并尝试编辑其内容时，光标不会显示在字符之间（通常会在哪里），而是显示在字符上。
其他人遇到过这个问题吗？当画布容器的大小发生变化时，您在响应式设计中使用fabricjs 的技巧是什么？
【问题讨论】：
-
不熟悉这个确切的库，但我知道当涉及到画布大小时，你不能在 CSS 中完成所有事情——比如开发视频游戏和在菜单中更改分辨率，那里将是您自己编写（或fabricjs 正在执行）的许多与像素相关的变量/计算，需要更新以考虑新的尺寸。因此，与大多数元素类型的外观形式是静态的不同，它需要您自己为画布编写某种形式的“onresize”方法在某种程度上是有道理的。
-
这肯定是字体问题。您的 CSS 或其他样式存在冲突并导致初始状态下的字体不同。如果您同时查看这两个图像，文本的大小并没有缩小……而是具有完全不同的字体。
-
感谢您的回复。 @Katana314：我没有使用 css 来调整画布及其元素的大小。我用 js 来做，通过操作 fabricJS 画布元素。
-
@Vijay：我在画布渲染后（发生问题时）和文本渲染正常后检查了字体系列。在这两种情况下，字体系列都是相同的——“ubuntumedium”、“Helvetica Neue”、Verdana、Arial、sans-serif。因此字体系列不可能是问题。
-
@knospe：您是在 firebug css 窗格中还是以编程方式检查了它？