贝塞尔曲线(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那种曲线效果,需要多个锚点连接起来。上面的方法在效率上也还有可以提高的地方。