WPF 沿路径绘制箭头答案

【问题标题】：WPF Drawing arrow heads along a pathWPF 沿路径绘制箭头
【发布时间】：2011-04-09 17:30:03
【问题描述】：

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

我试过用刷子，但它不起作用，因为我需要箭头来沿着路径定位它们自己......

【问题讨论】：

标签： c# .net wpf path drawing

【解决方案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，即后续箭头的 BeginTimes 之间的时间。您必须添加的箭头数为 Duration/BeginTimeGap，或简化代码：

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

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

【讨论】：

我看过了，但我认为这与我所追求的不符。
你确定？尝试运行我添加的 xaml...如果这不是您想要的，可以尝试在您的问题中澄清吗？
好的，我很感兴趣 ;) 好的，如何修改这让一个箭头沿着间隔 40 像素的线移动......所以它就像一个连续的箭头流？
如果您有一个不会改变的静态路径，简单的解决方案是添加多个箭头，但在每个动画上设置不同的 BeginTime。如果路径是可变的，您必须创建一个接受 PathGeometry 的自定义控件，并以编程方式在基于 PathGeometry 的代码中创建像 Arrow1 这样的箭头。在代码中，您还可以计算箭头的 BeginTimes 之间的理想间隔
我如何计算出我需要多少支箭……否则我会看到自己陷入循环并创造出无数支箭……