Fabric.js多边形更新点后缩放/旋转功能异常的问题求助

我现在在用最新版的Fabric.js，遇到了一个多边形的问题——大家都知道Fabric.js里多边形的points字段在修改后不会自动更新，它一直存的是初始点坐标。

我想在修改多边形后重新计算它的点，拿到每个点当前的位置。为了实现这个，我用了calcTransformMatrix的技巧（计算出来的点坐标是对的），然后把新点赋值给现有的多边形。

但问题来了：当我尝试缩放或旋转更新过点的多边形时，会出现崩溃和各种奇怪的bug，我完全搞不懂原因。

我的代码： #

JavaScript部分：

const canvas = new fabric.Canvas("canvas", {
  width: 600,
  height: 600,
  backgroundColor: "lightgray",
});

const polygonPoints = [
  { x: 100, y: 50 },
  { x: 200, y: 80 },
  { x: 250, y: 200 },
  { x: 150, y: 300 },
  { x: 50, y: 200 },
];

const polygon = new fabric.Polygon(polygonPoints, {
  fill: "rgba(0, 128, 255, 0.5)",
  stroke: "blue",
  strokeWidth: 2,
  selectable: true,
});

canvas.add(polygon);

// 监听修改事件
polygon.on("modified", (o) => {
  // 计算新的点坐标
  const newPoints = polygon
    .get("points")
    .map(
      (p) =>
        new fabric.Point(p.x - polygon.pathOffset.x, p.y - polygon.pathOffset.y)
    )
    .map((p) => p.transform(polygon.calcTransformMatrix()));

  polygon.set({ points: newPoints });
  polygon.setBoundingBox(true);
  canvas.requestRenderAll();

  // 这里用红色小方块标记每个点，方便观察
  polygon.points.forEach((e) => {
    canvas.add(
      new fabric.Rect({
        left: e.x,
        top: e.y,
        width: 5,
        height: 5,
        fill: "red",
      })
    );
  });
});

HTML部分：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Fabric js</title>

    <script src="https://cdn.jsdelivr.net/npm/fabric@latest/dist/index.min.js"></script>
  </head>
  <body>
    <canvas id="canvas" width="600" height="600"></canvas>
    <script src="main.js"></script>
  </body>
</html>

拖拽多边形之后，当我尝试缩放或旋转它时，会看到非常怪异的行为。我期望更新点之后，旋转和缩放操作能正常工作，不会搞坏多边形的形态。

现象对比： #

• 更新点之前（拖拽操作前）：
  
• 拖拽后尝试缩放/旋转：
  

备注：内容来源于stack exchange，提问作者TheSinOfGreed