Canvas 文本排版新思路初探——字体解析

Canvas 文本排版

前言

Canvas 原生的文字排版功能很薄弱,甚至做不到自动换行。相较之下 HTML 的排版功能就很强大了。今天我们就来探索一下 Canvas 排版的新思路。

旧方法

接触 Canvas 排版的开发者应该都看过张鑫旭的《canvas文本绘制自动换行、字间距、竖排等实现》这篇文章吧。其原理使用了 CanvasRenderingContext2D.measureText 这个 API。文本换行循环调用此方法实现,不断测量文本宽度直到抵达最大宽度,截断换行。

相信大家也看出这个方法的问题了,不断循环渲染测量会很耗性能。那有没有不用循环测量的方案,甚至不想用 CanvasRenderingContext2D.measureText 呢。其实有的,下面就是本文的重点了。

新思路

文本排版的问题无非就是文本定位的问题,只需要知道文字宽高与文字之间的距离就能排版。这些信息可以通过解析字体文件得到,这里使用 opentype.js 来解析。

首先科普几个字体基础的概念:

1. Units Per Em

Units Per Em 指字体设计时的网格大小,一般多为 1000 或 1024。这里我们只需要记住这个数字,后续与字号运算用得到。

Canvas 文本排版新思路初探——字体解析

2. Ascender 与 Descender

Ascender 指基线(Baseline)到升部(Ascent)的高度,Descender 指基线到降部(Descent)的高度(为负值)。Canvas 的 textBaseline 默认值为 alphabetic,指的就是字符的基线。

Canvas 文本排版新思路初探——字体解析

3. Advance width

Advance width 指字符宽度,包括设计上的留白。

Canvas 文本排版新思路初探——字体解析

4. Kerning

Kerning 指字母组合的间距调整。这个间距调整是很重要的,用于修正视觉平衡。只要是非等宽字体,都会存在 Kerning。

Canvas 文本排版新思路初探——字体解析

具体实现

这里我使用开源的得意黑字体做演示,使用 opentype.js 解析后的数据如下图:

Canvas 文本排版新思路初探——字体解析

可以看到 unitsPerEm 为 1000, ascender 为 970,descender 为 -230。

下面我们定义一些常规参数:

首先定义测试常量: fontSize = 48,lineHeight = 1.5。

字体比例:fontRatio = fontSize / unitsPerEm = 0.048。

字体高度:fontHeight = (ascender - descender) * fontRatio = 57.6。

升部高度:ascenderHeight = ascender * fontRatio = 46.56。

行间距:lineGap = fontSize * (lineHeight - 1) = 24。

好了,有了这些参数就可以布局了,先来布局一个字符串 Hello World! 试试。

Hello 以单个字符循环,计算出每个字符的 advanceWidth 与前一个字符的 kerning。计算方式请参考 opentype.js 文档,得出结果分别是:

字符 advanceWidth kerning
H 24.624 0
e 21.552 -0.48
l 9.504 -0.48
l 9.504 -0.48
o 22.08 -0.48
9.12 0
W 33.744 0
o 22.08 -1.44
r 14.016 -0.48
l 9.504 -0.48
d 21.888 -0.48
! 15.456 0

字符占位宽度 = advanceWidth + kerning,按顺序排列就得到排版完的文本了,这里给每个字符加上边框方便观察。可以明显看到 Wo 的距离被 kerning 缩短了。

Canvas 文本排版新思路初探——字体解析

遇到长文本换行也变得容易了,判断当前字符占位宽度末尾的横坐标是否大于当前容器,另起一行,效果如下:

Canvas 文本排版新思路初探——字体解析

优化空间

本案例没有做分词行为,可以看到换行时,单词被截断了。这个也容易实现,CJK 字符可以任意断行,其余字符则需要空格等分词符断行。以分词后的整体宽度为一个单位进行排版。这里推荐一个 html2canvas 使用分词库 css-line-break

本次没有考虑复杂情况,如文字方向、中东语言、组合字符等。由于只是初步探索,这些复杂的问题以后再来解决吧。希望给大家提供一种新的排版思路。

项目地址

项目源码:github.com/kooriookami…

在线演示:kooriookami.github.io/canvas-text…

原文链接:https://juejin.cn/post/7348991061702459432 作者:kooriookami

(0)
上一篇 2024年3月22日 下午4:57
下一篇 2024年3月22日 下午5:08

相关推荐

发表评论

登录后才能评论