为什么fabricjs kclass fromobject在新版本上返回未定义？答案

【问题标题】：why fabricjs kclass fromobject returning undefined on new version?为什么fabricjs kclass fromobject在新版本上返回未定义？
【发布时间】：2020-02-08 03:56:22
【问题描述】：

昨天我在我们的应用程序中更改了 fabricjs 版本。突然 kclass.fromObject 返回未定义。

我之前的版本是 1.7.22，目前使用的是 3.6.1 https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.1/fabric.min.js

kclass.fromobject 返回未定义。但是 objects[i] 有数据。

> var klass = fabric.util.getKlass(objects[i].type); 
> console.log(klass.fromObject(objects[i]));  //returning undefined on 3.6.1 
> fabricObj.add(klass.fromObject(objects[i]));

您能告诉我如何解决这个问题吗？

这是截图

【问题讨论】：

除非您显示 objects[i] 是什么，否则无法猜测发生了什么问题。
我已经上传了截图，请检查一次。 @shkaper
请您在这里查看我的代码。 1.7.22 版 fabricjs jsfiddle.net/hnsdvkqg 3.6.1 版jsfiddle.net/kphebdgx

标签： undefined fabricjs

【解决方案1】：

您的 objects 数组仅包含表示序列化 Fabric 对象（如路径、圆圈等）的普通 javascript 对象。

在渲染这些纯 JavaScript 对象之前，您需要将它们转换为 Fabric 对象。这个过程称为反序列化。您的代码会这样做，但前提是变量 klass 的 async 属性为真。它发生在这里：

var klass = fabric.util.getKlass(objects[i].type);
if (klass.async) {
    klass.fromObject(objects[i], function (img) {
        canvas1.add(img);
    });
}

对象被反序列化，作为参数传递给回调函数，然后添加到画布中，这很棒。

问题出在条件语句的 else 分支上，没有发生任何事情。唯一存在的代码是这样的：

else {
    console.log(objects[i]);
    canvas1.add((objects[i]));
}

在这里，您尝试将纯对象添加到画布，这会触发错误。一种简单的解决方案是删除if / else 并始终执行反序列化步骤。如果出于其他原因您需要维护 if / else 条件，您也可以简单地反序列化 else 路径中的对象。

这是一个保留条件的working Fiddle。

为什么它在先前版本的 Fabric 中可以工作？这很难说。也许这种类型的对象被标记为异步，因此触发了正确的路径。或者canvas.add 方法可能会自动反序列化 javascript 对象。

【讨论】：