WPF圆形移动物体

Question

我正在尝试创建一个示例项目来沿 WPF 中的圆形路径移动椭圆对象。为此，我使用了以下方程：x = x0 + R * sin (a), y = y0 + R * cos (a)，这里 (x0, y0) 是圆形路径的中心，R 是路径的半径路径，但我的椭圆不是沿圆移动，而是沿直线移动。 我哪里弄错了？

我的 XAML 来源：

<Window x:Class="MyWpfAppSample1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:MyWpfAppSample1"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800" WindowStartupLocation="CenterOwner">
    <Grid>
        <Button Content="Start" x:Name="btnStart" Width="100" Height="50" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="100,10,0,0" Click="btnStart_Click"/>
        <Button Content="Stop" x:Name="btnStop" Width="100" Height="50" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="210,10,0,0" Click="btnStop_Click"/>
        <Ellipse x:Name="myEllipse" Height="10" Width="10" Fill="Aqua" Margin="400,210,0,0" VerticalAlignment="Top" HorizontalAlignment="Left"/>
    </Grid>
</Window>

我的 XAML C# 代码：

public partial class MainWindow : Window
    {
        private double x;
        private double y;
        private double angle;
        private CancellationTokenSource tokenSource;
        public MainWindow()
        {
            InitializeComponent();            
        }

        
        
        private void btnStart_Click(object sender, RoutedEventArgs e)
        {
            tokenSource = new CancellationTokenSource();
            var task = Task.Run(() => MoveMyEllipse(tokenSource.Token));            
        }

        private void btnStop_Click(object sender, RoutedEventArgs e)
        {
            tokenSource.Cancel();
        }

        private void MoveMyEllipse(CancellationToken token)
        {
            while (!token.IsCancellationRequested)
            {
                angle = angle + 0.1;
                Invoke(() =>
                {
                    x = myEllipse.Margin.Top + myEllipse.Height * Math.Sin(angle);
                    y = myEllipse.Margin.Left + myEllipse.Width * Math.Cos(angle);
                    myEllipse.Margin = new Thickness(x, y, 0, 0);
                });
                Thread.Sleep(100);
            }
        }
        private void Invoke(Action action)
        {
            Dispatcher?.Invoke(action);
        }
    }

Answer 1

我建议看看变换和动画。

使用以下 RenderTransform

<Canvas>
    <Ellipse Height="10" Width="10" Fill="Aqua"
             Canvas.Left="200" Canvas.Top="200"
             RenderTransformOrigin="0.5,0.5">
        <Ellipse.RenderTransform>
            <TransformGroup>
                <TranslateTransform Y="-100"/>
                <RotateTransform x:Name="rotateTransform"/>
            </TransformGroup>
        </Ellipse.RenderTransform>
    </Ellipse>
</Canvas>

你可以像这样设置旋转动画：

var rotateAnimation = new DoubleAnimation(0, 360, TimeSpan.FromSeconds(10));

rotateTransform.BeginAnimation(RotateTransform.AngleProperty, rotateAnimation);