Comment appliquer globalCompositeOperation correctement sur les éléments de canvas?

Question

J'ai un problème avec globalCompositeOperation.

Mon but est de rendre l'élément Bleu affiché uniquement à l'intérieur de l'élément Rouge et ne devrait pas être visible du tout à l'extérieur du rectangle Rouge (type d'effet Overflow-Hidden). De plus, le rouge et le bleu doivent avoir une capacité de transformation (les deux sont modifiables).

Comme vous pouvez le voir, si je vais ajouter un élément de plus dans le canevas (élément jaune), le bleu devient visible sur la zone où le jaune et le bleu se chevauchent.

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); 

Conditions obligatoires:

• Conserver l'aspect des éléments sur toile.
• Pas de coupure (depuis écrêtage ne permet pas d'ajouter de la couleur d'arrière-plan et de l'image dans le même temps)

Answer 1

Il pourrait être en mesure d'accomplir, en procédant comme suit ...

• retirer la élément yellow avant de dessiner le blue un
• après avoir dessiné l'élément blue mis de globalCompositeOperation-destination-over l'élément yellow et l'ajouter en arrière

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>