我正在尝试使用 fabricjs 创建组
var group = new fabric.Group(
[ circle, this.callerObject ],
{globalCompositeOperation:'xor'}
);
console.log(group);
this.mainCanvas.add(group);
但是我没有设置的 globalCompositeOperation 它不起作用它总是给出相同的结果。我可以使用透明画布制作，但我想知道，我可以使用原生 fabricjs 方法吗？
【问题讨论】：
标签： fabricjs
我自己找到了解决方案））要使其正常工作，需要将 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 中的文本（（我正在寻找文本的解决方案
【讨论】：