Question

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

我曾尝试使用画笔，但它不起作用，因为我需要箭头来定位他们沿路径自我......

Answer 1

请参阅Path Animations Overview和MatrixAnimationUsingPath

它可用于沿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之间的时间。您必须添加的箭头数为Duration / BeginTimeGap，或者是简化代码：

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

在箭头之间获得正确的速度和间距将归结为调整这两个值。

WPF绘图箭头沿路径前进

1 个答案: