富文本编辑器(MVP)
2.1 计算文字包围盒
首先, 我们要找到一种方法, 来确定任意一段文字的包围盒. 为什么要确定包围盒呢?...因为:
当我们的鼠标hover在文字上方的时候, 需要产生相应的样式变化. 在DOM中, 这个功能是浏览器帮我们实现的....让我们修改文字内容再试一次:
这次两个矩形基本重合了. 所以, actualBoundingBoxDescent中的actual的意思就很明显了: 实际渲染出的字符距离baseLine的最大距离....然后, 我们来实现这个算法:
然后, 我们在CanvasTextEditorText的构造函数中调用这个算法, 用来:
1. 获取到分割后的lines
2. 计算出多行文字的真实高度
3....在render中渲染出每一行
然后看一下最终效果:
文字折了两次, 变成了三行, 很棒!
(未完待续)