《从零开始, 开发一个 Web Office 套件》系列博客目录

这是一个系列博客, 最终目的是要做一个基于HTML Canvas 的, 类似于微软 Office 的 Web Office 套件, 包括: 文档, 表格, 幻灯片... 等等.

对应的Github repo 地址: https://github.com/zhaokang555/canvas-text-editor

2. 富文本编辑器(MVP)

2.13 `z-index`

2.13.1 新的问题

上一篇博客中, 我们实现了mouse hover on SizeControlPoint的feature. 现在, 问题来了: SizeControlPoint和editor border会有重叠的部分, 当鼠标hover到这个位置时, 应该怎么处理?

我暂时想到了一种解决方案: 引入z-index的概念, 为SizeControlPoint和editor border分配不同的z-index. 当鼠标hover到元素重叠的部分时, 寻找最大的z-index对应的元素.

2.13.2 实现

修改src/core/ResponsiveToMouseHover.ts:

添加属性zIndex
constructor添加形参options, 用来设置zIndex
添加两个静态属性topLayerZIndex和topLayerCursorType, 用来记录最上层图层对应的zIndex值和鼠标样式
修改render函数, 记录topLayerZIndex和topLayerCursorType

同时, 修改src/core/SizeControlPoint.ts, 让它支持设置zIndex:

最后, 修改src/coreCanvasTextEditor.ts:

修改render函数, 在所有的sizeControlPoints render结束之后, 再设置canvas.style.cursor
修改clearCanvas函数, 重置ResponsiveToMouseHover.topLayerZIndex 和 ResponsiveToMouseHover.topLayerCursorType

2.14 Mouse hover on editor border

处理完z-index的问题, 我们就可以实现这个feature了: 当鼠标hover到编辑器边缘的虚线边框上时, 鼠标形状随之变化

2.14.1 重构: Extract component: `CanvasTextEditorBorder`

新建文件src/core/CanvasTextEditorBorder.ts:

其中, Victor是一个开源数学库: http://victorjs.org/, 可以做一些二维向量计算, 可以通过npm安装:

npm install victor --save

npm install @types/victor --save-dev

然后重构文件src/core/CanvasTextEditor.ts:

修改constructor, 抽出initParagraphs和initSizeControlPoints函数
添加initBorder函数, 并在constructor中调用
删除renderBorder函数
修改render函数

2.14.2 实现

实现这个feature之前, 我们需要思考如何拓展border的响应范围(responsive zone). 为什么要这样呢? 因为border是一条很细的线, 要让鼠标精确地hover上去非常困难, 所以要扩大它的responsive zone. 如下图所示, 我们把border横向拓展, 灰色的范围就是拓展后的responsive zone.

然后, 我们动手来实现. 修改src/core/CanvasTextEditorBorder.ts:

继承ResponsiveToMouseHover
添加常量borderResponsiveWidth, 用来表示拓展后的responsive box的宽度
添加常量defaultCanvasTextEditorBorderZIndex, 用来表示border默认的zIndex
在constructor中:
- 计算border的法向量normalVector
- 然后计算responsive zone的四角坐标, 存入points中
- 然后利用四角坐标, 计算responsive zone的left, top, width, height, 传入super()中