从 Vue 方法更新 FabricJS 对象

Posted 2023-03-25

【中文标题】从 Vue 方法更新 FabricJS 对象

【英文标题】：Updating FabricJS objects from Vue method

【发布时间】：2021-05-24 06:28:37

【问题描述】：

我正在尝试通过 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 对象可以通过此类函数访问的最佳方法是什么？

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

【讨论】：

谢谢，这实际上是我一开始尝试的方式，但无论出于何种原因它都无法正常工作。不过，要添加到这个答案，我需要在 resize() 方法的末尾添加“this.canvas.renderAll()”以更新画布。

这是我相信的 this.canvas.getContext('2d'); this.loadCir(); 行。您将画布添加到 this.canvas，但随后将变量 canvas 交给 loadCir 函数，该函数与 this.canvas 的画布实例不同。抱歉，如果这让您感到困惑，但我很高兴它现在可以工作了