贝塞尔曲线，以及用鼠标跟贝塞尔曲线互动

贝塞尔曲线，以及用鼠标和贝塞尔曲线互动

(C) Conmajia 2013

理论难度：★★★☆☆

实践难度：★☆☆☆☆

贝塞尔曲线

贝塞尔曲线（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：

1. 由P0至P1的连续点Q0，描述一条线性贝塞尔曲线。
2. 由P1至P2的连续点Q1，描述一条线性贝塞尔曲线。
3. 由Q0至Q1的连续点B（t），描述一条二次贝塞尔曲线。

二次曲线看起来就是这样的：

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

三次曲线

为建构高阶曲线，便需要相应更多的中介点。对于三次曲线，可由线性贝塞尔曲线描述的中介点Q0、Q1、Q2，和由二次曲线描述的点R0、R1所建构。

P0、P1、P2、P3四个点在平面或在三维空间中定义了三次方贝塞尔曲线。曲线起始于P0走向P1，并从P2的方向来到P3。一般不会经过P1或P2；这两个点只是在那里提供方向资讯。P0和P1之间的间距，决定了曲线在转而趋进P3之前，走向P2方向的“长度有多长”。

曲线的参数形式为：

看起来就是这样的：

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

高阶曲线

更高阶的贝塞尔曲线，可以用以下公式表示：

用表示由点P0、P1、…、Pn所决定的贝塞尔曲线。则有：

更多的关于贝塞尔曲线的内容，你可以去查阅各种数学书。加油，求知的骚年。

应用

在几乎所有的高级图像软件中，均使用到了三次贝塞尔曲线来实现“平滑曲线”绘制功能。例如Photoshop中的“钢笔”，CoralDraw中的“贝塞尔工具”，Fireworks中的“画笔”。

在编程中实现计算机绘图

要“画”出贝塞尔曲线，一般需要进行较多的计算，然后绘制出来，类似这样：

绘制的代码可以在各类计算机图形学书籍中找到。

GDI+

幸运的是，GDI+已经封装好了贝塞尔曲线的绘制代码，如果你想画出贝塞尔曲线，只用调用Graphics.DrawBezier方法：

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

与鼠标的交互

怎么实现Photoshop里那样可以调整的贝塞尔曲线呢？两种方法：

输入新参数生成曲线用鼠标交互调整曲线

很显然第二种看起来会拉风很多，那么就来试试看。

你想要获得是这样的效果：

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

所以需要几个需要解决的：

表示贝塞尔曲线的锚点和控制点绘制曲线和控制点/控制柄鼠标交互

看起来不是很难的样子，那么就来化整为零，各个击破吧。

锚点

对于三次贝塞尔曲线而言，有两个锚点：起始点和结束点。每个锚点有两个坐标：本身坐标和控制点坐标。于是，可以用这样的类来描述：

三次贝塞尔曲线

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

画出来

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

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

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

鼠标交互

和鼠标实际上是这样交互的：

按下鼠标，如果落点在某个控制点上，就表示选中了该点，否则落空移动鼠标，如果选中了某个控制点，则调整控制点坐标至新坐标，否则忽略放开鼠标，取消任何选择

看起来只需要处理MouseDown，MouseMove和MouseUp这三个事件就够了，很容易嘛。

先弄一个全局标记：

然后处理鼠标事件：

MouseDown：

MouseMove：

MouseUp：

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

更高效的刷新应该只处理脏区。

效果

最后看起来就像这样。

就这么简单。

扩展和优化

要实现Photoshop那种曲线效果，需要多个锚点连接起来，用和本文类似的方法来画。上面的方法在效率上也还有可以提高的地方。

怎么办？

自己看着办。

（完）

(C) Conmajia 2013

查看更多 下一篇