MAUI中Path的旋转变换问题

我来帮你排查下这个旋转问题~ 当你把角度改成90度时，你期望三角形绕合适中心旋转到目标位置，但实际效果不对，问题大概率出在旋转中心的设置上。

先看你的效果对比：

• 期望效果：
• 实际效果：

再看你的XAML代码：

<Grid WidthRequest="100" HeightRequest="100" HorizontalOptions="Start" VerticalOptions="Start">
<Rectangle Fill="Yellow" Stroke="Black" StrokeThickness="2" />

<Path Fill="Blue" Aspect="Uniform" HorizontalOptions="Start" VerticalOptions="Start"
        Data="M 0,0 .5,.5 0,1 0,0">
    <Path.RenderTransform>
        <RotateTransform Angle="0" CenterX="50" CenterY="50" />
    </Path.RenderTransform>
</Path>

<!-- 你未写完的Line代码这里暂时忽略 -->
</Grid>

问题核心在于：RotateTransform的CenterX和CenterY是相对于Path自身的坐标系，而非父Grid的尺寸。你设置的CenterX="50"和CenterY="50"是父Grid的中心，但你的Path因为HorizontalOptions="Start"、VerticalOptions="Start"加上Aspect="Uniform"的缩放，实际尺寸远小于100x100，这个旋转中心完全不在Path的范围内，自然会导致旋转位置不符合预期。

给你两个简单的解决办法：

1. 使用RenderTransformOrigin（更推荐）：这个属性按元素自身尺寸的百分比设置变换原点，(0.5,0.5)就是元素的中心，不管Path实际多大，都会绕自身中心旋转。修改后的Path代码如下：

<Path Fill="Blue" Aspect="Uniform" HorizontalOptions="Start" VerticalOptions="Start"
        Data="M 0,0 .5,.5 0,1 0,0"
        RenderTransformOrigin="0.5,0.5">
    <Path.RenderTransform>
        <RotateTransform Angle="90" />
    </Path.RenderTransform>
</Path>

2. 绑定旋转中心到Path自身尺寸的一半：如果需要更精准的控制，可以把CenterX和CenterY绑定到Path的实际宽高的一半，不过需要额外写一个简单的转换器来实现除以2的逻辑，相对麻烦一些，所以第一种方法更便捷。

你试试第一种方案，应该就能得到你期望的旋转效果啦！

备注：内容来源于stack exchange，提问作者Lars Holm