WPF/SVG中多次平移旋转后路径原位反向旋转的实现方案

针对多次旋转、平移后的路径，要反向旋转-30度恢复原始姿态并适配灰色矩形，核心是绕原始路径的中心旋转，而非当前渲染后的中心。之前的方法失效是因为没处理累积变换的影响，下面是具体实现：

WPF 实现步骤 #

• 获取累积变换矩阵
  不管你是用RenderTransform还是LayoutTransform叠加的变换，先拿到最终的变换矩阵：

  Matrix finalMatrix = redPath.RenderTransform.Value;
  

• 逆变换回到原始坐标空间
  对矩阵求逆，把路径拉回未做任何变换的原始状态：

  Matrix inverseMatrix = finalMatrix;
  inverseMatrix.Invert();
  // 应用逆变换到路径数据
  PathGeometry originalGeo = redPath.Data.Clone();
  originalGeo.Transform = new MatrixTransform(inverseMatrix);
  

• 计算原始路径的旋转中心
  现在可以用原始路径的边界框中心作为旋转点：

  Rect originalBounds = originalGeo.Bounds;
  Point rotateCenter = new Point(originalBounds.Left + originalBounds.Width/2, originalBounds.Top + originalBounds.Height/2);
  

• 组合反向旋转+适配矩形的变换
  先做-30度旋转，再平移、缩放到灰色矩形的位置：

  Matrix targetMatrix = Matrix.Identity;
  // 绕原始中心旋转-30度
  targetMatrix.RotateAt(-30, rotateCenter.X, rotateCenter.Y);
  // 平移到灰色矩形左上角
  targetMatrix.Translate(grayRect.Left - originalBounds.Left, grayRect.Top - originalBounds.Top);
  // 缩放适配矩形大小（可选，根据需求）
  double scaleX = grayRect.Width / originalBounds.Width;
  double scaleY = grayRect.Height / originalBounds.Height;
  targetMatrix.ScaleAt(scaleX, scaleY, rotateCenter.X, rotateCenter.Y);
  
  // 把最终变换应用到路径
  redPath.RenderTransform = new MatrixTransform(targetMatrix);
  

SVG 等价实现 #

SVG里用getCTM()拿累积变换矩阵，逻辑和WPF一致：

<script>
  const redPath = document.getElementById('redPath');
  const grayRect = document.getElementById('grayRect');
  
  // 获取累积变换并求逆
  const ctm = redPath.getCTM();
  const inverseCTM = ctm.inverse();
  
  // 拿到原始路径的边界框和旋转中心
  const originalBBox = redPath.getBBox();
  const rotateCenter = {
    x: originalBBox.x + originalBBox.width/2,
    y: originalBBox.y + originalBBox.height/2
  };
  
  // 构建变换序列：逆变换 → 反向旋转 → 缩放 → 平移
  redPath.transform.baseVal.clear();
  redPath.transform.baseVal.appendItem(new DOMMatrix(inverseCTM));
  redPath.transform.baseVal.appendItem(new DOMMatrix().rotate(-30, rotateCenter.x, rotateCenter.y));
  redPath.transform.baseVal.appendItem(new DOMMatrix().scale(
    grayRect.width.baseVal.value / originalBBox.width,
    grayRect.height.baseVal.value / originalBBox.height,
    rotateCenter.x, rotateCenter.y
  ));
  redPath.transform.baseVal.appendItem(new DOMMatrix().translate(
    grayRect.x.baseVal.value - originalBBox.x,
    grayRect.y.baseVal.value - originalBBox.y
  ));
</script>

为什么之前的方法没用？ #

• RenderTransformOrigin="0.5,0.5"是相对元素自身布局边界的比例点，路径平移后，这个点和最终渲染的中心完全不重合，自然无效。
• 直接用最终渲染的BoundingBox中心旋转，这个中心是旋转后的路径中心，反向旋转后会让原始路径的中心偏移，导致姿态和位置都不对。

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