WPF缩放画布绘制线条的畸变问题解决咨询

核心思路：分离坐标映射与线条粗细控制 #

问题根源是Canvas的RenderTransform同时作用于坐标和线条粗细，导致不等比缩放时线条被拉伸变形。解决关键是让坐标映射和线条粗细控制各自独立：

• 修正线条粗细且保留正确坐标

  1. 先获取当前Canvas的RenderTransform（假设是包含ScaleX、ScaleY的CompositeTransform或TransformGroup）
  2. 在调用DrawingContext.DrawLine前，推入一个反向缩放的ScaleTransform：

     var canvasScale = (CompositeTransform)canvas.RenderTransform;
     var reverseScale = new ScaleTransform(1/canvasScale.ScaleX, 1/canvasScale.ScaleY);
     drawingContext.PushTransform(reverseScale);
     

  3. 绘制线条时仍使用原始坐标，因为Canvas的RenderTransform会把反向缩放后的线条坐标映射回正确位置，同时反向缩放抵消了RenderTransform对线条粗细的拉伸，保证横竖线粗细一致
  4. 绘制完成后记得调用drawingContext.Pop()移除变换

• 优化线条显示细节
  给绘制用的Pen添加以下设置，减少不等比缩放带来的转角、端点畸变：

  var pen = new Pen(Brushes.Black, 1)
  {
      LineJoin = PenLineJoin.Round,
      EndCap = PenLineCap.Round
  };
  

• 确保Canvas与图像变换完全同步
  用数据绑定让Canvas的RenderTransform直接关联图像的Transform，避免手动同步出错：

  <Image x:Name="TargetImage" RenderTransform="{Binding ImageTransform}" />
  <Canvas RenderTransform="{Binding ElementName=TargetImage, Path=RenderTransform}" />
  

• 替代方案：合并图像与线条绘制
  放弃叠加Canvas的方式，在同一个Visual的DrawingContext中先绘制图像、再绘制线条：

  1. 对图像应用所需的缩放、旋转变换后绘制
  2. 绘制线条前推入反向缩放变换修正粗细，用原始坐标绘制线条
  3. 这种方式无需额外的Canvas，所有变换统一控制，避免层级同步问题

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