Question

我是Vue js的新手。因此，我尝试使用Fabric js和Vue js进行一些练习。我尝试使用Vus js使我的画布具有反应性，但是什么也没有发生。默认情况下，它在画布中显示“文本”。然后，单击按钮后，该文本大部分变为“测试总线”。但是画布中的文字不会改变。

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变量上包含默认文本（测试）。它的值通过App.vue更改为事件总线。 App.vue包含一个按钮，可帮助更改showText的值。当我单击按钮时，“值”仅在showText变量中变化，而在画布中。

Answer 1

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

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

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

1 个答案: