Question

好的，我有一个Image对象，我想围绕它的左上角旋转。我设置了一个'X'度的RotateTransform。我的图像的边距设置为（400,400,0,0）。它以画布为中心。

问题在于，当我应用不同的旋转角度时，图像会向右和向下移动。看看帖子，我现在明白为什么会这样。旋转变换计算出一个边界矩形，因此如果旋转图像，它将具有一个更大的边界矩形。边距应用于该边界矩形，导致实际图像随着角度的变化向下和向右移动。

我想要的是图像的左上角在我的画布上始终精确地（400,400）并且图像围绕该点旋转。

我做了一些计算并且可以通过移动左边距和上边距来使其表现，但是只能使用以下方法在象限1和4（0-90度）和（270-360度）中获得计数等式：

对于0-90度:(只需改变边缘的TOP部分。所需的边距为（400,400,0,0）边距=（400-sin（角度）* Image.Height，400,0,0）;

270-360度:(只需改变保证金的TOP部分。所需保证金为（400,400,0,0）边距=（400,400 + sin（角度）* Image.Width，0,0）;

我已经尝试过使用RotateTransform.Transform（指向）并使用Image.TranslatPoint（指向）但似乎无法使用它们。

有人对我有任何建议吗？

我想如果我能在任何给定时间弄清楚图像的绑定矩形是什么，我可以弄清楚它的宽度/高度与我的图像宽度/高度之间的差异，并使用它来适当地移动边距。 / p>

我已经整理了一个可以显示我的问题的小应用程序。在运行时，应用程序显示一个红点，我希望矩形的左上角。我简化它使用网格而不是图像。在屏幕的左上角，有一个文本框，您可以在其中指定旋转角度。在文本框的右侧是两个RepeatButtons，如果您只是单击并按住它们，它们将递增和递减角度。请注意，当您更改角度时，网格的左上角会偏离红点。我希望它的行为就像你在左上角放一个别针，然后绕着针旋转它，而不是从角落开始的点移开。

感谢您的帮助。

以下是示例应用的代码：

XAML：

<Window x:Class="RenderTransformTester.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="900" Width="900">
    <Canvas x:Name="_canvas">
        <Grid x:Name="_gridImage"  Width="400" Height="200" Canvas.Left="400" Canvas.Top="400" Background="Navy">
            <Grid.LayoutTransform>
                <RotateTransform Angle="45" CenterX="0" CenterY="0"/>
            </Grid.LayoutTransform>
        </Grid>
        <Ellipse Fill="Red" Width="20" Height="20" Margin="390,390,0,0"/>
        <TextBox x:Name="_textBoxAngle" Width="70" Height="30" TextChanged="_textBoxAngle_TextChanged" Text="0"/>
        <RepeatButton x:Name="_buttonUp" Width="30" Height="15" Margin="70,0,0,0" Click="_buttonUp_Click"/>
        <RepeatButton x:Name="_buttonDown" Width="30" Height="15" Margin="70,15,0,0" Click="_buttonDown_Click"/>
    </Canvas>
</Window>

代码隐藏：

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;

namespace RenderTransformTester
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow
    {
        static double _left = -1;
        static double _top = -1;

        public MainWindow()
        {
            InitializeComponent();
        }

        private void _textBoxAngle_TextChanged(object sender, TextChangedEventArgs e)
        {
            int angle;
            int.TryParse(_textBoxAngle.Text, out angle);
            angle += 720;
            angle %= 360;

            _gridImage.LayoutTransform = new RotateTransform(angle, 0, 0);
        }

        private void _buttonUp_Click(object sender, RoutedEventArgs e)
        {
            int angle;
            int.TryParse(_textBoxAngle.Text, out angle);
            angle++;
            angle = angle % 360;
            _textBoxAngle.Text = angle.ToString();
        }

        private void _buttonDown_Click(object sender, RoutedEventArgs e)
        {
            int angle;
            int.TryParse(_textBoxAngle.Text, out angle);
            angle--;
            angle = angle % 360;
            _textBoxAngle.Text = angle.ToString();
        }

        private static double RadiansToDegrees(double radians)
        {
            return radians * 180 / Math.PI;
        }

        private static double DegreesToRadians(double degrees)
        {
            return degrees * Math.PI / 180;
        }
    }
}

Answer 1

请勿使用Margin进行此类定位，请使用附加的Canvas属性，即Canvas.Left等。
您还可以使用TransformGroup并应用TranslateTransform和RotateTransform，大概应该在翻译之前完成轮换。

Answer 2

您想在TransformGroup中使用TranslateTransform

<Grid>
    <Grid.RenderTransform>
        <TransformGroup>
            <RotateTransform Angle="45" CenterX="0" CenterY="0" />
            <TranslateTransform X="400" Y="400" />
        </TransformGroup>
    </Grid.RenderTransform>
</Grid>

RotateTransform移动我的图像并旋转它

2 个答案: