CODEWITHSUNDEEP
fabricjs
webmak10
webmak10

Reputation: 519

fabric js how to use globalCompositeOperation in groups

I am trying to create groupe using fabricjs

var group = new fabric.Group(
   [ circle, this.callerObject ],
   {globalCompositeOperation:'xor'}
);
console.log(group);
this.mainCanvas.add(group);

But which globalCompositeOperation I have not set it is not working it always give the same result. I can make it using clear canvas, but I want to know, can I do it using native fabricjs methods?

Upvotes: 0

Views: 2920

Answers (1)

webmak10
webmak10

Reputation: 519

I find solution myself)) to make it work need add globalCompositeOperation to the second object.

 this.callerObject.set('globalCompositeOperation','xor');
 var group = new fabric.Group(
   [ circle, this.callerObject ]
);

But it have new problem)) this is work across all images)

To solve problem with cross showing

I have convert group to dataUrl, and to save state of object create new group, with object and image from previous group.

createXorGroup: function(object){ var self = this; var baseStateTop = this.callerObject.top; var baseStateLeft = this.callerObject.left; this.callerObject.set('globalCompositeOperation','xor'); this.callerObject.set('active', false); var group = new fabric.Group([ object, this.callerObject ]); fabric.Image.fromURL( group.toDataURL(), function(image){ image.setOriginToCenter && image.setOriginToCenter(); self.callerObject.set('globalCompositeOperation','source-over'); self.callerObject.set('opacity', 0); group = new fabric.Group([ self.callerObject, image ]); self.mainCanvas.add(group); group.setOriginToCenter && group.setOriginToCenter(); group.set('top', baseStateTop).set('left', baseStateLeft).setCoords(); group.setCenterToOrigin && group.setCenterToOrigin(); self.mainCanvas.remove(self.callerObject); group.inCircle = true; group.set('active', true); }, { originX: 'center', originY: 'center', top: this.callerObject.top, left: this.callerObject.left } ); }

It is not native fabricjs object, I have override some properties for my work, but I hope you understand the main aim and it will be helpful

Continue to work with this library To make xor to svg I have write this: setGlobalCompositeOperation: function(object, type){ if(object.imageType == 'svg'){ for (var i = 0; i < object.paths.length; i++) { this.setGlobalCompositeOperation(object.paths[i], type); } }else{ object.set('globalCompositeOperation', type); } }

But this do not work for text in mozila 31.6.0(( I'm looking solution for text

Upvotes: 2

Related Questions