我们都知道RotateTransform会受到旋转中心RenderTransformOrigin的影响


因此我们如果期望在中点旋转,我们可以选择设置RenderTransformOrigin=0.5,0.5

        <Rectangle Width="100" Height="100" Fill="Teal" RenderTransformOrigin="0.5,0.5">
            <Rectangle.RenderTransform>
                <RotateTransform Angle="45"></RotateTransform>
            </Rectangle.RenderTransform>
        </Rectangle>

1531654886162

和期望相符合。

但是智能提示告诉我们,在旋转的时候还能够设置一些其他东西。比如CenterXCenterY

1531655077408

我们看到CenterX的智能提示是“获取或者设置旋转中心点的X坐标”。

这个功能类似于RotateAt能够使我们绕非RenderTransformOrigin进行旋转

OK,我们现在尝试将旋转中心改到10,10点,代码如下(注意,CenterXCenterY是绝对坐标,RenderTransformOrigin是相对坐标)

        <Rectangle Width="100" Height="100" Fill="Teal" RenderTransformOrigin="0.5,0.5">
            <Rectangle.RenderTransform>
                <RotateTransform Angle="45" CenterX="10" CenterY="10"></RotateTransform>
            </Rectangle.RenderTransform>
        </Rectangle>

1531656887229

咦,期望不一致。我们期望矩形绕着窗口的(10,10)点旋转45°,但是最终的呈现却几乎没有变动

实际上,CenterXCenterY以及RotateAtScaleAt都是相对于RenderTransformOrigin的偏移

我们做一个实现,,添加一个RenderTransformOrigin为0,0,CenterXCenterY为60的矩形框

那么两边的旋转中心都是0.5*100+10=0*100+60=60

        <Rectangle Width="100" Height="100" Fill="Teal" RenderTransformOrigin="0.5,0.5">
            <Rectangle.RenderTransform>
                <RotateTransform Angle="45" CenterX="10" CenterY="10" />
            </Rectangle.RenderTransform>
        </Rectangle>
        <Rectangle Width="100" Height="100" Stroke="Red" StrokeThickness="3" RenderTransformOrigin="0,0">
            <Rectangle.RenderTransform>
                <RotateTransform Angle="45" CenterX="60" CenterY="60" />
            </Rectangle.RenderTransform>
        </Rectangle>

1531657620627

可以看到图片重合咯


本文会经常更新,请阅读原文: https://huangtengxiao.gitee.io/post/RenderTransformOrigin%E5%92%8CRotateAt%E4%B8%80%E8%B5%B7%E4%BD%9C%E7%94%A8%E4%BC%9A%E6%80%8E%E6%A0%B7.html ,以避免陈旧错误知识的误导,同时有更好的阅读体验。

知识共享许可协议 本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。欢迎转载、使用、重新发布,但务必保留文章署名黄腾霄(包含链接: https://huangtengxiao.gitee.io ),不得用于商业目的,基于本文修改后的作品务必以相同的许可发布。如有任何疑问,请 与我联系