从零开始，开发一个|从零开始，开发一个 Web Office 套件（5）（Mouse hover over text）
《从零开始, 开发一个 Web Office 套件》系列博客目录2. 富文本编辑器(MVP) 2.15 Mouse hover over text 2.15.1 再议 Bounding box
这是一个系列博客, 最终目的是要做一个基于HTML Canvas 的, 类似于微软 Office 的 Web Office 套件, 包括: 文档, 表格, 幻灯片... 等等.
对应的Github repo 地址: https://github.com/zhaokang555/canvas-text-editor
首先，让我们来回顾一下
CanvasTextEditorChar的包围盒：
文章图片
如上图，
CanvasTextEditorChar的包围盒是由：left, boundingBoxTop, width, height定义的。另外，其top仅指的是textBaseLine的纵坐标，跟包围盒没有直接的关系。我们期望的结果是：当鼠标hover在包围盒上时，产生相应变化。
所以，不能直接让
CanvasTextEditorChar直接继承ResponsiveToMouseHover，因为二者的top含义完全不同。而是要让CanvasTextEditorChar的包围盒继承它。2.15.2 实现
修改
CanvasTextEditorChar：- 让其持有一个
boundingBox对象：- 添加属性：
boundingBox: ResponsiveToMouseHover - 在
constructor中为boundingBox初始化
- 添加属性：
文章图片
- 当修改Char的位置信息时，要同时更新
boundingBox的位置信息
文章图片
- 在
render中调用boundingBox.render()
文章图片
同时，修改
CursorType:
文章图片
添加普通文字对应的鼠标样式：
文章图片
然后修改
CanvasTextEditorParagraph和CanvasTextEditor中对应的destructor:
文章图片
文章图片
2.15.3 效果
为了看得更清楚，我们可以加上一些辅助线。修改
ResponsiveToMouseHover.render():
文章图片
然后再看下效果：
【从零开始，开发一个|从零开始，开发一个 Web Office 套件（5）（Mouse hover over text）】（未完待续）
推荐阅读
- 微服务从代码到k8s部署应有尽有系列（八、各种队列）
- 视觉检测图像分割干货|浅谈BiFPN结构并在mmdetection中从Registry开始逐步实现
- Mysql|Mysql精华总结08——主从复制
- Python会消亡吗（）
- r|r 选取从小到大的数据_R语言（基本数据、高级数据处理）
- 学习|（系列更新完毕）深度学习零基础使用 PyTorch 框架跑 MNIST 数据集的第一天（LeNet 网络的搭建）
- 学习|（系列更新完毕）深度学习零基础使用 PyTorch 框架跑 MNIST 数据集的第二天（加载 MNIST 数据集）
- Python|（系列更新完毕）深度学习零基础使用 PyTorch 框架跑 MNIST 数据集的第三天（训练模型）
- Python|（系列更新完毕）深度学习零基础使用 PyTorch 框架跑 MNIST 数据集的第四天（单例测试）
- Matlab|matlab从无到有系列（三）（数值计算基础）