← 探索新知
ASTERXOR / 探索新知

藏在字体里的曲线

四个点就能描述一条流畅的线,即使其中两个点根本不在线上。

三次曲线与四点骨架。中间两点引导弯曲,并不需要在线上。
三次曲线与四点骨架。中间两点引导弯曲,并不需要在线上。
探索新知ASTERXOR / LEON LEUNG

一个字母放大到楼房那么高,为什么还能保持平滑?

弯曲的字形往往保存为绘制配方,而不是一堆小方格。配方规定线条如何弯曲。三次贝塞尔曲线是矢量绘图、字体轮廓和插画工具常用的组成部分。它的巧妙之处,在于只用少数几个点,就让设计者控制不同的事情。

控制柄引导曲线,却不必落在曲线上。
THE IDEA

两个端点,两条指令

三次贝塞尔曲线有四个控制点。第一个和最后一个是端点,曲线确实经过它们。中间两个点把路径往特定方向牵引。移动其中一个会改变整段曲线,但曲线通常不经过这个控制柄。因此,在绘图软件里拖动一个点,墨迹却可能在别处发生变化。

本例从(0, 0)出发,到(1, 1)结束,两个控制柄位于(0.2, 1.2)和(0.8, −0.2)。这些是绘图坐标,不是毫米或像素。同一份描述可以先放大,再绘制到显示器上。

三次曲线与四点骨架。中间两点引导弯曲,并不需要在线上。
FIG 01三次曲线与四点骨架。中间两点引导弯曲,并不需要在线上。
THE MODEL

用直线搭出弯曲

找曲线上的一个点,有个很直观的办法。先选择零到一之间的进度值,在连接相邻控制点的三条直线上,都走过相同比例的距离。连接得到的三个新点,再重复两次,最后剩下的那个点就在曲线上。

这叫德卡斯特里奥算法。本例取一半进度时,得到(0.5, 0.5)。让进度遍历整个范围,就描出了曲线。看似复杂的形状来自反复的直线插值,不需要猜测下一个点应该放在哪里。

THE RESULT

控制柄决定如何出发

将四个控制点依次记为P0、P1、P2和P3,起点导数为3(P1 − P0),方向从起点指向第一个控制柄。终点导数为3(P3 − P2),方向从第二个控制柄指向终点。本例两个导数都是(0.6, 3.6),因此曲线在两端沿同一切线方向行进。

导数既包含方向,也包含相对于进度参数的速度。它并不要求真实画笔或动画物体必须按这个速度移动。相等的进度增量通常对应不等的曲线距离。要保持匀速,动画软件可能还需要计算弧长。

进度为0.5时,逐层直线插值汇到(0.5, 0.5)。
FIG 02进度为0.5时,逐层直线插值汇到(0.5, 0.5)。
THE TRADE-OFF

小小移动,影响整段

对比图只把第一个控制柄的高度从0.4改为1.2,再改为2.0。端点不动,路径的上部却被抬高。这让控制柄非常适合塑造轮廓,也解释了为什么调整一处会牵动另一处:它的影响分布在整段曲线上。

要更局部地控制形状,可以拼接多段短曲线。接头看起来平滑,通常需要两侧切线方向对齐。但方向一致不代表导数大小或曲率也一致。标志轮廓和机器运动路径,对平滑程度的要求未必相同。

仅改变第一个控制柄高度,两个端点保持不动。
FIG 03仅改变第一个控制柄高度,两个端点保持不动。
IN PRACTICE

字体不只是一条曲线

字形由多个轮廓、直线和曲线段组成。有些字体格式使用每段一个控制柄的二次贝塞尔曲线,有些使用两个控制柄的三次曲线。这里演示的是三次情形,并不代表所有字体引擎。封闭轮廓还需要填充规则,决定哪些区域算作墨迹。

最终轮廓仍要遇到像素网格。渲染器估计覆盖率、遵循显示约定,也可能调整小字号的形状以提高辨认度。因此,数学上平滑的轮廓并不保证小字一定好看。矢量配方保存几何,渲染阶段决定如何用有限的发光像素表现它。

LOOK AGAIN

读懂线条背后的配方

可以把控制点想成支撑连续路径的小骨架。端点决定起止位置,控制柄决定出发和到达的方式。到处增加控制点不一定更好,过于复杂的轮廓反而难以编辑,也容易长出意外的凸起。

曲线显得别扭时,先检查控制多边形,再考虑加点。看看是否有控制柄朝错方向,或某一段承担了太多转折。可见线条是结果,骨架往往揭示原因。这是理解编辑器的方法,不是宣称某组点能构成理想字形。

留一个想法带走

平滑的字母,可以从非常不平滑的东西开始:四个点,几条直线。