我是 Vue js 的新手。所以我正在尝试使用 Fabric js 和 Vue js 做一些练习。我尝试使用 Vus 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();
}
});
总线.js
import Vue from 'vue';
export const eventBus = new 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);
});
您需要使用 将值设置为文本对象set('text',textValue)，它将在下一次渲染调用时更新。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句