从零基于 Canvas 实现一个文本渲染器

一、前因后果

1.1 目的

起因是女朋友想做小红薯的账号。她每天会先把小故事写好复制到手机上，然后按照一定的图片规格一张张裁剪，最后发布到平台上。

接着我就在想，有没有什么高效的文本转成图片并且能够自动分页的方案呢？查了很久都没找到合适的方案，最后还是决定自己写一个转换工具。

1.2 需求

总结了一下我的场景，发现需求如下：

根据输入文本，通过 Canvas 渲染

展示全部分页图片的内容，可以批量下载

1.3 思路

基于需求，最后决定采用 Canvas 的绘制方案。思路如下：

1.4 难点

做的时候发现几个核心的问题难点，分别是换行、分页的问题。

I. 换行问题

在 canvas 中进行文本绘制不同于 HTML 标签，文本是不能自动换行的。所以这个需要自己去计算什么时候换行，在哪个字符段该换行。

II. 分页问题

当内容超出当前页了，我们希望能够自动进行分页，这个就需要去计算行高和页面内容区高度。

二、设计方案

下面介绍一下 Canvas 文本渲染器的设计方案。主要会围绕着文本计算、文本绘制、导出图片来讲解。

2.1 如何计算文本

计算文本主要做的事情就是，根据用户输入的文本和想要生成的图片、字体参数，来计算需要分多少页，每一页具体要展示多少行，每一行要展示多少内容。

I. 分词

要实现换行，就要知道一句话中从哪个分词开始是超出了当前行的最大宽度。这个分词可能是某个中文字符、某个英文单词、某串数字、某个其他字符等。

这里我们只讨论简单的中英文数字的场景

所以要做的第一步，就是将输入的文本拆解成一个个分词，然后去筛选掉空的字符。

核心代码如下：

II. 分行

现在已经将文本拆分成了足够细的分词。接下来要做的就是将每个分词不断地塞入每一行中。

你可以把每一行理解成一个固定宽度的容器，一但某个分词塞不进了，就得创建一个新的容器再把这个分词塞进去。

所这个遍历的过程，需要知道行的最大宽度以及当前分词的真实宽度。最大宽度的计算规则，根据用户设置的页面宽度减去左右边距的宽度，就是内容区的最大行宽度。

代码如下：

分词的真实宽度则是用 canvas 中的 measureText 来测量字符串的宽度。

接下来就是一个累加的过程。把分词加入当前行，判断是否超出最大宽度，如果超出就新起一行。

最后遍历完后就会得出所有的分行内容。

上面是分行大致的思路，但在实际的代码实现上，会随着分词类型、换行需求的增加变得更加复杂。例如：

2. 
   
3. 用户想自定义空行逻辑：匹配到句号自动换行并且空一行。