Преобразование руля с помощью WPF

Я любитель, когда дело доходит до WPF, и я работаю над созданием пользовательского интерфейса с моим мальчиком для его робота Lego Mindstorms.

Он попросил меня поставить рулевое колесо вместо кнопок направления, и хотя я могу это сделать, включая преобразование вращения, я не знаю, как заставить это преобразование перемещаться по событию нажатия/перетаскивания мыши относительно направления движения. тяга.

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>

Что мне нужно, так это определить, когда пользователь «перетаскивает» этот руль влево или вправо, и соответствующим образом преобразовать угол поворота изображения. С чего начать?


animation wpf mindstorms
person Phil.Wheeler    schedule 09.09.2016    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Я сделал что-то подобное

вам нужно 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>
person MikeT    schedule 09.09.2016
comment
Я применил немного другой вариант: ` RotateTransform rotate = new RotateTransform((Math.Atan2(vector.X, vector.Y) * 180 / Math.PI)); рулевое управление.RenderTransform = rotate;` В противном случае, спасибо - этого было достаточно, чтобы я начал. - person Phil.Wheeler; 10.09.2016