Как сделать Fabric JS реактивным с помощью Vue JS? - PullRequest
Новая
       24

Как сделать Fabric JS реактивным с помощью Vue JS?

0 голосов
/ 10 марта 2019

Я новичок в 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 содержит текст по умолчанию (Test) для переменной showText. Его значение изменяется на шину событий через App.vue. А в App.vue есть кнопка, которая помогает изменить значение showText. Когда я нажимаю кнопку, значение изменяется только в переменной showText, но на холсте.

1 Ответ

1 голос
/ 11 марта 2019 
eventBus.$on('grabData', (gg) => {
  addtext.set('text',gg);
});

Вам необходимо установить значение для текстового объекта, используя set('text',textValue), оно обновится при следующем вызове рендеринга.

...