如何使用Vue js使Fabric js反应？

Question

我是Vue js的新人。所以我尝试使用Fabric js和Vue js进行一些练习。我尝试使用Vus js使我的画布反应但没有任何反应。默认情况下，在画布中，它显示“文本”。然后在单击按钮后，文本大多数变为“测试总线”。但是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();
  }
});

bus.js

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>

Main.js包含showText变量的默认文本（Test）。它的值通过App.vue更改为事件总线。 App.vue包含一个有助于更改showText值的按钮。当我单击按钮时，Value仅在showText变量中更改，但在画布中。

Answer 1

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

您需要使用set('text',textValue)将值设置为文本对象，它将在下一次渲染调用时更新。