#青训营笔记创作活动#

2023/01/30 Day17
学习内容:纯 JS 实现语雀的划词高亮功能

主要思路:生成一个 canvas 元素,让 canvas 元素与需要划词高亮功能的文本容器元素等宽高,并且重叠在文本容器上,划词的时候获取划词区域的文本节点相对于文本容器的位置信息,然后通过这些位置信息进行高亮背景的渲染。

实现细节:
1. 让 canvas 与文本容器元素重叠
2. 获取划词区域文本节点的位置信息
3. 获取头尾中间的文本节点
4. 处理跨行文本节点的位置信息
5. 划词信息持久化与返显
展开
评论