fabric js如何在组中使用globalCompositeOperation

Question

我正在尝试使用fabricjs创建组

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

但是我没有设置的globalCompositeOperation是不工作的，它总是给出相同的结果。我可以使用clear canvas来实现它，但是我想知道，我可以使用原生fabricjs方法来实现它吗？

Answer 1

我自己找到了解决方案))要使其工作，需要将globalCompositeOperation添加到第二个对象。

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

但它有新问题))这是跨所有图像的工作)

解决交叉显示问题的步骤

我已经将group转换为dataUrl，并保存对象的状态创建新的组，使用前一个组中的对象和图像。

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

它不是原生fabricjs对象，我已经为我的工作覆盖了一些属性，但我希望你理解它的主要目的，这将是有帮助的

继续使用这个库来将xor转换为svg我写了这个：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); } }

但这不适用于mozila 31.6.0中的文本(我正在寻找文本的解决方案