如何通过单击按钮使用路径几何移动对象？

Question

我尝试使用 WPF 路径几何体在曲线路径中移动我的图像。但是，当我单击 'Start' 按钮时，canvas 本身在路径中移动，而不是图像。那么我将如何通过单击 'Start' 按钮来移动图像？下面是已经完成的代码。

这是我的 xaml 代码：

     <Window x:Class="WpfAppPoint4.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:WpfAppPoint4"
    mc:Ignorable="d"
    Title="MainWindow" Height="350" Width="525">
<Window.Resources>
   <Storyboard x:Key="Storyboard1">
        <MatrixAnimationUsingPath 
            Storyboard.TargetProperty="RenderTransform.(MatrixTransform.Matrix)"
                Duration="0:0:5" DoesRotateWithTangent="True">
            <MatrixAnimationUsingPath.PathGeometry>
                <PathGeometry Figures="M0,0 L50,0 A100,100 0 0 1 150,100
                                           A50,50 0 1 1 100,50 L200,50"/>
            </MatrixAnimationUsingPath.PathGeometry>
        </MatrixAnimationUsingPath>
    </Storyboard>

</Window.Resources>
<Grid>
   <Canvas Name="MyCanvas" Margin="4,10,-4,-10">
   <Button x:Name="button_Start" Content="Start" HorizontalAlignment="Right" 
   VerticalAlignment="Top" Width="150" Click="Button_Start" 
   Canvas.Right="320" Canvas.Top="553" Height="45" FontFamily="Microsoft 
   Sans Serif" FontSize="20">
            <Button.Triggers>
                <EventTrigger RoutedEvent="Button.Click">
                    <BeginStoryboard Storyboard="{StaticResource 
                     Storyboard1}"/>
                </EventTrigger>
            </Button.Triggers>
        </Button>

      <Image Source="C:\Users\Merlinz\Downloads\Kid-Tap\Kid-Tap\parent.png" 
             x:Name="ParentNode" Width="40" Height="40" Canvas.Top="100" 
             Canvas.Left="5"

RenderTransformOrigin="0.5,0.5">
   <Image.RenderTransform>
        <TransformGroup>
            <MatrixTransform/>
        </TransformGroup>

    </Image.RenderTransform>

        </Image>
    </Grid>       
</Canvas>

Answer 1

为了使动画在 Image 元素上运行，您必须设置 Storyboard.TargetName 属性。

除此之外，当您想在元素的 RenderTransform 属性中设置 MatrixTransform 的动画时，您不能将 MatrixTransform 放在 TransformGroup 中。

因此将您的图像声明更改为：

<Image x:Name="movingImage" ...>
    <Image.RenderTransform>
        <MatrixTransform/>
    </Image.RenderTransform>
</Image>

像这样制作动画（其中属性路径 RenderTransform.Matrix 与您的相同，但更短）：

<MatrixAnimationUsingPath 
    Storyboard.TargetProperty="RenderTransform.Matrix"
    Storyboard.TargetName="movingImage" ...>
    ...
</MatrixAnimationUsingPath>

如何通过单击按钮使用路径几何移动对象？

how to move object using path geometry by clicking a button?

c#

wpf

animation

pathgeometry