贝塞尔曲线

by 野比喵
这段时间感觉很蛋疼。。虽然各种游戏玩的很开心。。还是多少要学习一下呗。。
做了个小东西，贴出来得瑟下。。能力有限，就先这么着了。
别试图找我要任何代码之类的。。我只是个amateur，这种帖子认真你就输了。。
别试图接分。。那是不可能的。。

当你对生活不满意，工作不满意，妹妹不满意。。。
如果不想付出金钱去改变，活该苦逼。
如果不想付出精力去改变，活该苦逼。
如果不想付出生命去改变，活该苦逼。
如果不能忍受别人的鄙视，亲，请给别人一个不鄙视你的理由先。。



其实这篇没什么技术含量，类似Photoshop里的“钢笔”工具。。
（代码里面的招数我经常用，可以在前面的帖子里翻到。。

前半部分是理论，可以在数学书上翻。后半部分是实践，其实很简单。。

正文开始

贝塞尔曲线
贝塞尔曲线（The Bézier Curves），是一种在计算机图形学中相当重要的参数曲线（2D，3D的称为曲面）。贝塞尔曲线于1962年，由法国工程师皮埃尔·贝塞尔（Pierre Bézier）所发表，他运用贝塞尔曲线来为汽车的主体进行设计。

线性曲线
给定点P0、P1，线性贝塞尔曲线只是一条两点之间的直线。这条线由下式给出：

当参数t变化时，其过程如下：

线性贝塞尔曲线函数中的t会经过由P0至P1的B（t）所描述的曲线。例如当t=0.25时，B（t）即一条由点P0至P1路径的四分之一处。就像由0至1的连续t，B（t）描述一条由P0至P1的直线。
二次曲线
二次方贝塞尔曲线的路径由给定点P0、P1、P2的函数B（t）追踪：

为建构二次贝塞尔曲线，可以中介点Q0和Q1作为由0至1的t：
* 由P0至P1的连续点Q0，描述一条线性贝塞尔曲线。
* 由P1至P2的连续点Q1，描述一条线性贝塞尔曲线。
* 由Q0至Q1的连续点B（t），描述一条二次贝塞尔曲线。
二次曲线看起来就是这样的：

三次曲线
为建构高阶曲线，便需要相应更多的中介点。对于三次曲线，可由线性贝塞尔曲线描述的中介点Q0、Q1、Q2，和由二次曲线描述的点R0、R1所建构。
P0、P1、P2、P3四个点在平面或在三维空间中定义了三次方贝塞尔曲线。曲线起始于P0走向P1，并从P2的方向来到P3。一般不会经过P1或P2；这两个点只是在那里提供方向资讯。P0和P1之间的间距，决定了曲线在转而趋进P3之前，走向P2方向的“长度有多长”。
曲线的参数形式为：

看起来就是这样的：

高阶曲线
更高阶的贝塞尔曲线，可以用以下公式表示：
用 表示由点P0、P1、…、Pn所决定的贝塞尔曲线。则有：

更多的关于贝塞尔曲线的内容，你可以去查阅各种数学书。加油，求知的骚年。
应用
在几乎所有的高级图像软件中，均使用到了三次贝塞尔曲线来实现“平滑曲线”绘制功能。例如Photoshop中的“钢笔”，CoralDraw中的“贝塞尔工具”，Fireworks中的“画笔”。

在编程中实现
计算机绘图
要“画”出贝塞尔曲线，一般需要进行较多的计算，然后绘制出来，类似这样：

绘制的代码可以在各类计算机图形学书籍中找到。
GDI+
幸运的是，GDI+已经封装好了贝塞尔曲线的绘制代码，如果你想画出贝塞尔曲线，只用调用 Graphics.DrawBezier 方法：

这是一个三次贝塞尔曲线，其中4个点分别为：起点，起点控制点，终点，终点控制点。绘制出来的效果如下：

与鼠标的交互
怎么实现Photoshop里那样可以调整的贝塞尔曲线呢？两种方法：
* 输入新参数生成曲线
* 用鼠标交互调整曲线
很显然第二种看起来会拉风很多，那么就来试试看。
你想要获得是这样的效果：

这是一条三次贝塞尔曲线，图中应该这样解读：

所以需要几个需要解决的：
* 表示贝塞尔曲线的锚点和控制点
* 绘制曲线和控制点/控制柄
* 鼠标交互
看起来不是很难的样子，那么就来化整为零，各个击破吧。
锚点
对于三次贝塞尔曲线而言，有两个锚点：起始点和结束点。每个锚点有两个坐标：本身坐标和控制点坐标。于是，可以用这样的类来描述：

三次贝塞尔曲线
三次曲线前面已经说过原理了，那么它的结构应该就是这样的：

画出来
为了简单，就用一个最基本的渲染器来画，代码如下：

画出曲线和控制点及其手柄：


画出来的效果就是这样的：

鼠标交互
和鼠标实际上是这样交互的：
* 按下鼠标，如果落点在某个控制点上，就表示选中了该点，否则落空
* 移动鼠标，如果选中了某个控制点，则调整控制点坐标至新坐标，否则忽略
* 放开鼠标，取消任何选择
看起来只需要处理MouseDown，MouseMove和MouseUp这三个事件就够了，很容易嘛。
先弄一个全局标记：

然后处理鼠标事件：
MouseDown：

MouseMove：

MouseUp：

为了简单，刷新就这么弄了：

更高效的刷新应该只处理脏区。
效果
最后看起来就像这样。

就这么简单。

扩展和优化
要实现Photoshop那种曲线效果，需要多个锚点连接起来。上面的方法在效率上也还有可以提高的地方。
怎么办？
自己看着办。
（完）