1

在 WPF 方面，我是一名业余爱好者，我正在与我的男孩一起为他的 Lego Mindstorms 机器人构建一个 UI。

他让我用方向盘代替方向按钮，虽然我可以做到这一点，包括旋转变换，但我不知道如何让该变换在鼠标按下/拖动事件上相对于方向移动拖。

我到目前为止的 XAML 是这样的：

    <Image x:Name="steering" HorizontalAlignment="Left" Height="146" Margin="253,67,0,0" 
           VerticalAlignment="Top" Width="146" Source="images/steering-wheel.png" RenderTransformOrigin="0.5,0.5">
        <Image.RenderTransform>
            <RotateTransform CenterX="0.5" CenterY="0.5" />
        </Image.RenderTransform>
        <Image.Triggers>
            <EventTrigger RoutedEvent="Loaded">
                <BeginStoryboard>
                    <Storyboard RepeatBehavior="Forever">
                        <DoubleAnimation Storyboard.TargetProperty="(Image.RenderTransform).(RotateTransform.Angle)"
                                         From="0" To="360" Duration="0:0:2" />
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Image.Triggers>
    </Image>

我所追求的是检测用户何时向左或向右“拖动”方向盘并相应地转换图像的旋转角度。我应该从哪里开始？

4

1 回答 1

1

我做过类似的事情

您需要 2 个参考点来计算方向盘中心的旋转和鼠标的位置，方法如下

private void Steering_MouseMove(object sender, MouseEventArgs e)
{
    if (e.LeftButton == MouseButtonState.Pressed)
    {
        var control = sender as Ellipse;
        var point = e.GetPosition(control);
        var centre = new Point(control.Width / 2, control.Height / 2);
        var vector = point  - centre
        Steering.Angle = (Math.Atan2(vector.X,vector.Y) * 180 / Math.PI);
        //note default behaviour of Atan2 is Angle 0 = East and Anti Clockwise is a positive angle, 
        //by swapping X and Y north is now 0 angle and clockwise is positive
    }
}

那么你只需要绑定旋转

<Ellipse 
    MouseMove="Steering_MouseMove" >
    <Ellipse.RenderTransform>
        <RotateTransform Angle="{Binding Steering.Angle}" CenterX="0.5" CenterY="0.5"/>
    </Ellipse.RenderTransform>
</Ellipse>
于 2016-09-09T11:11:59.447 回答