从零开始，开发一个|从零开始，开发一个 Web Office 套件（6）（光标 & Click 事件）
《从零开始, 开发一个 Web Office 套件》系列博客目录2. 富文本编辑器(MVP) 2.16 光标 我们先来实现一个闪烁的光标，就像下面这样：
这是一个系列博客，最终目的是要做一个基于 HTML Canvas 的、类似于微软 Office 的 Web Office 套件（包括：文档、表格、幻灯片……等等）。
对应的Github repo 地址: https://github.com/zhaokang555/canvas-text-editor
文章图片
2.16.1 绘制静止的光标
首先，创建文件
src/core/BlinkingCursor.ts:【从零开始，开发一个|从零开始，开发一个 Web Office 套件（6）（光标 & Click 事件）】
文章图片
然后，在
CanvasTextEditor中添加函数createBlinkingCursor，暂时将光标绘制在最后一个字符后面。
文章图片
最后，修改
CanvasTextEditor的构造函数和render函数:
文章图片
效果：
文章图片
2.16.2 让光标闪烁起来
首先我们需要确定光标闪烁的频率。这里，我们暂定为一秒（其中亮半秒，隐藏半秒）。
然后，修改
BlinkingCursor:
文章图片
其中：
duration代表动画一个周期的长度（即波长）；phase代表当前时刻动画所处的相位；
show函数。这里，我们暂时在createBlinkingCursor中调用它：
文章图片
效果：
文章图片
2.17 Click 事件 现在，我们来实现这两个需求：
- 当鼠标点击某一个文字（字符）的左半部分时，需要在它的前面插入光标，并且光标应该匹配其左侧文字样式。
文章图片
- 当鼠标点击某一个文字（字符）的右半部分时，需要在它的前面插入光标，并且光标应该匹配其右侧文字样式。
文章图片
2.17.1 添加点击区域
首先，修改
CanvasTextEditorChar，为其添加两个点击区域：leftClickZonerightClickZone
文章图片
其中，
ClickZone代表一个点击区域，我们稍后实现。ClickZone的构造函数接收这些参数：lefttopwidthheightonClick回调函数ctx
文章图片
其中，
prev是上一个Char的引用，我们稍后实现。然后，当修改Char的位置的时候，要同时修改点击区域的位置：
文章图片
最后，销毁Char的时候要同时销毁点击区域：
文章图片
2.17.2 获取上一个Char
因为点击一个Char的左半边时，光标要匹配上一个Char的样式，所以，我们要在每个Char内添加上一个Char的引用：
文章图片
文章图片
2.17.3 修改
CanvasTextEditor
文章图片
2.17.4 效果
文章图片
（未完待续）
推荐阅读
- petite-vue源码剖析-从静态视图开始
- 微服务从代码到k8s部署应有尽有系列（九、事务精讲）
- 一文概述（从状态复用到Hooks）
- javascript|vue从零搭建一个前中后台权限管理模板
- 中间件|解构云原生，从概念到落地（阿里云、声网、微博、好未来、CNCF 的专家们怎么看（））
- 从零搭建Pytorch模型教程（一）数据读取
- 推荐|推荐 10 本 Go 经典书籍，从入门到进阶（含下载方式）
- 财经|中投民生（巴菲特从打新Snowflake中“豪赚”8亿美元。）
- 从头学习C语言之字符串处理函数
- Perforce|Perforce 使用建议