WPF Canvas中TextBlock与线条位置不一致问题排查

1. 翻转变换的原点问题 #

WPF里RenderTransform默认以元素左上角为变换原点。你给TextBlock加了ScaleY=-1垂直翻转，它会绕自身左上角反转，导致TextBlock实际显示位置和预期的Canvas坐标错位。而线条是直接基于Canvas坐标绘制，没有这个翻转偏移，所以位置对不上。

2. 定位基准不一样 #

Canvas对Line和TextBlock的定位逻辑有区别：

• Line的X1/Y1/X2/Y2是直接对应Canvas的坐标点，你用canvasCoords当中心点算线条端点，位置自然精准。
• TextBlock通过Canvas.SetLeft/SetBottom设置的是它左上角的位置，你把canvasCoords当成中心点来设置，再加上翻转的影响，位置肯定错。

3. 坐标系转换顺序搞反了 #

你先给TextBlock设了Canvas的Bottom位置，再做垂直翻转，等于先把TextBlock放在(canvasCoords[0], 画布高度 - canvasCoords[1])的位置，然后绕左上角翻转，整体位置直接偏了。

1. 把变换原点改成TextBlock中心 #

让翻转绕自身中心进行，避免位置偏移：

textBlock.RenderTransformOrigin = new Point(0.5, 0.5);

2. 调整TextBlock的Canvas定位逻辑 #

要让TextBlock中心点和线条中心点重合，得先测量TextBlock的尺寸，再计算左上角的偏移量：

修改后的完整代码片段 #

// 创建点标签
TextBlock textBlock = new TextBlock();
textBlock.Text = name;
textBlock.FontSize = 4;
textBlock.Foreground = redBrush;

// 设置翻转原点为自身中心
textBlock.RenderTransformOrigin = new Point(0.5, 0.5);
ScaleTransform scaleTransform = new ScaleTransform();
scaleTransform.ScaleY = -1;
textBlock.RenderTransform = scaleTransform;

// 先测量TextBlock的实际尺寸（还没加入画布前需要手动测量）
textBlock.Measure(new Size(double.PositiveInfinity, double.PositiveInfinity));
Size textSize = textBlock.DesiredSize;

// 设置Left和Top，让TextBlock中心点和线条中心点对齐
Canvas.SetLeft(textBlock, canvasCoords[0] - textSize.Width / 2);
// 因为ScaleY=-1翻转了Y轴，这里用SetTop对应原坐标系的Bottom逻辑
Canvas.SetTop(textBlock, canvasCoords[1] - textSize.Height / 2);

map_page_canvas.Children.Add(textBlock);

替代方案（用SetBottom的情况） #

如果一定要用Canvas.SetBottom，得考虑翻转后的Y轴变化，计算方式改成：

Canvas.SetBottom(textBlock, canvasHeight - canvasCoords[1] - textSize.Height / 2);

但用SetTop配合翻转的逻辑更直观，和线条的坐标转换逻辑一致。

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