How to add name to fabricjs object?

Question

In order to get fabricjs canvas image by name, I need to set unique id or name to this iamge. I've created a new class fabric.NamedImage That's how I did it.

  fabric.NamedImage = fabric.util.createClass(fabric.Image, {

  type: 'nameimage',

  initialize: function (element, options) {
      this.callSuper('initialize', element, options);
      options && this.set('name', options.name);
  },

  toObject: function () {
      return fabric.util.object.extend(this.callSuper('toObject'), { name: this.name });
  },

  _render: function (ctx) {
      this.callSuper('_render', ctx);
  }});

And fromObject

 fabric.NamedImage.fromObject = function (object, callback) {
      fabric.util.loadImage(object.src, function (img) {
          var instance = new fabric.NamedImage(img, object);
          callback && callback(instance);
      });
  };
  fabric.NamedImage.async = true;

But when I'm trying to load canvas loadFromJSON for some reasons I keep getting error

cannot read property 'async' of undefined

Here is code where I'm trying to load JSON

for (i = 0; i <= canvas.length; i++) {
                    JSON.parse(imageQuery[i]);
                canvas[i].loadFromJSON(imageQuery[i]);
                        canvas[i].renderAll();
                        console.log(' this is a callback. invoked when canvas is loaded!xxx ');              
            }

I've already read cannot read property 'async' of undifined and save canvas to server with custom attribute

Is there some way to get object by name?

score 2 · Answer 1 · answered Aug 23 '18 at 09:25

From the official docs,

var rect = new fabric.Rect();

rect.toObject = (function(toObject) {
  return function() {
    return fabric.util.object.extend(toObject.call(this), {
      name: this.name
    });
  };
})(rect.toObject);

canvas.add(rect);

rect.name = 'trololo';

console.log(JSON.stringify(canvas));

and the logged output will be

'{"objects":[{"type":"rect","left":0,"top":0,"width":0,"height":0,"fill":"rgb(0,0,0)","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":false,"transparentCorners":true,"perPixelTargetFind":false,"rx":0,"ry":0,"name":"trololo"}],"background":"rgba(0, 0, 0, 0)"}'

Please refer this http://fabricjs.com/fabric-intro-part-3 Cheers!

score 0 · Answer 2 · answered Jun 25 '16 at 13:06

0

Plesae change the type property of your class to 'namedImage' and it should go.

answered Jun 25 '16 at 13:06

AndreaBogazzi

14,323
3
38
63

Still doesn't work with the same error. I've changed 'nameimage' to 'namedImage" – Platon Jun 27 '16 at 10:22

score 0 · Answer 3 · edited Apr 06 '18 at 06:48

You can add custom properties to different objects in fabric js using the code given below:

obj.toObject = (function (toObject) {
    return function () {
        return fabric.util.object.extend(toObject.call(this),{
            id : value
        });
    };
})(obj.toObject);

Here obj is the canvas object that you have created and id is the custom attribute we are adding to this object. Suppose you have saved canvas in the form of a json file. So while using json.stringify consider the code below:

json_data = JSON.stringify(self.canvas.toJSON(['attribute1', 
'attrubute2']));

Here in square brackets include all the custom attributes. Later on when you will use loadfromjson all the custom properties will automatically be included. Hope it will work. Have a nice day!!

How to add name to fabricjs object?

3 Answers3