javascript - Fabricjs - 在fabric.util.enlivenObjects之后无法选择对象

Question

我目前正在尝试使用 enlivenObjects 加载 Fabricjs 对象，如下所示:

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

问题是，在添加这些对象并在 Canvas 上显示后，即使对象和 Canvas 的“可选”属性设置为 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”对象数组中设置

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

更新2

嗯..它确实有效我的jsfiddle

我在我的应用程序中没有使用完全相同的代码..但我无法解决我的问题，它一定与我使用 Angular 与 Fabricjs 交互这一事实有关。

我会让你知道...

Answer 1

您应该拥有 oCoords 对象 x 和 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() 函数并传递您需要导出的属性，例如:

A.您只能在一个对象上执行此操作:

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);