文本不会在视图中更新-fabricjs

Question

我正在使用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”

Answer 1

更新fabricjs！

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