返回介绍

FabricJS 的缺陷

发布于 2024-11-08 20:03:21 字数 2430 浏览 0 评论 0 收藏 0

这个页面包含了第一次接触 FabricJS 的人打开的最常见问题的列表。这些缺陷的产生,既有解释不清的原因,也有文档不完善的原因。在这里,我们试图解决共同的问题。

Objects are no more selectable - setCoords 对象不再是可选择的-setCoords

Fabric 包含两组坐标以快速知道物体在画布上的位置。它们链接到两个对象属性:oCoords 和 aCoords。

当用户与对象交互或结束变换(例如拖动)时,fabricJS 会自动更新这些坐标。在所有其他情况下,开发人员必须调用 object.setCoords() 以便在渲染位置识别对象。

最常见的症状是对象不可选择。这发生在通过 top/left 或 scale 或 canvas 视口更改开发代码之后。在这些操作之后,相同的代码最终应该对所有对象调用 setCoords() ​。

function repositionRect(x, y) {
    rect.left = x;
    rect.top = y;
    rect.setCoords();
  }

Wrong position after reloading a JSON object - NUM_FRACTION_DIGITS 重新加载 JSON 对象后位置错误-NUM_FRACTION_DIGITS

Fabric 可以以纯对象格式序列化和反序列化对象。

在处理序列化时,float 可能是一个问题,并提供带有不必要数量小数的长字符串。这会使字符串大小增大。

为了减少这种情况,在名为 NUM_ufracts\u DIGITS 的对象上定义了一个常量,历史上设置为 2。这意味着,顶部值 3.454534413123 被保存为 3.45,对于比例、宽度、高度相同。除非你在没有精度问题的情况下进行处理,否则这基本是最好的。

举一个例子,可以使用 0.0151 的比例将非常大的图像缩小为较小的尺寸。

在这种情况下,序列化会将其另存为 0.02,从而有意义地改变了比例。如果遇到这种情况,请在项目中设置更高的常量: fabric.Object.NUM_FRACTION_DIGITS = 8 以使属性具有 8 位小数。 这也会影响 SVG 导出。

这也会影响 SVG 导出。

Objects misbehave when dealing with text input - numbers vs strings 对象在处理文本输入时表现不正常-numbers vs strings

有时,在原型和概念的快速证明中,人们使用文本输入来更改 fabric 对象的属性。

Fabric 文档指出 top,left,scaleX,angle 和其他属性需要数字作为值。

文本输入返回字符串。当将字符串转换为数字时,FabricJS 不会检查类型也不进行转换,这是由于某些代码的副作用,而不是要依赖的功能。

在将值分配给需要数字的属性之前,请使用 parseInt 和 parseFloat。

Object does not update after changing property - objectCaching 更改属性后对象不会更新-objectCaching

造成混淆的常见原因是,开发人员分配了新的属性来填充并且对象在 renderAll 之后不更新。 FabricJS 确实将对象缓存为图像以加快渲染速度。如果您想让 fabricJS 知道某些更改并且需要重绘特定对象,请使用 set 方法。

rect.set('fill', 'red');
canvas.requestRenderAll();

或者,作为替代:

rect.fill = 'red';
rect.stroke = 'blue';
rect.set('dirty', true);

有关更多信息和详细说明,请查看 专用的缓存页面

Objects have a transparent stroke of width 1 by default 默认情况下,对象的透明 stroke 宽度为 1

默认情况下,对象的宽度为 1 的透明 stroke 会在水平和垂直方向上将其移动 0.5 个像素。这将使您难以将对象定位在准确的位置。造成这种情况的原因有两个:-如果没有 strokeWidth,则设置 stroke color 不会带来任何结果-SVG 具有相同的默认值,因此对于 svg 导入来说,这样做是有道理的-在 fabric v1.5 之前,stroke 不是控制边界框和位置的部分,所以这不是问题。要删除 stroke:

rect.set('strokeWidth', 0);

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文