Konvajs + Vuejs 如何在 vue 中访问舞台宽度答案

【问题标题】：Konvajs + Vuejs how to access stage width in vueKonvajs + Vuejs 如何在 vue 中访问舞台宽度
【发布时间】：2019-10-16 19:22:07
【问题描述】：

在不使用 vue 的情况下使用 Konva 时，我可以像这样访问和修改舞台宽度：

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

stage.width(100); //good

我不知道如何访问舞台对象并通过扩展使用 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>

【问题讨论】：

标签： vue.js konvajs

【解决方案1】：

您需要为v-stage 添加“ref”。之后，您将直接访问v-stage 组件实例。所以在那之后你可以调用它的方法getStage()。

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

...

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

【讨论】：