react-konva

Question

总而言之，我无法同时为 Konva 精灵设置动画并应用 Konva 滤镜。

我正在使用 react-konva 绘制一个复杂的舞台，其中部分包含使用 Sprite 组件动画的动画图像。为了启动动画，我一直等到节点在浏览器中被绘制出来，有点“hack”（setTimeout），然后在每个节点上调用 shape.start() 来启动它们。

    initiateAnimations = () => {
       setTimeout(() => {
           let stage = this.stageRef.getStage();  
           var shapes = stage.find('.canvas-animation');
           shapes.map(shape => {
               shape.start();
           })
       },100)      
   }

我还为这些图像添加了颜色叠加层，这取决于我在渲染之前输入到 Sprite 组件中的属性。我为此使用了 Konva RGBA 滤镜 - 它并不完美，但可以完成工作。为了启动和绘制过滤器，Konva 需要重新缓存图像，因此在 render() 中绘制节点后，我为此使用了缓存和 batchDraw 函数。

   applyEffects = () => {
       setTimeout(() => {
           let stage = this.stageRef.getStage();
           var shapes = stage.find(node => { return node.attrs.id.includes("-f1") ? true : false; });
           shapes.map(shape => {
               this.applyCache(shape)
           })
       },100)      
   }

   applyCache(target) {
       target.cache();
       target.getLayer().batchDraw();
   }

我在 componentDidMount 和 componentDidUpdate 中都有所有这些。

我遇到的问题是动画和滤镜各自工作，但从来没有一起工作，无论时间延迟或它们的顺序如何。结合起来，只有过滤器将起作用。另一方面，如果我运行只有动画脚本，动画会启动并且运行很好。但是在一起，动画只是没有开始。我想我只是不太了解这里的生命周期，但也许有人可以帮助我指明正确的方向？

Answer 1

目前 konva@7.0.3 不支持 Sprite 对象的 caching/filters。

作为解决方法，您可以：

使用 sprite 图像创建 Konva.Image 实例并对其使用滤镜。
使用 node.toImage() 方法将 Konva.Image 实例转换为原生图像元素。因此，您将拥有 sprite 图像，但应用了滤镜
为动画精灵使用生成的原生图像

react-konva - 运行同时进行精灵动画和滤镜

react-konva - running sprite animation and filter at the same time

reactjs

konvajs

konva