如何重新计算点经旋转、平移、缩放后的坐标？多舞台多边形适配求助

核心思路是基于固定尺寸的大厅图像做坐标转换，而非依赖舞台的绝对坐标——你之前用的item.getAbsoluteTransform().point()是直接读取舞台绝对坐标，一旦舞台尺寸变化，大厅图像的居中位置会改变，这个绝对坐标和大厅图的相对位置就会偏移，自然无法匹配。

• 保存多边形时，转成相对于大厅图像的归一化坐标：

  1. 先获取大厅图像在当前舞台的左上角坐标和自身固定尺寸
  2. 将多边形的每个顶点，减去大厅图的左上角坐标后，再除以大厅图的宽/高，得到0-1之间的归一化比例值（这个比例值对应大厅图上的固定位置，不受舞台尺寸影响）

  示例代码（以Konva图形库为例，其他库逻辑通用）：

  // hallImg为当前舞台上的大厅图像节点
  const hallX = hallImg.x();
  const hallY = hallImg.y();
  const hallWidth = hallImg.width();
  const hallHeight = hallImg.height();
  
  // 处理多边形顶点，生成归一化坐标数组
  const normalizedPoints = polygon.points().reduce((acc, curr, idx) => {
    if (idx % 2 === 0) {
      // x轴归一化：(舞台绝对x - 大厅图左上角x) / 大厅图宽度
      acc.push((curr - hallX) / hallWidth);
    } else {
      // y轴归一化：(舞台绝对y - 大厅图左上角y) / 大厅图高度
      acc.push((curr - hallY) / hallHeight);
    }
    return acc;
  }, []);
  
  // 将normalizedPoints存入后端或本地存储
  

• 在第二个舞台渲染时，把归一化坐标转回新舞台的绝对坐标：

  1. 获取新舞台上大厅图像的左上角坐标和尺寸
  2. 用归一化值乘以新大厅图的宽/高，再加上新的左上角坐标，得到适配后的舞台绝对坐标

  示例代码：

  // newHallImg为第二个舞台上的大厅图像节点
  const newHallX = newHallImg.x();
  const newHallY = newHallImg.y();
  const newHallWidth = newHallImg.width();
  const newHallHeight = newHallImg.height();
  
  // 转换为新舞台的绝对坐标数组
  const renderPoints = normalizedPoints.reduce((acc, curr, idx) => {
    if (idx % 2 === 0) {
      acc.push(curr * newHallWidth + newHallX);
    } else {
      acc.push(curr * newHallHeight + newHallY);
    }
    return acc;
  }, []);
  
  // 创建新多边形并添加到新舞台
  const newPolygon = new Konva.Polygon({
    points: renderPoints,
    // 复制原多边形的样式参数
    fill: polygon.fill(),
    stroke: polygon.stroke(),
    strokeWidth: polygon.strokeWidth()
  });
  newStage.add(newPolygon);
  

• 额外提示：如果多边形存在缩放、旋转等变换操作，保存时需同步记录这些变换参数，渲染时给新多边形设置相同的变换属性后再做坐标转换，才能保证形态和位置完全匹配。

内容的提问来源于stack exchange，提问作者Akbar Bobomurodov