波仔
🐦 第9章 实战案例：看图学英语智能助手
📄 一句话概括

画板把五个字段排成一张 1200×1600 的图。位置和字号是写死的，不是自动排版。 字数一变就得降字号：十五字用 26 号，一百七十三字要降到 18 号才塞得下。 音标那行得单独指定字体——微软雅黑里没有 IPA 的重音符号，直接画是方框。

📝 本章和前面几章的关系

前面四步都在跟文字打交道，这一步换成图。五块内容摆上去，一块都不能挤到别人。 书里画板节点用的是模板加变量：上传一张底图，把变量填进去。 本沙箱没有模板，用绘图库按坐标真画了一张——摆出来的东西是一样的。 这一节有两个具体的坑：字号、字体。两个都是「不报错但难看」那一类。

一、五块各占一块

1200 宽、1600 高的画布，从上往下五块：标题带、单词、音标、词性、释义、例句。

元素 y 坐标 字号
标题带 1400 ~ 1600 44
单词 1250 104
音标 1090 34
词性 1000 30
释义 830 38
例句 620 26

坐标是写死的，不是算出来的。为什么能写死？ 因为这块卡片的版式是固定的——永远是这五块，永远不会多出第六块。 从单词的 1250 到例句的 620，五块占了 630 像素。剩下的九百多像素是留白。 留白不是浪费。卡片留白少了，一眼看过去全是字，读的人会累。手机屏幕小，留白反而更重要。

二、字号要有层级

最大的是单词，104 号；最小的是例句，26 号。差了四倍。 层级的作用是让眼睛知道先看哪儿。五个元素一样大，读的人不知道从哪下手。 一个实用的比例：主元素、次元素、辅助元素大约是 4:1.5:1。 这里 104 : 38 : 26 差不多就是 4 : 1.5 : 1。

中文和英文混排还要再调一档：同样字号，中文看着比英文大。 所以释义 38 号，比音标的 34 号只大一点——视觉上才平衡。

三、长例句就得降字号

例句区的高度是固定的。字多了排不下，只有两个办法：降字号、或者截断。 演示里按「每字宽约字号乘 0.8、行高约字号乘 1.45」算了一遍：

例句长度 字号 行数
15 字 26 1
42 字 26 1
97 字 22 2
173 字 18 3

一百七十三字那条降到 18 号、排三行、占 78 像素，才勉强塞进去。 18 号在 1200 宽的图上，手机上已经顶到下限了。再长就别降了，改截断或者换卡片尺寸。 降字号是有底的。 一直降下去，图是塞下了，没人看得清。

四、音标那行要单独指定字体

这是本节最容易翻的车。微软雅黑里没有 IPA 的重音符号 ˈ，也不全有 æ、ʌ。 拿雅黑直接画，音标会是方框或者干脆缺字——它不报错，只是画不出来。 演示里给音标那一行单独指定了 DejaVu Sans，才画对。

真机上一样：画板节点的模板字体如果是默认那几款，音标一定出问题。上线前一定要拿带音标的图跑一次。 同类问题还有中文：模板字体里没有中文字形，中文全是方框。这类坑统称「缺字形」。

五、真机上这一步长什么样

画板节点要传三样：一张底图（背景）、一组变量（五个字段）、一份坐标映射（每个变量放在哪）。 底图决定版式，变量决定内容。改版式只换底图，不用动工作流。 这是它比「代码画图」好的地方。 输出是一个图片地址，不是图片本身。 下游拿地址去显示，和第 9.1 节说的「传地址不传图片」是同一条规矩。

六、动手 Demo：画板：卡片是画出来的，不是排出来的

真画一张 1200×1600 的卡片，五个元素按坐标摆上去，文件落在临时目录里。 再算一遍长例句要降多少号才塞得下。

def draw(card, path, fs=(104, 34, 30, 38, 26)):
    ax.text(600, 1250, card[u'word'], fontsize=fs[0], ha=u'center')
    ax.text(600, 1090, card[u'phonetic'], fontsize=fs[1],
            family=u'DejaVu Sans')     # 雅黑没有 IPA 符号
    ax.text(600, 620, card[u'example'], fontsize=fs[4], ha=u'center')
    fig.savefig(path, dpi=200)          # 6x8 英寸 x 200dpi = 1200x1600

def fit(text, width=880, height=80, lo=12, hi=26):   # 能塞下的最大字号

实跑输出：

--------------------------------------------------------------------
画板：卡片是画出来的，不是排出来的
--------------------------------------------------------------------


  ① 真画一张 1200×1600 的卡片
  --------------------------------------------------------------------
  落盘：card_01.png
  1200 × 1600 像素，83039 字节，画一次 154 毫秒。

  ② 五个元素各占一块，位置是写死的
  --------------------------------------------------------------------

| 元素 | y 坐标 | 字号 | 为什么这么放 |
|---|---:|---:|---|
| 标题带 | 1400 ~ 1600 | 44 | 蓝底白字，整幅宽 |
| 单词 | 1250 | 104 | 整张卡上最大的字 |
| 音标 | 1090 | 34 | 小一档，字体还得另指定 |
| 词性 | 1000 | 30 | 小字，跟在音标下面 |
| 释义 | 830 | 38 | 中文字号比英文小一档才好看 |
| 例句 | 620 | 26 | 最下面，留给长句子 |

  从单词的 1250 到例句的 620，五块文字占了 630 像素。剩下的空白不是浪费——卡片留白少了，读起来累。
  音标那一行单独指定了 DejaVu Sans：微软雅黑里没有 IPA 的重音符号，直接用会画成方框。
  这是画板上最容易翻的一个车。

  ③ 例句太长，就得降字号
  --------------------------------------------------------------------

| 例句 | 长度 | 字号 | 几行 | 占多高 | 结论 |
|---|---:|---:|---:|---:|---|
| 短句 | 15 字 | 26 | 1 行 | 38 | 原字号 |
| 中等 | 42 字 | 26 | 1 行 | 38 | 原字号 |
| 很长 | 97 字 | 22 | 2 行 | 64 | 降到 22 |
| 太长 | 173 字 | 18 | 3 行 | 78 | 降到 18 |

  最长那条要降到 18 号、排 3 行、占 78 像素，才塞得进这句的框。
  ! 字号不是越小越好：18 号在 1200 宽的图上，手机上看已经顶到下限了。

①第一段报三个数：1200×1600 像素、83039 字节、画一次 148 毫秒。 ②第二张表六行，每块元素的 y 坐标和字号。坐标是写死的，不是算出来的。 ③表格后面那句讲留白：五块占 630 像素，剩下的九百多是空白，空白不能省。 ④音标那行的备注是本节的车：雅黑没有 IPA 的重音符号，得单独指定字体。 ⑤第三张表四行：26、26、22、18。一百七十三字要降到 18 号排三行才塞得下。

30 秒实验

  1. 把你做的卡片量一下：主元素和例句的字号差几倍。不到三倍的，读的人找不到重点。
  2. 拿一句话最长的例句跑一次，看字号降到多少。低于 18 号的，改截断别硬塞。
  3. 把音标那一行换成默认中文字体画一次，看它是不是变成方框。这个坑上线前必踩一次。

常见误区

  1. 「字号越小越保险。」一直降下去图是塞下了，没人看得清。18 号基本是下限。
  2. 「留白是浪费。」留白少了一眼全是字，手机屏上尤其累。五块占一半就够。
  3. 「字体用默认的就行。」默认字体缺 IPA 符号，音标会变方框，而且不报错。
自测三问（点开对答案） 1. 为什么坐标可以写死？ —— 这块卡片的版式固定：永远五块，不会多出第六块。版式变了才需要重算坐标。 2. 长例句塞不下怎么办？ —— 先降字号，降到 18 号还不行就截断或换卡片尺寸。降字号有底，不能一直降。 3. 音标为什么会画成方框？ —— 字体缺字形。微软雅黑没有 IPA 的重音符号，得单独给那一行指定支持 IPA 的字体。

图有了，最后一步是把它和五个字段一起交出去。这一节讲清楚交什么。

相关笔记