如何根据拖动边框旋转椭圆和边框？

Question

请根据我的要求找到附件图片。当拖动圆弧（边框）时，圆弧和滚轮通过鼠标位置旋转。你能帮帮我吗？如果在按钮中旋转弧线和滚轮，请单击它。但我想在拖动边框（弧线）中旋转它。我被计算卡住了。

XAML:
<Grid HorizontalAlignment="Center">
    <StackPanel Orientation="Horizontal" x:Name="mainStackPanel" RenderTransformOrigin="0.5,0.5">
        <Grid>
            <Border BorderThickness="10" BorderBrush="Blue" MouseMove="Border_MouseMove" MouseLeftButtonDown="Border_MouseLeftButtonDown"
                    MouseLeftButtonUp="Border_MouseLeftButtonUp" Width="10" Height="90" />
        </Grid>
        <Grid x:Name="rotateGrid" Margin="20 0 0 0" RenderTransformOrigin="0.5,0.5">
            <Ellipse Height="250" Width="250" Stroke="Red" StrokeThickness="20"/>
            <Border BorderThickness="10" BorderBrush="Red" Height="15" Width="250"
            HorizontalAlignment="Stretch" VerticalAlignment="Center"/>

            <Border BorderThickness="10" BorderBrush="Red" Width="15"  Height="250"
            HorizontalAlignment="Center" VerticalAlignment="Stretch"/>

            <Border BorderThickness="10" BorderBrush="Red" Width="15"  Height="246" RenderTransformOrigin="0.5,0.5"
            HorizontalAlignment="Center" VerticalAlignment="Stretch">
                <Border.RenderTransform>
                    <RotateTransform Angle="45"/>
                </Border.RenderTransform>
            </Border>
            <Border BorderThickness="10" BorderBrush="Red" Width="15"  Height="246" RenderTransformOrigin="0.5,0.5"
            HorizontalAlignment="Center" VerticalAlignment="Stretch">
                <Border.RenderTransform>
                    <RotateTransform Angle="135"/>
                </Border.RenderTransform>
            </Border>

        </Grid>
        <Grid Margin="20 0 0 0">
            <Border BorderThickness="10" BorderBrush="Blue" Width="10" Height="90" />
        </Grid>

    </StackPanel>

Code Behind:
RotateTransform trans = new RotateTransform();
    double angle = 30;
    Point oldPoint;
    Point newPoint;
    bool dragStarted = false;

    private void Button_Click(object sender, RoutedEventArgs e)
    {
        trans.Angle = angle;
        mainStackPanel.RenderTransform = trans;
        if (angle >= 360)
            angle = 0;
        angle += 30;
    }

    private void Border_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
    {
        dragStarted = true;
        oldPoint = e.GetPosition(this);
        Mouse.Capture(sender as IInputElement);
    }

    private void Border_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
    {
        Mouse.Capture(null);
        oldPoint = new Point(0, 0);
        newPoint = new Point(0, 0);
        dragStarted = false;
    }
    protected override void OnMouseLeftButtonUp(MouseButtonEventArgs e)
    {
        Mouse.Capture(null);
        oldPoint = new Point(0, 0);
        newPoint = new Point(0, 0);
        dragStarted = false;
        base.OnMouseLeftButtonUp(e);
    }

    private void Border_MouseMove(object sender, MouseEventArgs e)
    {
        if (dragStarted)
        {
            newPoint = e.GetPosition(this);
            if (oldPoint.Y != newPoint.Y)
            {
                if (oldPoint.Y > newPoint.Y)
                    trans.Angle = (oldPoint.Y - newPoint.Y);
                else
                    trans.Angle += (newPoint.Y - oldPoint.Y);

                mainStackPanel.RenderTransform = trans;
            }
        }
    }

Answer 1

首先，我将更改以下几行：

if (angle >= 360)
        angle = 0;
    angle += 30;

到这一行：

angle = angle >= 330 ? 0 : angle + 30;

虽然我怀疑它会导致太多问题。在您的代码中，例如，如果 angle 等于 350，那么它最终会是 380，但 WPF 应该将该角度环绕到 20 的有效角度。

Ahhhhhhh...我刚刚解决了您的确切要求...您希望用户移动鼠标并且您希望形状旋转只要用户移动了鼠标，就好像他们实际上在移动鼠标一样。

好的，来了……我可以解释你必须做什么，但不能为你做。我希望你的三角学很好，因为我已经几十年没用过了！基本上，如果我没记错的话，我们想创建一些假想的三角形来获得我们的计算数字。三角形的点将来自圆心和圆周周围的各个点。所以第一件事是记下圆心所在的确切Point...我将把它留给你。

接下来，我们要找到要使用的其他数字。一个将始终位于中心的正上方、下方、左侧或右侧，因此我们的三角形将始终具有直角...如果我们希望对 Math.Sin 和 Math.Cos 的调用返回有效，则需要这个结果。如果您不了解三角学，可以查看 Maths Is Fun 网站上的Sine, Cosine and Tangent 页面了解更多信息。

每个三角形的第三个和最后一个点将是鼠标的位置，或者更准确地说，是圆周上鼠标光标方向上的位置。这是通过创建一个更大的假想圆来实现的，其中包括鼠标光标位置、圆心以及圆心正上方、下方、左侧或右侧的位置，这样我们更大的三角形也有一个直角。

形成了这些假想的三角形（您可能受益于在纸上绘制这些以帮助可视化情况），然后您可以使用 Math 类的 Sin 和 Cos 方法来计算将形状旋转到所需的角度。虽然我相信 RotateTransform.Angle 属性以度为单位（MSDN 目前不可用），但您可能需要调整生成的角度值以适应 WPF 奇怪的 0 度位置（通过添加或减去 90 的除数）。

最后一件事是我祝你好运。