Javascript 从Vue方法更新FabricJS对象

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

这是我的困境的一个例子。我想用这个按钮来调整圆圈的大小

HTML:

此脚本的结果是：

TypeError: Cannot read property 'getObjects' of undefined

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

---

使Fabricjs对象可以从这样的函数访问的最佳方法是什么？

看起来代码的下一个调整大小部分不起作用。但是为了帮助您克服canvas.getObjects（）返回未定义的问题

您需要做的是，在使用

数据

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

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。然而，你的尺寸调整不起作用，所以你只需要克服这个困难，你就走了

#注意：我试图更改圆的高度，而不是半径
谢谢，这实际上是我一开始尝试的方式，但无论出于何种原因，它都不起作用。不过，要添加到这个答案中，我需要在resize（）方法的末尾添加'this.canvas.renderAll（）'来更新画布。这是您的
this.canvas.getContext（'2d'）；这是loadCir（）我收到的行。您将canvas添加到this.canvas，但随后将变量
canvas
交给loadCir函数，该函数与this.canvas的canvas实例不同。对不起，如果这让人困惑，但我很高兴它现在工作
TypeError: Cannot read property 'getObjects' of undefined

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;
        }
      });
    }
  }
});