How to add custom CSS styling to Konva layer in Vue.js?

Question

I am working on canvas with Konvajs. I have a circle layer which I want to animate. Is there a way to add a custom CSS to button to make it blink. Below is the code section for Konva config.

   <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>

score 0 · Answer 1 · answered Oct 30 '20 at 17:49

You can't use CSS to style Konva shapes. CSS is for DOM elements, Konva nodes are not DOM elements.

If you want to style shapes, you need to set properties directly. Such as fill.

If you want to animation shape, you can use some Konva methods such as Konva.Tween, node.to() method or Konva.Animation.

Take a look into Konva.Animation + Vue demo

How to add custom CSS styling to Konva layer in Vue.js?

1 Answers1