javascript - FabricJS - 自由绘图模式下的 Canvas 混合模式

Question

当使用无 Fabric 绘图模式时，我想在 Canvas 上添加不透明的不同线条。当相互绘制时，这些线不应该增加它们的不透明度。因此，我将 Canvas 混合模式更改为 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 上绘图，这是一个放置在 lowerCanvasEl 上的 Canvas 元素。这些元素的上下文总是准备好获取属性:canvas.contextTop 和 canvas.contextContainer。

您可以做的是在传递给 lowerCanvas 时将单一路径 globalCompositeOperation 设置为 'xor'。您可以使用一个事件 (path:created)。我将背景移动到一个单独的 Canvas 中(但它可以只是放置在 Canvas 下方的图像)，这样线条就不会与背景本身异或。

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>