如何在画布的元素上正确应用globalCompositeOperation？

Question

我有一个问题globalCompositeOperation。

我的目标是让蓝色元素仅在红色元素内部显示，并且根本不应该在红色矩形外部可见（某种溢出隐藏效果）。另外，红色和蓝色都必须具有转换能力（两者均可编辑）。你可以看到，如果我在画布上添加一个元素（黄色元素），蓝色区域在黄色和蓝色重叠的区域变得可见。

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元素之后绘制blue一个
• 之前yellow元素设置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>