I have an issue with globalCompositeOperation .
My goal is to make Blue element displayed only inside of Red element and should not be visible outside of Red rectangle at all (kind of Overflow-Hidden effect). Plus, both Red and Blue must have Transformation ability (both editable).
As you can see, if I'll add one more element into the canvas (yellow element), the Blue one become visible on the area where Yellow and Blue overlaps.
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);
Mandatory Conditions:
It could be accomplish-able using the following steps ...
yellow
element before drawing the blue
one blue
element set the yellow
element's globalCompositeOperation
to destination-over
and add it back 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.