WPF Canvas.Left / Canvas.Top 旋转时坐标不太正确，为什么？

Question

我有一个奇怪但大的问题。 我试图让用户在画布上移动/旋转一些矩形。我的机制基于操作 Canvas.Left / Canvas.Top 属性进行移动，以及 RenderTransform.Rotate 进行旋转。我只需要旋转 0/90/180/270 角度。

问题在于，放置在 0.0 角旋转的坐标 0.0 处的矩形显示正常，但位于 0.0 处且 90 角旋转的同一矩形显示位于 0.0 以外其他坐标的元素。正如我所看到的，在旋转为 0 或 180 的情况下，坐标总是正确的，但在 90 / 270 的情况下，坐标是错误的。 设置的坐标和用户看到的坐标之间的差异与高度和宽度之间的差异有关。

以前有人遇到过此类问题吗？

谢谢你， Daniell

编辑：

当然，这里有一些 xaml：

 <画布 
        身高=“500” 
        宽度=“500”
        背景=“绿色”

        <矩形 
            画布.左=“0” 
            画布.Top =“0”
            身高=“50”
            宽度=“100”
            渲染变换原点=“0.5,0.5”
            填充=“红色”

            <矩形.RenderTransform>
                <旋转变换 
                角度=“90”
                >>
            
        
        <矩形 
            画布.左=“0” 
            画布.Top =“0”
            身高=“50”
            宽度=“100”
            渲染变换原点=“0.5,0.5”
            填充=“皇家蓝”

            <矩形.RenderTransform>
                <旋转变换 
                角度=“0”
                >>
            
        
     

正如您所看到的，蓝色矩形似乎正确放置在 (0,0)，但红色矩形显示在不同的坐标处，即使它返回的仍然是 0,0。

我发现公式：

displayPointX = Canvas.Left + height /2 - width / 2

diaplayPointY = Canvas.Top + height /2 - width/2

Answer 1

丹尼尔，每个人告诉你的都是正确的。如果你有一个矩形，并将原点设置为 0.5, 0.5，这意味着“围绕该对象的质心旋转”，所以如果你旋转 90 或 270 度，当然它看起来会和你看到的一模一样。

如果您希望矩形旋转 90 度并仍然位于左上角，则必须旋转 90 度，然后平移 X 和 Y 以使角与 0,0 匹配，或者需要旋转约一个不同的中心（如 0,0），并且仅在 X 中翻译。

这是一个例子：

<Page
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Canvas Height="500" Width="500" Background="Green">
        <Rectangle Canvas.Left="0" Canvas.Top="0" Height="50" Width="100" RenderTransformOrigin="0.5,0.5" Fill="Red">
            <Rectangle.RenderTransform>
              <TransformGroup>
                <RotateTransform Angle="90" />
                <TranslateTransform X="-25" Y="25" />
              </TransformGroup>
            </Rectangle.RenderTransform>
        </Rectangle>
        <Rectangle Canvas.Left="0" Canvas.Top="0" Height="50" Width="100" RenderTransformOrigin="0.5,0.5" Fill="RoyalBlue">
            <Rectangle.RenderTransform>
                <RotateTransform Angle="0" />
            </Rectangle.RenderTransform>
        </Rectangle>
    </Canvas> 
</Page>

也许如果你解释一下你真正想用这个做什么会是最好的。这也很奇怪，你说 0 和 180 很好，因为角与 0,0 匹配，但随后你的形状被旋转，我们不知道保留方向对你是否重要。

Answer 2

您描述的行为在以下条件下发生：

1. 您的画布是非矩形的，
2. 您的 RenderTransformOrigin 为“0.5,0.5”并且
3. 您为 RenderTransform 使用 RotateTransform

您看到它的原因是因为矩形旋转了 180 度围绕其中心的度数具有完全相同的边界，但旋转 90 或 270 度的矩形则不然。想象一个宽而细的旋转矩形，您可以很容易地看到事实如此。

当您旋转 90 或 270 度时，您的角不再与容器匹配。

有许多解决方案可供使用：

• 使容器完全呈正方形
• 以 90 度和 270 度旋转更改画布的大小（翻转宽度和高度）
• 将 ScaleTransform 与 RotateTransform 组合，在一个方向上按 w/h 缩放画布，并在任何时候按 h/w 缩放画布旋转角度为 90 或 270 度，因此画布会拉伸以适合新的矩形
• 将 TranslateTransform 添加到 RotateTransform，每当旋转角度为 90 或 270 度时，它会将坐标系移动 wh 和 hw
• 计算新的 RenderTransformOrigin 以使角出来你想要的地方

Answer 3

坐标发生变化的原因是画布的坐标系随画布旋转。

http://msdn.microsoft.com/en- us/library/system.windows.media.rotatetransform.aspx 指出：

当您使用 RotateTransform 时，
意识到转变
旋转坐标系一个
关于点 (0,
0）。

假设你绕着一个正方形的质心旋转，当你旋转90度时（顺时针，RotateTransform认为方向为正），（0,0）指的是屏幕的右上角，180指的是下角右角，对于 270，它指的是左下角，而对于 0，如预期的那样，它指的是左上角。