canvas - 当 "globalCompositionOperation"为 false 时，使用 'source-atop' 设置为 "objectCaching"的屏蔽不起作用

Question

我希望您能帮助我解决我遇到的这个问题。在我的应用程序中，我使用设置为“source-atop”的 globalCompositionOperation 将图像和 svg 对象屏蔽为基础对象。基础对象是添加到 Canvas 的第一个对象，所有其他对象都应剪切到它。

当我将 svg 添加到 Canvas 并将其属性 objectCaching 设置为 false 时，就会出现问题。然后，该对象不会剪辑到基础对象，并且将 globalCompositionOperation 设置为“source-atop”无效。一旦我将 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'
        });

就我而言，我需要将 svg 对象的 objectCaching 设置为 false，因为稍后我需要更改 svg 的颜色，为此，它似乎只在 objectCaching 为 false 时才起作用。

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

示例如下: http://jsfiddle.net/josefano09/hk1on32n/

更新:

我使用 objectCaching 设置为 false 的原因是因为我的 svg 在设置为 true 时无法正确渲染。我发现这是由于获取 svg 颜色时代码中的错误所致。一旦我修复了这个错误，我就能够通过将 objectCaching 设置为 true 来获得更好的性能，并且使用 globalCompositionOperation 来剪切对象效果也很好。

之后，我所需要的就是能够在更改 svg 的某些路径的颜色后立即更新 svg。将“dirty”标志设置为 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

将以下内容添加到您的 fiddle 中，看看它会发生。

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)