如何在Vue.js的Konva层中添加自定义CSS样式？

问题描述

我正在用Konvajs在画布上工作。我有一个要动画的圆形图层。有没有一种方法可以向按钮添加自定义CSS使其闪烁。以下是Konva配置的代码部分。

   <div class="container">
          <v-stage :config="stageConfig" >
            <v-layer>
              <v-image :config="imageConfig1"/>
              <v-circle :config="{radius:13,fill:'red',x:20,y:29}"/>
              <v-text :config="{text:'5G Camera',x:42,y:15,fontSize:35,fontStyle: 'bold',fill:'white',stroke:'black',strokeWidth:'2',shadowEnabled:'true'}"/>
            </v-layer>
          </v-stage>
    </div>

解决方法

您不能使用CSS为Konva形状设置样式。 CSS用于DOM元素，Konva节点不是DOM元素。

如果要设置形状的样式，则需要直接设置属性。例如fill。

如果要对形状进行动画处理，可以使用某些Konva方法，例如Konva.Tween，node.to()方法或Konva.Animation。

看看Konva.Animation + Vue demo