Masking using the "globalCompositionOperation" parameter set to "source-atop" does not work when "objectCaching" is false
Hope you can help me with this question that I have. In my application, I am using the globalCompositionOperation set to 'source-atop' to mask the svg images and objects to the base object. The main object is the first object added to the canvas, and all other objects must be anchored to it.
The problem shows when I add the svg to the canvas and set its objectCaching property to false. The object is then not bound to the underlying object and the globalCompositionOperation set to "source-atop" has no effect. Once I set objectCaching to true, the globalCompositionOperation works fine.
fabric.loadSVGFromString(svgString, function(objects, opts) {
var svg = fabric.util.groupSVGElements(objects, opts);
svg.set({
objectCaching : false, // <--- PROBLEM HERE ! , change to true to see how globalCompositeOperation works fine when objectCaching is set to "true"
globalCompositeOperation : 'source-atop'
});
In my case, I need to set objectCaching for svg objects to false, as I need to change the svg colors later, and for that, it only works when objectCaching is false.
If there is a way to manually "clear" the cache of an object after it has been processed, that would be awesome, but I don't think the current api allows this. This way I could set objectCaching to true and clipping with globalCompositionOperation would work and after changing the svgs colors I could clear / refresh its cache.
An example is here: http://jsfiddle.net/josefano09/hk1on32n/
UPDATE:
The reason I used objectCaching set to false is because my svg was not displaying correctly when it was set to true. I found out that it was due to a bug in my code when getting svg colors. Once I fixed this error, I was able to take advantage of better performance using objectCaching set to true, and clipping the object using globalCompositionOperation worked fine.
After that I only needed to update the svg right after changing the color for some svg paths. Setting the dirty flag to true and doing canvas.renderAll () works fine.
source to share
To make it a little clear
Keep caching.
svg.objectCaching = true; // default so dont need to set just here to show its val
svg.globalCompositeOperation = 'source-atop';
When you change the color, just set the dirty flag to true.
svg.dirty = true;
canvas.renderAll(); // you can force rendering or if you are rendering
// already you only have to set dirty, it will be
// re rendered the next time it is displayed
Add the following to your violin to see how it goes.
svg.objectCaching = true;
svg.globalCompositeOperation = 'source-atop';
const cols = ["red","green","blue","yellow","black","orange"];
var colCount = 0;
setInterval(()=>{
svg.paths.forEach(p=>{ p.fill = cols[colCount % cols.length] })
colCount += 1;
svg.dirty = true;
canvas.renderAll();
},500)
source to share