使用Fabric.JS覆盖自定义类的getter和setter

如何解决使用Fabric.JS覆盖自定义类的getter和setter

我目前正在使用Fabric.JS来创建一个工具来轻松地图解社交情况。为此，我创建了一个由图像和文本组成的自定义图形对象（更确切地说是一个自定义组）。

我正在使用一个名为label的自定义属性，其中包含在text元素中显示的文本值。这些技巧在对象初始化（将标签值放入文本元素）中效果很好，但之后不再起作用。我必须使用forceSync（）函数手动更新文本值（似乎永远不会调用_render方法，并且标签设置程序都不会覆盖这两个值）

有正确的方法吗？另一种替代setter或观看自定义类属性的技巧的方法是什么？

类代码

this.GraphicRessource = fabric.util.createClass(fabric.Group,{

    type: 'GraphicRessource',// initialize can be of type function(options) or function(property,options),like for text.
  // no other signatures allowed.
  initialize: function(property,options) {
    options || (options = { });
    this.callSuper('initialize',property,options);
    this.set('id',options.id || '');
    this.set('label',options.label || '');
    this.height += 20;
    this.item(1).set({text:this.label,top: this.item(1).get("top") + 10});
  },set label(value){
    console.log("new label set");
    this.item(1).set('text',value);
  },toObject: function() {
    return fabric.util.object.extend(this.callSuper('toObject'),{
      label: this.get('label')
    });
  },forceSync:function(){
    this.item(1).set('text',this.label);
  },_render: async function(ctx) {
    this.item(1).set({text:this.label,top: this.item(1).get("top") + 10});
    await this.callSuper('_render',ctx);
    this.item(1).bringToFront();
  }
});

对象初始化

fabric.Image.fromURL('url',function(image) {
        image.originX = 'center';
        image.originY = 'bottom';
        let text = new fabric.Text("sample",{
          fontFamily: 'Font',originX: 'center',originY: 'bottom',stroke: '#33aa33',fontSize: 10
        });
        image.scaleToWidth(100);
        let ressource = new vm.GraphicRessource([image,text],{label:"Some Text Here",id:vm.idCounter});
        vm.canvas.add(ressource);
        vm.idCounter+=1;
      });