2010-09-08 90 views
4

只是想知道如何去沿着路径绘制箭头。路径将改变方向并经历几个不同的点。箭头设计用于向用户显示他们需要沿着路径行进的方向。WPF绘制箭头沿路径

我试图用刷子刷,但因为我需要的箭头头它们导向异体沿着路径没有工作......

回答

5

Path Animations OverviewMatrixAnimationUsingPath

它可以用于沿着PathGeometry移动控件,并且如果您设置了DoesRotateWithTangent,控件也将沿着路径的方向旋转。

EDIT1:

<Page.Resources> 
    <PathGeometry x:Key="Path" x:Shared="False" Figures="M 10,100 C 35,0 135,0 160,100 180,190 285,200 310,100"/> 
</Page.Resources> 
<Canvas Width="400" Height="400"> 
    <Path Data="{StaticResource Path}" Stroke="Blue" StrokeThickness="1"/> 
    <Path 
     x:Name="Arrow1" 
     Stretch="Fill" 
     Width="16" Height="16" StrokeLineJoin="Miter" 
     Data="M 0 -5 L 10 -5 M 5 0 L 10 -5 L 5 -10" 
     Stroke="Black" StrokeThickness="3"> 
     <Path.RenderTransform> 
      <TransformGroup> 
       <TranslateTransform X="-8" Y="-8"/> 
       <MatrixTransform> 
        <MatrixTransform.Matrix> 
         <Matrix/> 
        </MatrixTransform.Matrix> 
       </MatrixTransform> 
      </TransformGroup> 
     </Path.RenderTransform> 
     <Path.Triggers> 
      <EventTrigger RoutedEvent="Path.Loaded"> 
       <BeginStoryboard> 
        <Storyboard> 
         <MatrixAnimationUsingPath 
          Storyboard.TargetName="Arrow1" 
          Storyboard.TargetProperty="RenderTransform.Children[1].Matrix"         
          DoesRotateWithTangent="True" 
          Duration="0:0:5" 
          BeginTime="0:0:0" 
          RepeatBehavior="Forever" PathGeometry="{StaticResource Path}" >        
         </MatrixAnimationUsingPath> 
        </Storyboard> 
       </BeginStoryboard> 
      </EventTrigger> 
     </Path.Triggers> 
    </Path> 
</Canvas> 

EDIT2:计算有多少箭需要

我假设你正在创建一个自定义的控制和编程方式添加箭头? 如果是这样,我认为最简单的方法是为单个循环和BeginTimeGap指定持续时间,后续箭头的BeginTime之间的时间。你必须添加箭头数量将持续时间/ BeginTimeGap,或在简化代码:

while (BeginTime < Duration) 
{ 
    //add arrow with BeginTime and Duration; 
    BeginTime += BeginTimeGap; 
} 

获取箭头之间的正确的速度和间隔将回落到调整这两个值。

+0

我已经看了一下,我不认为这是我所追求的内容。 – 2010-09-08 15:24:03

+0

你确定?尝试运行我添加的xaml ...如果这不是你想要的,可以尝试澄清你的问题? – Bubblewrap 2010-09-08 15:55:57

+0

好吧,我很感兴趣;)好吧,如何修改这个图标,让一个箭头沿着40px的间隔移动......所以它就像一个连续的箭头一样的流? – 2010-09-08 16:11:30