Fabricjs - 在fabric.util.enlivenObjects

Question

我目前正在尝试使用像这样的enlivenObjects加载fabricjs对象：

fabric.util.enlivenObjects(elements, function(objects) {
    objects.forEach(function(o) {
        canvas.add(o);
    });
});

问题是，在画布上添加并显示这些对象后，即使对象和画布的“可选”属性设置为true，我也无法与它们交互。

即使我叫'fabric.renderAll（）;'后。

问题可能与加载对象的oCoords属性都是'NaN'

有关

oCoords: Object
    bl : n
        corner : Object
        x : NaN
        y : NaN
...

我试图用'o.setCoords（）;'解决这个问题在forEach循环中，但这些值仍然是NaN。

你知道为什么我不能与这些物体互动吗？

谢谢你们!!

更新

我在prototype.toObject覆盖中添加了oCoords属性：

fabric.Object.prototype.toObject = (function (toObject) {
    return function () {
        return fabric.util.object.extend(toObject.call(this), {
                     oCoords: this.oCoords
        });
    };
})(fabric.Object.prototype.toObject);

现在oCoords值在fabric.util.enlivenObjects（elements，function（objects）{...

之前的'elements'对象数组中设置

但是，在将对象添加到画布后，所有oCoords值都是NaN。我再次尝试在forEach循环中使用setCoords但没有成功..

更新2

嗯..它实际上是我的jsfiddle

我在我的应用程序中没有使用完全相同的代码..但我无法解决我的问题，它必须与我使用angular与fabricjs交互的事实有关。

我会告诉你......

Answer 1

您应该在 oCoords 对象上显示值 x＆amp; y属性。

正如我看到你正确使用enliveObjects（）函数，只需将canvas.renderAll（）添加到其中：

     fabric.util.enlivenObjects([tmpObject], function (objects) {               
            console.log(objects);
            objects.forEach(function (o) {
                   canvas.add(o);
                   console.log(o);
            });

           canvas.renderAll();
     });

在执行enliveObjects（）函数之前，您是否已检查 之前的结构对象上是否存在值？

更新

您应该更好地扩展toObject（）函数并传递您需要导出的属性，例如：

：一种。你只能在一个物体上做到这一点：

canvas.getActiveObject().toObject = (function (toObject) {
                                    return function () {
                                        return fabric.util.object.extend(toObject.call(this), {
                                            oCoords: this.oCoords
                                        });
                                    };
                                })(canvas.getActiveObject().toObject);

<强> B中。或者您可以覆盖prototype.toObject以影响所有对象

fabric.Object.prototype.toObject = (function (toObject) {
    return function () {
        return fabric.util.object.extend(toObject.call(this), {
                     oCoords: this.oCoords
        });
    };
})(fabric.Object.prototype.toObject);