TrueType 与贝塞尔曲线

Photo by Çağdaş Ermiş on Unsplash

TrueType字体中的字符(或字形)轮廓由直线和二次贝塞尔曲线(bézier)片段构成 —— 维基百科。当我们使用 ttf.js 来解析 TTF 字体的时候,可以得到每个文字所包含的轮廓点的信息。这个轮廓点信息由直线和贝塞尔曲线构成。我们可以利用这些轮廓点来生成 SVG 图片。

图中 Q 开头的坐标都是二阶贝塞尔曲线的控制点。通过控制点信息,依据二次贝塞尔曲线公式就可以渲染出轮廓线条。对其进行填充后,就能得到一个实心的字体或是图标。

何为贝塞尔曲线

贝塞尔曲线是由若干个点作为控制点,并由对应公式生成的光滑的曲线。

一阶贝塞尔曲线

贝塞尔曲线公式在一阶的情况下,是一条线段。有两点构成。它是变量 t 的参数方程,t 可以看做是在线段方向上步长与线段总长度的比例。

随着 t 的变化,可以看到点在这条方向上进行移动。

二阶贝塞尔曲线

二阶贝塞尔曲线由三点构成。它本质上是一阶贝塞尔曲线公式的复合形式。给定比例 t,可以同时在两个线段 P0P1 和 P1P2 上确定两个点。两点连线上根据比例 t 可以确定一个动点。随着 t 的变化,动点的轨迹也随之改变,形成二阶贝塞尔曲线。

贝塞尔曲线描述轮廓

二阶贝塞尔曲线也是 TTF 字体中用来描述轮廓线的主要方法。通过给出若三个控制点,就可以规划出一条二阶贝塞尔曲线。TTF 将二阶贝塞尔曲线和直线进行组合,来规划字体的轮廓。

参考链接

深入理解贝塞尔曲线

发表评论

电子邮件地址不会被公开。 必填项已用*标注