FabricJS-自由绘制模式下的画布混合模式

Question

当使用无织物的绘画模式时，我想以不透明性向画布添加不同的线条。 这些线条相互绘制时，不应增加其不透明度。 因此，我将画布混合模式更改为xor 。 无论如何，当在彼此之间绘制线时，不透明度仍会增加。 我在这里做错了什么？

 var canvas = new fabric.Canvas("a", { isDrawingMode : true }); document.getElementById("cbFreeDrawing").onchange = function () { canvas.isDrawingMode = this.checked; }; canvas.setBackgroundImage('http://fabricjs.com/assets/jail_cell_bars.png', canvas.renderAll.bind(canvas)); canvas.freeDrawingBrush.width = 25; canvas.freeDrawingBrush.color = "rgba(255,0,0,.5)"; //this seems not to work canvas.getContext().globalCompositeOperation = 'xor'; 

 canvas { border: 1px solid; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.3/fabric.min.js"></script> Drawing Mode: <input id="cbFreeDrawing" type="checkbox" checked="true"/><br/> <canvas id="a" width="400" height="300"></canvas> 

Answer 1

在你的绘制freeDrawing upperCanvasEl ，canvas元素放置在lowerCanvasEl 。 这些元素的上下文始终可以在属性canvas.contextTop和canvas.contextContainer 。

您可以做的是将单路径globalCompositeOperation传递给lowerCanvas时将其设置为“ xor”。 您可以使用一个事件（路径：已创建）。 我将背景移到了单独的画布中（但它只能是放置在画布上的图像），因此线条不会与背景本身发生异或。

 var canvas = new fabric.Canvas("a", { isDrawingMode : true }); var canvas2 = new fabric.StaticCanvas("b"); canvas.lowerCanvasEl.parentNode.appendChild(canvas2.lowerCanvasEl) document.getElementById("cbFreeDrawing").onchange = function () { canvas.isDrawingMode = this.checked; }; canvas.on('path:created', function(opt) { opt.path.globalCompositeOperation = 'xor'; canvas.renderAll(); }); canvas2.setBackgroundImage('http://fabricjs.com/assets/jail_cell_bars.png', canvas2.renderAll.bind(canvas2)); canvas.freeDrawingBrush.width = 25; canvas.freeDrawingBrush.color = "rgba(255,0,0,.5)"; //this seems not to work canvas.contextTop.globalCompositeOperation = 'xor'; 

 canvas { border: 1px solid; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.3/fabric.min.js"></script> Drawing Mode: <input id="cbFreeDrawing" type="checkbox" checked="true"/><br/> <canvas id="a" width="400" height="300"></canvas> <canvas id="b" width="400" height="300"></canvas> 

Answer 2

+ AndreaBogazzi刚发现提供的答案仅在不透明度为.5的情况下有效，如果将其设置为另一个值的不透明度重叠/合并/以其他方式起作用。

小提琴（简化为更好地理解）： https : //jsfiddle.net/c8mf391q/

var canvas = new fabric.Canvas("a", {
        isDrawingMode : true
});



canvas.on('path:created', function(opt) {
  opt.path.globalCompositeOperation = 'xor';
  canvas.renderAll();
});


canvas.freeDrawingBrush.width = 25;
canvas.freeDrawingBrush.color = "rgba(255,0,0,.3)";