从 Vue 方法更新 FabricJS 对象

Question

我正在尝试通过 Vue 控件更新 Fabricjs canvas。我正在通过 'mounted()' 初始化 canvas，但不知道如何在不将 canvas 作为参数传递的情况下访问函数中的 canvas。

这是我的困境的证明。我想要调整圆圈大小的按钮。

HTML:

<div id="app">
  <a href="#" @click="resize()">RESIZE</>
  <canvas id="c"></canvas>
</div>

JS:

 new Vue({
  el: "#app",
  data: {
    title: "Default title",
    message: null,
    canvas: null
  },
  mounted() {
    const canvas = new fabric.Canvas("c", {
      width: 500,
      height: 500
    });
    this.canvas = canvas;
    this.loadCir(canvas);
  },
  methods: {
    loadCir(canvas) {
      const cir = new fabric.Circle({
        fill: "red",
        radius: 50,
        top: 10,
        left: 10
      });
      cir.name = "circle";
      canvas.add(cir);
    },
    resize() {
      this.canvas.getObjects().forEach(function (targ) {
        if (targ.name == "circle") {
          targ.radius = 100;
        }
      });
    }
  }
});

https://codepen.io/shnlmn/pen/JjbrKNL

这个脚本的结果是：

TypeError: Cannot read property 'getObjects' of undefined

我觉得将 canvas 存储到数据中并不是一个好主意，但我不确定如何让应用程序的其余部分可以访问它。

使 Fabricjs 对象可从此类函数访问的最佳方法是什么？

Answer 1

您的代码的下一个调整大小部分似乎无法正常工作。但是为了帮助您解决 canvas.getObjects() 返回未定义的问题。

您需要做的是，在使用 data 属性时，您只需确保所有内容都引用数据属性。您正在创建变量并将它们保存到不需要的数据属性中，您可以在 this.canvas

上完成所有工作

new Vue({
  el: "#app",
  data: {
    title: "Default title",
    message: null,
    canvas: null
  },
  mounted() {
    this.canvas = new fabric.Canvas("c", {
      width: 500,
      height: 500
    });
    this.canvas.getContext('2d');
    this.loadCir();
  },
  methods: {
    loadCir() {
      const cir = new fabric.Circle({
        fill: "red",
        radius: 50,
        top: 10,
        left: 10
      });
      cir.name = "circle";
      this.canvas.add(cir);
    },
    resize() {
      this.canvas.getObjects().forEach(function (targ) {
        if (targ.name == "circle") {
          targ.height = 100;
        }
      });
    }
  }
});

一旦您到处引用 this.canvas 并实际对您的数据属性进行处理，那么您的 getObjects 就已定义。但是，您的调整大小不起作用，所以您只需要克服困难就可以离开了！

#note：我试图改变你的圆的高度，而不是半径

从 Vue 方法更新 FabricJS 对象

Updating FabricJS objects from Vue method

javascript

vue.js

fabricjs