从 Vue 方法更新 FabricJS 对象

Question

我正在尝试通过 Vue 控件更新 Fabricjs 画布。我正在通过“mounted()”初始化画布，但不知道如何在函数中访问画布而不将画布作为参数传递。

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

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

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

让 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: 我试图改变你的圆的高度，而不是半径