CODEWITHSUNDEEP
javascriptfabricjs
Vincent Desautels
Vincent Desautels

Reputation: 31

Fabricjs - Can't select object after fabric.util.enlivenObjects

Im currently trying to load fabricjs objects using enlivenObjects like this:

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

The problem is, after those objects have been added and displayed on the canvas, I can't interact with them, even if object and canvas 'selectable' properties are set to true.

Even if I call 'fabric.renderAll();' after.

The problem may be related to the fact that oCoords attributes of loaded objects are all 'NaN'

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

I tried to fix that problem with 'o.setCoords();' in the forEach loop, but those values are still NaN.

Do you have any idea why I can't interact with thoses objects?

Thank you guys!!

Update

I added the oCoords attributes in the prototype.toObject override:

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

Now the oCoords values are set in the 'elements' object array before the fabric.util.enlivenObjects(elements, function(objects) { ...

But still, after the objects have been added to the canvas, all oCoords values are NaN. I tried again to use setCoords in the forEach loop but without success..

Update 2

Well.. it actually works it my jsfiddle

I don't use exactly the same code in my app.. but I can't manage to fix my problem, it must be related to the fact that I use angular to interact with fabricjs.

I'll let you know...

Upvotes: 3

Views: 4427

Answers (1)

Theo Itzaris
Theo Itzaris

Reputation: 4681

You should have values on the oCoords object x & y properties.

As i see you use correctly the enliveObjects() function , just also add the canvas.renderAll() into it:

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

           canvas.renderAll();
     });

Have you checked if the values exist on the fabric objects before you execute the enliveObjects() function?

Update

you should better extend toObject() function and pass the properties that you need to export , like :

A. you can do it only on an object:

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

B. Or you can override prototype.toObject to affect all objects

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

Upvotes: 2

Related Questions