fabricjs 动态修改group中的文字

背景：

group对象中有文字对象，想要动态修改文字。但现在fabricjs框架group中的文字无法修改。

思路：

将group绑定双击事件，双击时将之前的文字对象隐藏，新建一个文字对象，将之前文字对象的属性样式赋值给新建文字对象。编辑完成时，再将新建的文字对象的值赋值给之前的文字对象，并显示之前的文字对象，然后把新建的文字对象删除。

代码：

   //创建组件函数
    createGroup:function(groupArray, top, left) {
      var group = new fabric.Group(groupArray, {
        top: top,
        left: left,
      });
      const _this=this
      group.on("mousedblclick", _this.dblclickEditing);
      canvas.remove(groupArray[0]);
      canvas.add(group);
      canvas.renderAll();
    },
      // 双击编辑文本方法
    dblclickEditing:function(options) {
      // this.item 获取 group 内部对象的方法 [0：背景图, 1：内容文本]
      var this1 = options.target;
      let tb = options.target.item(1);

      var mCanvas = this.canvas.viewportTransform;
      let mObject = tb.calcTransformMatrix();
      let mTotal = fabric.util.multiplyTransformMatrices(mCanvas, mObject);
      let trans = fabric.util.qrDecompose(mTotal);
      // 创建临时编辑文本对象
      console.log(options.target.item(1));
      let tempText = new fabric.util.object.clone(tb);


      tempText.on("editing:exited", () => {
        // 退出编辑态处理，
        // 将 text value 赋值给原始文本对象 this.item(1)
        // 将临时文本对象干掉
        // this1.item(1).text = tempText.text;
        tb.set({
          text: tempText.text,
          visible: true,
        });
        canvas.remove(tempText);
      });

      tempText.on("changed", () => {
        // 文本变化处理，比如文本清空了需要显示 placeholder 等等之类的交互。
      });

      // 把原始的文本对象暂时隐藏
      this.item(1).set({
        visible: false,
      });
      // 将临时文本对象加入画布，并激活，选中进入编辑态
      canvas.add(tempText);
      canvas.setActiveObject(tempText);
      tempText.selectAll();
      tempText.enterEditing();
    }