当“objectCaching”为假时，使用“globalCompositionOperation”设置为“source-atop”的屏蔽不起作用

Posted 2023-03-23

【中文标题】当“objectCaching”为假时，使用“globalCompositionOperation”设置为“source-atop”的屏蔽不起作用

【英文标题】：Masking using "globalCompositionOperation" set to 'source-atop' not working when "objectCaching" is false

【发布时间】：2017-12-30 07:16:28

【问题描述】：

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

当我将 svg 添加到画布并将其属性 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。将“脏”标志设置为 true 并执行 canvas.renderAll() 效果很好。

【问题讨论】：

这看起来像一个错误，但他们没有实现updateCache 方法似乎也很奇怪......一些lib的维护者确实经常来这里，所以他们会给出一个正确答案，但是，这是我的一个快速而丑陋的解决方法：jsfiddle.net/hk1on32n/3 (l191)

不要禁用缓存，如果您需要再次渲染对象（即更改不是列表object.stateProperties 的属性）然后设置信号量object.dirty= true;。这将在下一次渲染调用时强制更新缓存。

谢谢@Kaiido 是的，对我来说，像清除缓存这样的功能没有明确实现，这真的很奇怪。我看到你在那里做了什么，不幸的是，用户能够在将 svg 添加到画布后动态更改颜色，所以我无法真正删除并添加回 svg。不过非常感谢。

【参考方案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)

【讨论】：

@Kaiido 我也不知道 xD 的肮脏选项是什么。感谢 Blindman67