在动画中画一条线
我有一条不可见的多段线，其中包含画布中的很多点。
<Polyline x:Name="plinePath" Stroke="#00000000" StrokeThickness="3">
<Polyline.Points>
<Point X="0" Y="0" />
<Point X="10" Y="10" />
<Point X="10" Y="20" />
<Point X="20" Y="20" />
...
...
...
</Polyline.Points>
</Polyline>
现在我需要在运行时渲染这条线，就像有人用红色绘制它一样。如果可以的话，我想在故事板中做到这一点。
关于我如何做到这一点有任何提示吗？
I have an invisible Polyline containing a lot of points in a canvas.
<Polyline x:Name="plinePath" Stroke="#00000000" StrokeThickness="3">
<Polyline.Points>
<Point X="0" Y="0" />
<Point X="10" Y="10" />
<Point X="10" Y="20" />
<Point X="20" Y="20" />
...
...
...
</Polyline.Points>
</Polyline>
Now I need to render the line in runtime like someone was drawing it in red. I'd like to do that in a Storyboard if I can.
Any hints on how I could do that?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
如果多段线始终朝着一个大致方向前进，您只需为附加到您的plinePath的剪切矩形设置动画即可平滑地暴露它。
使用其他“绘制”方法时遇到的问题是，各个线段需要沿着其范围的长度单独调整大小。这并非微不足道，但却是可能的。恒定绘制速度与插值 X 和 X 之间存在问题。需要为每个段计算 Y。基本上获取（每个段的）线长度，然后在由线长度确定的时间内将 end-x 和 end-y 线性插值到它们的最终位置。
If the polyline were always heading in one general direction you could just animate a clipping rectangle attached to your plinePath to expose it smoothly.
The problem you have with other methods of "drawing" it is that the individual line segments need to be resized individually along the length of their extent. That is non-trivial, but possible. There are issues over constant speed of drawing vs. interpolating X & Y that need to be calculated for each segment. Basically take the line length (of each segment) then linearly interpolate the end-x and end-y to their final position in a time determined by the line length.
好的，
我最终所做的是创建自己的自定义控件，其中包含画布和折线。我的控件有两个主要公共属性：
PathPoints (
List) ：路径中所有点的列表CurrentPoint (
int) ：显示 PathPoints 中小于或等于该数字的所有点。现在我可以使用带有基于“CurrentPoint”属性的 DoubleAnimation 的 Storyboard 来为我的路径设置动画。
OK,
what I finally did is create my own customcontrol that has a Canvas and a Polyline in it. My control has two main public properties :
PathPoints (
List<Points>) : List of all points in the pathCurrentPoint (
int) : Show all the points in the PathPoints that are less or equal to that number.Now I can use a Storyboard with a DoubleAnimation based on the "CurrentPoint" property to animate my path.