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