FabricJs - 无法在Fabric.util.enlivenObject后选择对象

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