CODEWITHSUNDEEP
vue.jskonvajs
Jacobdo
Jacobdo

Reputation: 2001

Konvajs + Vuejs how to access stage width in vue

When using Konva without vue, I can access and modify stage width like this:

var stage = new Konva.Stage({
        container: 'container',
        width: stageWidth,
        height: stageHeight
      });

stage.width(100); //good

I do not how to access stage object and by extension set its width using vuejs:

<template>
  <v-stage :config="configKonva">
    <v-layer>
      <v-circle :config="configCircle"></v-circle>
    </v-layer>
  </v-stage>
</template>

<script>


export default {
 methods: {
  setWidth(width) {
   //here I want to access stage and set it's width
 }
}
}

</script>

Upvotes: 1

Views: 1536

Answers (2)

S&#248;ren T
S&#248;ren T

Reputation: 11

For anyone looking for a solution using a dynamic ref attribute

<script setup>
  import { ref } from 'vue'
  var stage = ref(null)
</script>

<template>
  <v-stage :config="configKonva" :ref="(el) => { stage = el.getStage() }">
  </v-stage>
</template>

Upvotes: 1

mayakwd
mayakwd

Reputation: 538

You need to add "ref" for v-stage. After that you'll get direct access to the v-stage component instance. So after that you can call its method getStage(). 

<v-stage :config="configKonva" ref="konva">

...

export default {
 methods: {
  setWidth(width) {
   this.$refs.konva.getStage().width(640);
 }
}

Upvotes: 1

Related Questions