Silverlight的 - 动画贝塞尔曲线画线？ [英] silverlight - animate Bezier curves line drawing?

问题描述

我建立一个小的Silverlight应用程序。在我的应用程序需要绘制线条，类似于所附的图片中显示的。

I am building a small silverlight application. In my application I need to draw lines, similar to what's shown in the attached image.

我的理解，最好的方式来绘制拱形连接线（绿色的）将与贝塞尔曲线。

I understood that the best way to draw the arched connecting lines (green ones) would be with Bezier curves.

我的问题是，我怎么动画线条的绘制（让他们从开始（X，Y）坐标开始，到目标的）。

My question is, how do I animate the drawing of the lines (getting them to start from a starting (X,Y) coordinate, to the target ones).

感谢您

附图片：

推荐答案

我花了一点时间玩这个，这是可能的。诀窍在于，你不动画的路径。相反，最初夹的路径零尺寸的边界区域然后基本上动画剪辑区域的高度和宽度。最终的效果看起来像路径是从A点动画到B点。

I've spent a bit of time playing with this and it is possible. The trick is that you don't animate the path. Instead, you initially clip the path to a bounding area of zero dimension and then you essentially animate the height and width of the clipping area. The final effect looks like the path is being animated from Point A to Point B.

看看下面的XAML示例：

Take a look at the XAML sample below:

<Canvas x:Name="LayoutRoot" Background="White">
        <Path Stroke="Blue" StrokeThickness="2" StrokeDashArray="10,2" >
            <Path.Data>
                <PathGeometry>
                    <PathGeometry.Figures>
                        <PathFigureCollection>
                            <PathFigure StartPoint="50,50">
                                <PathFigure.Segments>
                                    <PathSegmentCollection>
                                       <BezierSegment
                                           Point1="50,20"
                                           Point2="120,170"
                                           Point3="350,150"
                                       /> 
                                    </PathSegmentCollection>
                                </PathFigure.Segments>
                            </PathFigure>
                        </PathFigureCollection>
                    </PathGeometry.Figures>
                </PathGeometry>
            </Path.Data>
            <Path.Clip>
                <PathGeometry>
                    <PathFigure IsClosed="true">
                        <LineSegment x:Name="seg1" Point="50,50"/>
                        <LineSegment x:Name="seg2" Point="0,0"/>
                        <LineSegment x:Name="seg3" Point="0,0"/>
                        <LineSegment x:Name="seg4" Point="0,0"/>
                    </PathFigure>
                </PathGeometry>
            </Path.Clip>
            <Path.Triggers>
                <EventTrigger RoutedEvent="Path.Loaded">
                    <BeginStoryboard>
                        <Storyboard>
                            <PointAnimation Storyboard.TargetName="seg2" Storyboard.TargetProperty="point" To="350,50" Duration="0:0:2" />
                            <PointAnimation Storyboard.TargetName="seg3" Storyboard.TargetProperty="point" To="350,150" Duration="0:0:2" />
                            <PointAnimation Storyboard.TargetName="seg4" Storyboard.TargetProperty="point" To="50,1500" Duration="0:0:2" />

                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Path.Triggers>
        </Path>
        <Path Fill="Gold" Stroke="Black" StrokeThickness="1">
            <Path.Data>
                <EllipseGeometry Center="50,50" RadiusX="20" RadiusY="20" />
            </Path.Data>
        </Path>
        <Path Fill="Gold" Stroke="Black" StrokeThickness="1">
            <Path.Data>
                <EllipseGeometry Center="350,150" RadiusX="20" RadiusY="20" />
            </Path.Data>
        </Path>
    </Canvas>

这篇关于Silverlight的 - 动画贝塞尔曲线画线？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！