CODEWITHSUNDEEP
javascriptcanvasfabricjs
Platon
Platon

Reputation: 84

How to add name to fabricjs object?

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?

Upvotes: 1

Views: 5854

Answers (3)

Michel
Michel

Reputation: 1153

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!

Upvotes: 2

Yash Garg
Yash Garg

Reputation: 1

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!!

Upvotes: 0

AndreaBogazzi
AndreaBogazzi

Reputation: 14731

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

Upvotes: 0

Related Questions