WPF画箭头沿着一条路径箭头、路径、WPF

2023-09-03 13:49:53 作者:可叹~少年已不再年少

只是想知道我怎么会去拉箭头沿着一条路径。该路径将改变方向,经过几个不同点。箭头头被设计为显示他们需要在旅游哪个方向沿路径的用户。

Just wondering how I might go about drawing arrow heads along a path. The path will change direction and go through several different points. The arrow heads are designed to show the user which direction along the path they need to travel.

我试图用刷子刷,但没有奏效,因为我需要的箭头首长定向他们沿着小路自交...

I've tried to use a brush but it didn't work as I need the arrow heads to orientate them selfs along the path...

推荐答案

请参阅路径动画概述和 MatrixAnimationUsingPath

有可用于移动控制沿一个的PathGeometry如果设置DoesRotateWithTangent的控制也将沿所述路径的方向旋转。

It can be used to move a control along a PathGeometry and if you set DoesRotateWithTangent the control will also rotate along the direction of the path.

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:计算你有多少个箭头需要

Calculating how many arrows you need

我假设你正在创建一个自定义的控制和编程方式添加箭头? 如果是这样,我认为最简单的方法是指定用于单回路和BeginTimeGap,随后箭头BeginTimes之间的时间的持续时间。箭你要添加的数量会持续时间/ BeginTimeGap,或简化code:

I assume you're creating a custom control and are programmatically adding arrows? If so i think the simplest way would be to specify a Duration for a single loop and a BeginTimeGap, the time between the BeginTimes of subsequent arrows. The number of arrows you have to add would be Duration/BeginTimeGap, or in simplified code:

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

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

Getting the right speed and spacing between arrows would come down to tweaking these two values.