WPF将点列连接成光滑曲线――贝塞尔曲线

摘自：http://www.th7.cn/Program/WPF/2011-07-02/8645.shtml

　　背景

　　最近在写一个游戏场景编辑器，虽然很水，但是还是遇到了不少问题。连接离散个点列成为光滑曲线就是一个问题。主要是为了通过关键点产生2D的赛道场景。总之马路不可能是直线相连的，当然需要曲线光滑相连。现在我就来解决这个问题。

　　贝塞尔曲线

　　贝塞尔曲线，又称贝兹曲线或贝济埃曲线，一般的矢量图形软件通过它来精确画出曲线，贝兹曲线由线段与节点组成，节点是可拖动的支点，线段像可伸缩的皮筋，我们在绘图工具上看到的钢笔工具就是来做这种矢量曲线的。当然在一些比较成熟的位图软件中也有贝塞尔曲线工具，如PhotoShop等。在Flash4中还没有完整的曲线工具，而在Flash5里面已经提供出贝塞尔曲线工具。

　　这里是百度里面的介绍。直接搬过来了。

　　问题

　　

 

　　如图，这些绿色的点我们希望用光滑的曲线连接它们。

　　看看WPF给我们提供的函数：

　　

 

　　来自MSDN

　　我们发现point3和point4是我们需要的，这两个点我们直接可以从点列中取得，但是point1和point2如何获取呢?控制点到底是个什么东西。当然我试了很多次失败了很多次~~

　　巧妙的解决方案

　　大致思路就是 先算出相邻原始点的中点，在把相邻中点连成的线段平移到对应的原始点，以平移后的中点作为控制点，相邻原始点为起始点画贝塞尔曲线，这样就保证了连接处的光滑。而贝塞尔曲线本身是光滑的，所以就把这些原始点用光滑曲线连起来了。

　　(http://liyiwen.javaeye.com/blog/705489)

　　

 

　　实验结果

　　

 

　　看起来连接的还是比较光滑的。

　　相关代码

Path path;
        public void UpdateRoad()
        {
            MapCanvas.Children.Remove(path);
            if (ScenePoint.roadPoint.Count > 0)