Javascript 如何使用Vue js使Fabric js具有反应性？

我是Vue js的新手。所以我尝试使用Fabric js和Vue js进行一些练习。我尝试使用Vus js使画布具有反应性，但什么也没有发生。 默认情况下，在画布中，它显示“文本”。然后点击按钮后，文本most变为“测试总线”。但canva中的文本不是变化

main.js

import Vue from 'vue'
import App from './App.vue'
import { fabric } from 'fabric'
import { eventBus } from './bus';

var vm = new Vue({
  el: '#app',
  data: {
    showText: 'Test'
  },
  render: h => h(App),
  mounted() {
    var canvas = new fabric.Canvas('canvas', {
      width: 500,
      height: 500
    });
    eventBus.$on('grabData', (gg) => {
      this.showText = gg;
    });
    var addtext = new fabric.Textbox(this.showText, {
      left: 200,
      top: 200,
      fill: "#A7A9AC",
      strokeWidth: 2,
      fontFamily: 'Arial'
        });
      canvas.add(addtext);
      canvas.renderAll();
  }
});

import Vue from 'vue';
export const eventBus = new Vue();

bus.js

import Vue from 'vue'
import App from './App.vue'
import { fabric } from 'fabric'
import { eventBus } from './bus';

var vm = new Vue({
  el: '#app',
  data: {
    showText: 'Test'
  },
  render: h => h(App),
  mounted() {
    var canvas = new fabric.Canvas('canvas', {
      width: 500,
      height: 500
    });
    eventBus.$on('grabData', (gg) => {
      this.showText = gg;
    });
    var addtext = new fabric.Textbox(this.showText, {
      left: 200,
      top: 200,
      fill: "#A7A9AC",
      strokeWidth: 2,
      fontFamily: 'Arial'
        });
      canvas.add(addtext);
      canvas.renderAll();
  }
});

import Vue from 'vue';
export const eventBus = new Vue();

App.vue

<template>
  <div id="app">
    <canvas id="canvas" :style="myStyle"></canvas>
    <button @click="changeName()">Change</button>
  </div>
</template>

<script>
import { eventBus } from './bus';

export default {
  name: 'app',
  data () {
    return {
    }
  },
  methods: {
    changeName() {
      eventBus.$emit('grabData', "Test bus");
    }
  },
  computed: {
    myStyle() {
      return {
        border: '1px solid black'
      }

    }
  }
}
</script>

改变
从“/bus”导入{eventBus}；
导出默认值{
名称：“应用程序”，
数据（）{
返回{
}
},
方法：{
changeName（）{
eventBus.$emit（'grabData'，'testbus'）；
}
},
计算：{
myStyle（）{
返回{
边框：“1px纯黑”
}
}
}
}

Main.js包含showText变量的默认文本（测试）。其值通过App.vue更改为事件总线。和App.vue包含一个按钮，可帮助更改showText的值。单击按钮时，值仅在showText变量中更改，但在画布中更改

eventBus.$on('grabData', (gg) => {
  addtext.set('text',gg);
});

---

您需要使用

set（'text'，textValue）

将值设置为text对象，它将在下次渲染调用时更新。

Do

eventBus.$on（'grabData'，（gg）=>{addtext.set（'text'，gg）；}）

@Durga你能解释更多关于addtext的信息吗？我如何使用它来为showText@DurgaYha，它起作用了，谢谢。