Question

我努力在wpf中使用形状，我需要以下条件：我有一个图像，并且绘制了一些形状，我希望图像能够沿着该形状的线行走。

我的意思是：

例如具有以下形状：

<Path Stroke="Black" StrokeThickness="5" Fill="Goldenrod">
        <Path.Data>
            <PathGeometry>
                <PathGeometry.Figures>
                    <PathFigure StartPoint="100,50" IsClosed="True">
                        <LineSegment Point="140,60"/>
                        <LineSegment Point="150,100"/>
                        <LineSegment Point="125,120"/>
                        <LineSegment Point="90,110"/>
                        <LineSegment Point="80,80"/>
                    </PathFigure>
                </PathGeometry.Figures>
            </PathGeometry>
        </Path.Data>
    </Path>

这是动态图像：

<UserControl ...
  xmlns:PresentationOptions="http://schemas.microsoft.com/winfx/2006/xaml/presentation/options"  ..>

<UserControl.Resources>
    <PathGeometry x:Key="AnimationPath"
  Figures="M 10,100 C 40,0 300,0 300,300 0,300 285,200 300,300 "
  PresentationOptions:Freeze="True" />
</UserControl.Resources>

<Image   
         Source="/Resources/Myimage.png"
  Width="200"  >
        <Image.RenderTransform>
            <TranslateTransform x:Name="AnimatedTranslateTransform"  />
        </Image.RenderTransform>

        <Image.Triggers>
            <EventTrigger RoutedEvent="Path.Loaded">
                <BeginStoryboard>
                    <Storyboard RepeatBehavior="Forever">

                        <!-- Animates the rectangle horizotally along the path. -->
                        <DoubleAnimationUsingPath
            Storyboard.TargetName="AnimatedTranslateTransform"
            Storyboard.TargetProperty="X"
            PathGeometry="{StaticResource AnimationPath}"
            Source="X" 
            Duration="0:0:5"  
             AutoReverse="True"
                            />

                        <!-- Animates the rectangle vertically along the path. -->
                        <DoubleAnimationUsingPath
            Storyboard.TargetName="AnimatedTranslateTransform"
            Storyboard.TargetProperty="Y"
            PathGeometry="{StaticResource AnimationPath}"
            Source="Y" 
            Duration="0:0:5"  />
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Image.Triggers>
    </Image>

相关链接：link1，link2

我尝试过：

 Figures="M 10,100 C 100,50 140,60 150,100 125,120 90,110 80,80 "

即从100,50-> 140,60点开始，依此类推...

但是它并不完全沿着这条路径

Answer 1

您的草图似乎表明您希望为路径上的红色箭头设置动画，包括旋转到当前路径线段的切线角。

您可以通过使用>>> df.loc['2001-01-01 00:00:00':'2001-01-01 03:00:00'] date date 2001-01-01 00:00:00 2001-01-01 00:00:00 2001-01-01 01:00:00 2001-01-01 01:00:00 2001-01-01 02:00:00 2001-01-01 02:00:00 2001-01-01 03:00:00 2001-01-01 03:00:00对MatrixTransform的Matrix属性进行动画处理来实现此目的。下面的示例使用附加的MatrixAnimationUsingPath来使图像居中。由于Image元素的Source属性中有一个TranslateTransform，因此您也可以使用另一个DrawingImage代替Path。

Image

沿路径对对象进行动画处理

1 个答案: