如何使用 Vue js 使 Fabric js 具有响应性？答案

【问题标题】：How to make Fabric js reactive using Vue js?如何使用 Vue js 使 Fabric js 具有响应性？
【发布时间】：2019-07-31 19:28:55
【问题描述】：

我是 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 变量中更改，但在画布中更改。

【问题讨论】：

做eventBus.$on('grabData', (gg) => {addtext.set('text',gg);});
@Durga 你能解释一下关于 addtext 的更多信息以及如何使用它在 showText 上分配值
@Durga Yha，它工作，谢谢。

标签： javascript vue.js fabricjs

【解决方案1】：

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

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

【讨论】：