如何在 Konva 中使用全局复合操作进行缩放的多个形状



我正在尝试在 Konva 中创建带有内边框的多边形。

我找到了这个用globalCompositeOperation做这件事的例子,只要只有一个形状,它在 Konva 中效果很好。一旦我尝试添加第二个形状,这显然不再有效,第一个形状就会消失。

如果我为每个形状使用不同的图层,它会起作用,但当然这不是一个可以很好地缩放的解决方案。

我尝试使用临时层,如示例中所示,但无法使其工作。

所以我找到了这个使用group.cache()的例子,效果很好......直到我尝试缩放阶段,此时我必须刷新缓存,否则我只会获得扩展的缓存,这看起来很糟糕。

此代码沙箱说明了问题。(请注意,这使用简单的三角形,实际上我使用任意多边形(

那么有没有办法将缓存与扩展一起使用呢?或者,在同一图层中使用具有多个形状的globalCompositeOperation的更好方法?还是一些替代解决方案?

我找到了一个解决方案:调用group.cache({pixelRatio: scaleFactor})。我更新了沙盒。

不知道,这是否是最好的解决方案,但它有效。

最新更新