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

纳瓦拉吉

我是 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] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何设置Fabric.js?

来自分类Dev

Fabric.js-重建和商业使用

来自分类Dev

使用Fabric.js选择画布上的所有对象

来自分类Dev

使用fabric.js的全屏画布模式

来自分类Dev

如何使用按钮从Fabric.js画布中删除图像

来自分类Dev

Fabric JS:如何防止扩展活动组

来自分类Dev

如何激活Fabric js IText的光标?

来自分类Dev

如何使用Fabric JS中的英寸和毫米等单位

来自分类Dev

如何使用Fabric.js实现画布平移

来自分类Dev

如何在fabric.js中导出具有自定义属性的SVG?

来自分类Dev

如何使用fabric.js添加图像滤镜

来自分类Dev

使用mouse:Fabric JS:覆盖动画对象

来自分类Dev

Vue JS V-对于组件的反应性

来自分类Dev

Vue.js计算,使其具有反应性

来自分类Dev

如何使用Fabric JS以编程方式自由绘制?

来自分类Dev

使用Fabric JS定义标记的行

来自分类Dev

如何使用Fabric.js创建多个形状?

来自分类Dev

如何使用按钮从Fabric.js画布中删除图像

来自分类Dev

如何在Fabric Js中使用Selenium IDE

来自分类Dev

如何使用fabric.js加载TIFF图像?

来自分类Dev

如何在fabric.js中使用画布保存图像

来自分类Dev

如何使用fabric.js测量折线?

来自分类Dev

如何使用Fabric JS创建类似结构的HTML表格?

来自分类Dev

在Vue.js中观看反应性数据的所有属性

来自分类Dev

Vue.js - 反应性组件,并不总是重新渲染

来自分类Dev

如何停止使用 Fabric.js 绘图

来自分类Dev

如何使用文本锚点:fabric js 中的中间

来自分类Dev

如何使以下 Vue 代码具有反应性?

来自分类Dev

mousedown 事件未触发 - 带有 vue 的 fabric.js

Related 相关文章

热门标签

归档