富文本编辑器(MVP)
2.5 观察一下幻灯片中的文本框
我们发现:
一个文本框中有若干行文字
一行文字中每个字符的大小, 样式都可能不一样 (废话)
但是, 上一篇文章中, 我们设置样式, 是以行为对象的...任意一个单独的字符, 都可以用鼠标选中 (废话)
但是, 上一篇文章中, 我们计算文字包围盒, 是以行为整体计算的
一行文字如果过长, 可以自动折行(默认行为, 可以修改)
当我调整文本框的宽度,...(Editor), 一个编辑器中可能有多个段落(Paragraph), 一个段落中可能有多行(SoftLine), 一行中可能有多个字符(Char).
2.8 自顶向下实现
接下来, 我们按照自顶向下的方式...现在, 我们不得不放弃之前的偷懒方式, 将两者分别记录:
将fillText(text, x, y)中的y记作top
将包围盒顶部坐标记作boundingBoxTop
修改src/core/CanvasTextEditorChar.ts...:
看一下效果:
2.10 再议textBaseLine
这次行内文字纵向对齐的问题解决了, 可是新的问题来了: 为什么所有的文字整体上移了?