Javascript 文本赢得'；t在视图中更新-fabricjs

我正在使用fabricjs制作标尺工具。当用户单击画布时，它将绘制一个小矩形和一条线（长度为0），当用户开始移动鼠标时，线的长度将增加。在行的顶部有一个文本，显示行的长度。行的长度正在更新，但不会显示更新后的长度。当我再次单击以完成绘制时，它将显示更新的长度

这是我的密码

let oneSideDrawn = false;

canvas.on("mouse:down", (event) => {
    function rulerDown() {
          const mouse = canvas.getPointer(event.e);
          const { x, y } = mouse;

          const side = new fabric.Rect({
            width: 3,
            height: 16,
            left: x,
            top: y,
            fill: "#222",
          });

          canvas.add(side);
          updateCanvas();

          if (oneSideDrawn) {
            oneSideDrawn = false;

            const objs = canvas.getObjects();
            const length = objs.length;

            const line = objs[length - 3];
            const side2 = objs[length - 4];
            side.set({ top: side2.top });

            const txt = canvas.getById("myId");

            const rulerGroup = new fabric.Group([side2, line, side, txt], {
              basicStyle,
              lockScalingX: true,
              lockScalingY: true,
            });
            canvas.add(rulerGroup);

            canvas.remove(side2);
            canvas.remove(line);
            canvas.remove(side);
            canvas.remove(txt);

            canvas.setActiveObject(rulerGroup);
            updateCanvas();
            updateMode("");
          } else {
            const line = new fabric.Rect({
              width: 0,
              height: 3,
              left: x,
              top: y + 6,
              fill: "#222",
            });

            const txt = new fabric.Text("0 m", {
              fontSize: 10,
              left: line.left + line.width / 2,
              top: side.top - 5,
              id: "myId",
            });

            txt.set({ left: txt.left - txt.width / 2 });

            canvas.add(line);
            canvas.add(txt);
            updateCanvas();
            canvas.setActiveObject(line);
            oneSideDrawn = true;
          }
        }
}

canvas.on("mouse:move", (event) => {
     function rulerMove() {
          const line = canvas.getActiveObject();
          const lineTxt = canvas.getById("myId");

          const mouse = canvas.getPointer(event.e);
          const { x } = mouse;

          const width = Math.abs(x - line.left);

          if (!width) {
            return false;
          }

          line.set({ width });
          lineTxt.set({
            text: parseFloat(width).toFixed(2) + " m",
            left: line.left + width / 2 - 15,
          });

   
          updateCanvas();
     }
}

这是一个屏幕截图

正如我们可以看到的，文本正在console.log中更新，但画布上的值仍然是“0 m”

更新fabricjs

我在使用fabricjs 4.3.0时遇到了这个问题。
在fabricjs 4.4.0中，他们解决了这个问题