react-konva - 同时运行精灵动画和过滤器答案

【问题标题】：react-konva - running sprite animation and filter at the same timereact-konva - 同时运行精灵动画和过滤器
【发布时间】：2020-07-20 14:35:26
【问题描述】：

总而言之，我不能同时为 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 中都有所有这些。

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

【问题讨论】：

标签： reactjs konvajs react-konva konva

【解决方案1】：

目前konva@7.0.3 不支持Sprite 对象的缓存/过滤器。

作为一种解决方法，您可以：

使用精灵图像创建Konva.Image 实例并在其上使用过滤器。
使用node.toImage() 方法将Konva.Image 实例转换为本机图像元素。结果，您将拥有精灵图像，但应用了过滤器
为动画精灵使用生成的原生图像

【讨论】：