有时候曲线明明是连续的,但看起来就是不顺滑。比如上图(根据 http://isux.tencent.com/continuous-curve.html 制作),上面的曲线就没有下面的曲线过度得那么平滑。为什么呢?

原来,曲线的连续分为若干种:

  • G0,也称为点连续,两个对象相连或两个对象的位置是连续的。说白了就是没有缝隙,但可能是个尖角。
  • G1,也称为切线连续,两条曲线在某一点相切(法线相同),即一阶导数连续。
    G1 制作简单,成功率高,在某些场合很实用,所以非常常用。
  • G2,也称为曲率连续,两条曲线的曲率是连续的,即二阶导数连续。
    视觉设计、外观要求较高的工业产品,一般要求 G2 连续。
  • G3,曲率变化率连续,即三阶导数连续。
  • G4,曲率变化率的变化率连续,即四阶导数连续。
    G3、G4 更加平滑完美,但要达到这种效果,消耗的资源太多,而视觉效果只比 G2 好一点,所以只在要求非常高的产品上才会应用。

画圆角矩形,很规矩的倒圆角,总会感觉圆弧和直线相连的地方似乎有个小坎儿,不平整不光滑,就是因为如此。普通的倒圆角,做出来的是 G1 连续,曲率的变化太突兀。人眼对这个很敏感,能很明显地感受出来。想要让人眼基本看不出突兀的感觉,需要做到 G2 连续。

怎么画出 G2 连续的曲线?

Adobe Photoshop 和 Illustrator 里只能画贝塞尔曲线,要画出 G2 连续的曲线,需要能画出 B 样条(B-Spline)曲线。关于贝塞尔曲线和 B 样条曲线在数学上的解释请自行 Google,简单的说,贝塞尔曲线是 B 样条曲线的一个特例或者说子集。 B 样条可以进一步推广为非均匀有理样条(NURBS,non uniform rational B-spline)。

专业的三维设计软件似乎一般都可以画这种曲线(汽车设计之类 G2 曲面是基本要求,不像在平面设计中可能还属于高级要求)。
除此之外,Microsoft Expression Design 4(免费)和 CorelDRAW X5 之后的版本,都有画 B 样条曲线的功能。

这里可以看到 CorelDRAW 中的 B 样条工具演示,我觉得这种画法比贝塞尔曲线要直观得多。

单纯用 Adobe 系列软件或许也能手工调整模拟类似效果,不过比较麻烦。可以考虑用上述那些软件绘制之后,再导入到 Adobe 系列软件中进一步处理。

其中 Microsoft Expression Design 4 尤其好,不但是免费的,而且可以把已经画好的曲线转化为 B 样条曲线。画完之后,还可以直接 Ctrl-c、Ctrl-v 复制到 Illustrator 中并保持可编辑性!(微软家偶尔也会出好东西呀……)

上图是我用 Microsoft Expression Design 4 画的,一个是普通圆角矩形,一个是用了 B 样条曲线的,你能看出哪个是哪个吗?