如何正确地在画布元素上应用全局复合操作？

Question

我有一个问题 GlobalCompositePositeOperation 。

我的目标是使仅在红色元素内显示蓝色元素，并且根本不应在红色矩形外看到(一种溢出隐藏效果(。另外，红色和蓝色都必须具有转换能力(都可以编辑(。

您可以看到，如果我将更多元素添加到画布(黄色元素(中，则在黄色和蓝色重叠的区域可见。

http://jsfiddle.net/redlive/q4bvu0tb/1/

var canvas = new fabric.Canvas('c');

var yellow = new fabric.Circle({
  top: 200,
  left: 0,
  radius: 100,
  strokeDashArray: [5, 5],
  stroke: 'black',
  strokeWidth: 5,
  fill: 'yellow'
});
canvas.add(yellow);

var red = new fabric.Rect({
  top: 0,
  left: 0,
  width: 300,
  height: 300,
  strokeDashArray: [5, 5],
  stroke: 'black',
  strokeWidth: 5,
  fill: 'red',
  rx: 40
});
canvas.add(red);

var blue = new fabric.Circle({
  top: 150,
  left: 80,
  radius: 100,
  strokeDashArray: [5, 5],
  stroke: 'black',
  strokeWidth: 5,
  fill: 'blue',
    globalCompositeOperation: 'source-atop'
});
canvas.add(blue);

var green = new fabric.Circle({
  top: 0,
  left: 0,
  radius: 100,
  strokeDashArray: [5, 5],
  stroke: 'black',
  strokeWidth: 5,
  fill: 'green'
});
canvas.add(green);

强制性条件：

• 保存元素出现在画布上。
• 没有剪裁(因为剪裁不允许同时添加背景颜色和图像(

Answer 1

可以使用以下步骤来完成...

• 在绘制blue之前删除yellow元素
• 绘制blue元素后，将yellow元素的globalCompositeOperation设置为destination-over并将其添加回

var canvas = new fabric.Canvas('c');
var yellow = new fabric.Circle({
  top: 200,
  left: 0,
  radius: 100,
  strokeDashArray: [5, 5],
  stroke: 'black',
  strokeWidth: 5,
  fill: 'yellow'
});
canvas.add(yellow);
var red = new fabric.Rect({
  top: 0,
  left: 0,
  width: 300,
  height: 300,
  strokeDashArray: [5, 5],
  stroke: 'black',
  strokeWidth: 5,
  fill: 'red',
  rx: 40
});
canvas.add(red);
canvas.remove(yellow); //remove yellow
var blue = new fabric.Circle({
  top: 150,
  left: 80,
  radius: 100,
  strokeDashArray: [5, 5],
  stroke: 'black',
  strokeWidth: 5,
  fill: 'blue',
  globalCompositeOperation: 'source-atop'
});
canvas.add(blue);
yellow.set({globalCompositeOperation: 'destination-over'}); //set gCO for yellow
canvas.add(yellow); //add yellow back
var green = new fabric.Circle({
  top: 0,
  left: 0,
  radius: 100,
  strokeDashArray: [5, 5],
  stroke: 'black',
  strokeWidth: 5,
  fill: 'green'
});
canvas.add(green);

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<canvas id="c" width="800" height="800"></canvas>