WPF：应用RenderTransform后计算多边形顶点新坐标并绑定顶点标签

我明白你的困扰——当你给Polygon应用RenderTransform（旋转、缩放、平移）时，它只是在视觉上改变了形状的位置和大小，但原始的Points属性并不会被修改，所以你手动设置的Label位置自然跟不上变换后的顶点。下面给你两种实用的解决方案，根据你的需求选就行：

方案一：手动计算变换后的顶点坐标 #

既然RenderTransform不会更新Points，那我们可以主动用变换对象来计算每个顶点的新坐标，然后更新Label的位置。

实现步骤： #

• 获取Polygon的RenderTransform（这里是TransformGroup）
• 对每个原始顶点，调用变换的Transform方法得到变换后的坐标
• 把计算出的坐标赋值给对应Label的Canvas.Left和Canvas.Top

后台代码示例： #

假设你在窗口的构造函数或者变换触发时执行这段代码：

public MainWindow()
{
    InitializeComponent();
    // 假设你的Polygon命名为trianglePolygon，Labels分别命名为v1Label、v2Label、v3Label
    UpdateLabelPositions();
}

private void UpdateLabelPositions()
{
    var transform = trianglePolygon.RenderTransform as TransformGroup;
    if (transform == null) return;

    // 原始顶点
    var originalPoints = new List<Point>
    {
        new Point(0, 0),
        new Point(0, 100),
        new Point(100, 100)
    };

    // 计算变换后的坐标
    var transformedPoints = originalPoints.Select(p => transform.Transform(p)).ToList();

    // 更新标签位置
    v1Label.SetValue(Canvas.LeftProperty, transformedPoints[0].X);
    v1Label.SetValue(Canvas.TopProperty, transformedPoints[0].Y);
    
    v2Label.SetValue(Canvas.LeftProperty, transformedPoints[1].X);
    v2Label.SetValue(Canvas.TopProperty, transformedPoints[1].Y);
    
    v3Label.SetValue(Canvas.LeftProperty, transformedPoints[2].X);
    v3Label.SetValue(Canvas.TopProperty, transformedPoints[2].Y);
}

记得给XAML里的Polygon和Labels加上x:Name：

<Polygon x:Name="trianglePolygon" Points="0,0 0,100 100,100" Stroke="Black" StrokeThickness="1" RenderTransformOrigin="0.5,0.5">
    <Polygon.RenderTransform>
        <TransformGroup>
            <ScaleTransform ScaleX="5" />
            <TranslateTransform X="20" Y="20" />
            <RotateTransform Angle="45" />
        </TransformGroup>
    </Polygon.RenderTransform>
</Polygon>
<Label x:Name="v1Label" Canvas.Left="0" Canvas.Top="0" Content="V1" />
<Label x:Name="v2Label" Canvas.Left="0" Canvas.Top="100" Content="V2" />
<Label x:Name="v3Label" Canvas.Left="100" Canvas.Top="100" Content="V3" />

如果你的变换是动态调整的（比如用户拖动滑块改变旋转角度），记得在变换改变时调用UpdateLabelPositions()方法。

方案二：将Polygon和标签放入同一容器，一起应用变换 #

这是更简洁的方案——把Polygon和所有顶点标签放到一个子Canvas里，然后给这个子Canvas应用RenderTransform。这样整个容器里的元素都会同步变换，完全不用手动计算坐标。

修改后的XAML代码： #

<Window x:Class="WpfApp11.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp11"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <Canvas>
            <!-- 子Canvas用来承载三角形和标签，统一应用变换 -->
            <Canvas RenderTransformOrigin="0.5,0.5">
                <Canvas.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform ScaleX="5" />
                        <TranslateTransform X="20" Y="20" />
                        <RotateTransform Angle="45" />
                    </TransformGroup>
                </Canvas.RenderTransform>
                
                <Polygon Points="0,0 0,100 100,100" Stroke="Black" StrokeThickness="1" />
                <Label Canvas.Left="0" Canvas.Top="0" Content="V1" />
                <Label Canvas.Left="0" Canvas.Top="100" Content="V2" />
                <Label Canvas.Left="100" Canvas.Top="100" Content="V3" />
            </Canvas>
        </Canvas>
    </Grid>
</Window>

这个方案的好处是：

• 代码更简洁，不需要后台计算
• 所有元素自动同步变换，不管你调整旋转、缩放还是平移，标签都会精准跟着顶点走
• 保持了RenderTransformOrigin的中心变换效果，和你原来的设置一致

两种方案的选择 #

• 如果需要对标签做额外的自定义处理（比如变换后调整标签的偏移量），选方案一
• 如果只是要简单的同步移动，方案二更高效、更易维护

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