Canvas 使用“掩蔽”；globalCompositionOperation“；设置为'；来源'；不工作时；“对象缓存”；是假的

我希望你能帮我解决这个问题。在我的应用程序中，我使用设置为“source Top”的globalCompositionOperation将图像和svg对象屏蔽为基本对象。基础对象是添加到画布的第一个对象，所有其他对象都应剪裁到该画布

当我将svg添加到画布，并将其属性objectCaching设置为false时，问题就出现了。然后该对象不会剪裁到基础对象，而设置为“source Top”的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'
        });

fabric.loadSVGFromString（svgString，函数（对象，选项）{
var svg=fabric.util.groupSVGElements（对象、选项）；
svg.set({
objectCaching:false，//使其更清晰一些

继续缓存

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)

这看起来像是一个bug，但看起来也很奇怪，他们没有实现一个
updateCache
方法……库的一些维护人员经常来这里，所以他们会给出正确的答案，但是，我有一个快速而丑陋的解决方法：（l191）如果需要再次渲染对象，请不要禁用缓存（即对不是列表
对象的属性的更改。stateProperties
）然后设置信号量
对象。dirty=true；
。这将在下一次渲染调用时强制更新缓存。感谢@kaido是的，我觉得清除缓存之类的功能没有显式实现真的很奇怪。我看到了您在那里做的事情，不幸的是，用户能够在svg之后动态更改颜色是添加到画布上的，因此我无法真正删除并添加回svg。不过非常感谢。@Kaido我也不知道xD的脏选项是什么。感谢Blindman67