Question

我正在尝试使用fabricjs创建groupe

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

但是我没有设置的globalCompositeOperation是不行的，它总是给出相同的结果。我可以使用透明画布制作它，但我想知道，我可以使用原生的fabricjs方法吗？

Answer 1

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

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

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

解决交叉显示的问题

我已将组转换为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中的文本不起作用（（我正在寻找文本的解决方案

fabric js如何在组中使用globalCompositeOperation

1 个答案: