获取在鼠标拖动时旋转的网格

Question

如何让网格在鼠标拖动时旋转，如 WPF c# 中的 gif 中所示？

我试过这段代码，但结果很糟糕，我不知道应该如何调整大小。

    double angle = 30;
    Point oldPoint;
    Point newPoint;
    int d;
    RotateTransform transe = new RotateTransform();
    private void Border_MouseMove(object sender, MouseEventArgs e)
    {
        Grid b = sender as Grid;
       if (Mouse.Captured == b)
        {
            newPoint = Mouse.GetPosition(mu);    
            if (oldPoint.Y != newPoint.Y)
            {
                if (oldPoint.Y > newPoint.Y)
                    transe.Angle = (oldPoint.Y - newPoint.Y);
                else
                    transe.Angle += (newPoint.Y - oldPoint.Y);

                gt.RenderTransform = transe;
            }
            return;
        }
    }


    private void Border_MouseLeftButtonDown_2(object sender, MouseButtonEventArgs e)
    {
        Grid b = sender as Grid;
        if (Mouse.Captured != b)
        {
            oldPoint = Mouse.GetPosition(mu);
            Mouse.Capture(b);

        }
    }

    private void Border_MouseLeftButtonUp_1(object sender, MouseButtonEventArgs e)
    { 
        oldPoint = new Point(0, 0);
        newPoint = new Point(0, 0);

        Mouse.Capture(null);
    }

xaml中的控件：

<Grid x:Name="mu" Height="90" Width="128" MouseUp="mu_MouseUp" MouseMove="Drase_MouseMove"
      Canvas.Left="30" Canvas.Top="45" Cursor="Arrow" Background="White">

<Grid x:Name="gt" HorizontalAlignment="Left" Height="6" VerticalAlignment="Center"
      Background="Black" Width="{Binding ActualWidth, ElementName=mu, Mode=OneWay}"
      MouseMove="Border_MouseMove" MouseLeftButtonDown="Border_MouseLeftButtonDown_2" 
      MouseLeftButtonUp="Border_MouseLeftButtonUp_1" RenderTransformOrigin="0.5,0.5"/>
</Grid>

这就是我到目前为止所取得的成果。如您所见，它正在不受控制地旋转。

Answer 1

你的方法不太对。这是我的代码工作版本：

private void Border_MouseMove(object sender, MouseEventArgs e)
{
    Grid b = sender as Grid;
    if (Mouse.Captured == b)
    {
        Point origin = new Point(mu.ActualWidth / 2, mu.ActualHeight / 2);
        var rawPoint = Mouse.GetPosition(mu);
        var transPoint = new Point(rawPoint.X - origin.X, rawPoint.Y - origin.Y);
        var radians = Math.Atan2(transPoint.Y, transPoint.X);
        var angle = radians * (180 / Math.PI);
        transe.Angle = angle;
        gt.RenderTransform = transe;
    }
}

在数学方面我不是最好的，但我会尽力而为。我的代码背后的想法是，旋转变换的角度应始终与鼠标相对于 mu.

的垂直中心线的角度相匹配

Point origin = new Point(mu.ActualWidth / 2, mu.ActualHeight / 2); 给我 mu 的中心，这是计算的数学原点。

var transPoint = new Point(rawPoint.X - origin.X, rawPoint.Y - origin.Y); 转换鼠标光标的位置，使其相对于 mu 的中心（即 origin），而不是左上角。

然后，从this answer, I use Atan2偷了一点我不太明白的代码来计算角度。

获取在鼠标拖动时旋转的网格

Get a grid to rotate on mouse drag

c#

wpf

xaml

rotation