PathGeometry:路径几何对象,ArcSegment类 :表示两点之间的一条椭圆弧,Size代表圆弧的X,Y轴半径,例子中Size="55,20"表示X半径为55,Y轴半径为20的椭圆。SweepDirection获取或设置一个值,该值指定是以 Clockwise[指定按顺时针(正角)方向绘制圆弧。] 方向还是以 Counterclockwise [指定按逆时针(负角)方向绘制圆弧。]方向绘制弧,使用 PathGeometry 创建形状,RepeatBehavior="Forever":设置RepeatBehavior为永久重复,DrawImage是GDI+的Graphics类显示图像的核心方法,Geometry对象并不能作为图像独立呈现出来,因此需要呈现方式:这里是在GeometryDrawing中呈现可以作为GeometryDrawing.Geometry的参数呈现为Drawing对象,获取或设置用于绘制此 GeometryDrawing 的 Pen,Pen:用于绘制此 GeometryDrawing 的笔。 例子效果就是图标会沿着所你作出的图,根据路线沿着路线的路径跑。
<Window.Resources>
<PathGeometry x:Key="path">
<PathFigure IsClosed="True">
<ArcSegment Point="2,800" Size="15,10" SweepDirection="Clockwise"/>
<ArcSegment Point="500,400" Size="5,5"/>
<ArcSegment Point="400,200" Size="2,5"/>
<ArcSegment Point="100,100" Size="9,10"/>
<ArcSegment Point="100,100" Size="1,5"/>
</PathFigure>
</PathGeometry>
</Window.Resources>
<Window.Triggers>
<EventTrigger RoutedEvent="Window.Loaded">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingPath Storyboard.TargetName="image"
Storyboard.TargetProperty="(Canvas.Left)"
PathGeometry="{StaticResource path}"
Duration="0:0:0.1" RepeatBehavior="Forever" Source="X"/>
<DoubleAnimationUsingPath Storyboard.TargetName="image"
Storyboard.TargetProperty="(Canvas.Top)"
PathGeometry="{StaticResource path}"
Duration="0:0:0.1" RepeatBehavior="Forever" Source="Y"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Window.Triggers>
<Canvas>
<Path Stroke="Purple" StrokeThickness="1" Data="{StaticResource path}" Canvas.Top="10" Canvas.Left="20"/>
<Image Name="image" RenderTransformOrigin="-1.042,0.875">
<Image.Source>
<DrawingImage>
<DrawingImage.Drawing>
<GeometryDrawing Brush="Red">
<GeometryDrawing.Geometry>
<GeometryGroup>
<EllipseGeometry Center="10,10" RadiusX="9" RadiusY="4"/>
<EllipseGeometry Center="10,10" RadiusX="4" RadiusY="9"/>
<EllipseGeometry Center="10,10" RadiusX="5" RadiusY="5"/>
</GeometryGroup>
</GeometryDrawing.Geometry>
<GeometryDrawing.Pen>
<Pen Thickness="5" Brush="Red"/>
</GeometryDrawing.Pen>
</GeometryDrawing>
</DrawingImage.Drawing>
</DrawingImage>
</Image.Source>
</Image>
</Canvas>原图:效果图: