当“objectCaching”为false时，使用“globalCompositionOperation”设置为“source-atop”的掩码不起作用

Question

我希望你能帮我解决我遇到的这个问题。在我的应用程序中，我使用globalCompositionOperation设置为'source-atop'来将图像和svg对象隐藏到基础对象。基础对象是添加到画布上的第一个对象，所有其他对象都应该剪切。

问题显示，当我添加一个svg到画布，并将其属性objectCaching设置为false。然后该对象不会剪裁到基础对象，并且设置为'source-atop'的globalCompositionOperation不起作用。只要我将objectCaching设置为true，那么globalCompositionOperation就可以正常工作。

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

以我为例，我需要设置objectCaching对SVG对象为假，因为我需要改变后对SVG的颜色，为此，它似乎当objectCaching是假的，只工作。

如果有一种方法可以在操作后手动“清除”对象的缓存，那就太棒了，但我不认为当前的api允许它。这样我可以将objectCaching设置为true，并且使用globalCompositionOperation进行剪裁将会起作用，并且在更改svgs的颜色后，我可以清除/刷新其缓存。

这里举例： http://jsfiddle.net/josefano09/hk1on32n/

UPDATE：

我用objectCaching设置为false的原因是因为我的SVG没有渲染时正确它被设置为true。我发现这是由于我的代码在获取svg颜色时出现错误。一旦我修复了这个错误，我可以利用objectCaching设置为true来获得更好的性能优势，并且使用globalCompositionOperation的对象剪切也可以正常工作。

之后，我需要的是能够在更改svg的某些路径的颜色后更新svg。将“脏”标志设置为true，并执行canvas.renderAll（）完美工作。

Answer 1

为了使它更清晰一点

保持缓存。

svg.objectCaching = true; // default so dont need to set just here to show its val 
svg.globalCompositeOperation = 'source-atop'; 

当您更改颜色时，只需将脏标志设置为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 

将以下内容添加到您的小提琴中，以便看到它发生。

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)