时间戳

首页 > 解决方案 > 在画布上跟踪 WPF 元素

wpf - 在画布上跟踪 WPF 元素

问题描述

我正在探索 WPF 动画和缓动功能。我在画布上有一个元素，当我单击它时它会被激活。单击元素时变换的 X 和 Y 位置。

<Window x:Class="WpfAnimationExample.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:WpfAnimationExample"
    mc:Ignorable="d"
    Title="MainWindow" Height="250" Width="300">
<Window.Resources>
    <Style x:Key="EllipseEasing" TargetType="Ellipse">
        <Setter Property="Width" Value="20"/>
        <Setter Property="Height" Value="20"/>
        <Setter Property="Fill" Value="Black"/>
        <Setter Property="RenderTransform">
            <Setter.Value>
                <TranslateTransform X="0" Y="0"/>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <EventTrigger RoutedEvent="MouseDown">
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation From="0" To="260" Duration="0:0:5"
                                         Storyboard.TargetProperty="RenderTransform.(TranslateTransform.X)"/>
                        <DoubleAnimation From="0" To="130" Duration="0:0:5"
                                         Storyboard.TargetProperty="RenderTransform.(TranslateTransform.Y)">
                            <DoubleAnimation.EasingFunction>
                                <BackEase EasingMode="EaseInOut"/>
                            </DoubleAnimation.EasingFunction>
                        </DoubleAnimation>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Style.Triggers>
    </Style>
</Window.Resources>

<Canvas Name="Canvas">
    <Ellipse Name="MainEllipse" Style="{StaticResource EllipseEasing}" Canvas.Top="30" MouseDown="Ellipse_MouseDown" />
</Canvas>
这一切都有效。

我试图以图形方式查看元素运动的轨迹。我希望每 100 毫秒在任何地方绘制一个元素的克隆，但我不知道如何仅在一个瞬间抓住画布中元素的当前位置。

当我单击元素时，我添加了一个并行处理程序，但这似乎不起作用......

private void Ellipse_MouseDown(object sender, MouseButtonEventArgs e)
    {
        Dispatcher.BeginInvoke(
            new ThreadStart((async () =>
        {
            for (int t = 0; t < 5; t++)
            {

                try
                {
                    var x = Canvas.GetLeft(MainEllipse);
                    var y = Canvas.GetTop(MainEllipse);

                    var rx = ((TranslateTransform)MainEllipse.RenderTransform).X;
                    var ry = ((TranslateTransform)MainEllipse.RenderTransform).Y;
                    Ellipse newControl = new Ellipse { Height = MainEllipse.Height, Width = MainEllipse.Width, Fill = Brushes.Blue };
                    Canvas.SetLeft(newControl, rx);
                    Canvas.SetTop(newControl, ry);
                    Canvas.Children.Add(newControl);
                }
                catch (Exception exception)
                {
                    Console.WriteLine(exception);
                    throw;
                }
                await Task.Delay(100);
            }

        })));

    }

建议？TIA

标签： wpfanimation

解决方案

如果您想获得“当前”值，您应该访问实际正在动画的属性，例如：

((TranslateTransform)newControl.RenderTransform).X

...假设您X为RenderTransform.

推荐阅读