《从零开始, 开发一个 Web Office 套件》系列博客目录 这是一个系列博客, 最终目的是要做一个基于HTML Canvas 的, 类似于微软 Office 的 Web Office 套件, 包括: 文档, 表格, 幻灯片... 等等. 对应的Github repo 地址: https://github.com/zhaokang555/canvas-text-editor
现在,我们来整理一下,迄今为止我们所需要的鼠标相关feature:
WHEN
鼠标hover到编辑器边缘的8个控制点(SizeControlPoint)上时, THEN
鼠标形状需要变化
WHEN
鼠标hover到编辑器边缘的虚线边框上时, THEN
鼠标形状需要变化
WHEN
鼠标hover到文字上时, THEN
鼠标形状需要变化(第1篇博文中提到的)WHEN
鼠标点击某一个文字(字符)的左半部分时, THEN
需要在它的前面插入光标 AND
光标应该匹配其左侧文字样式
WHEN
鼠标点击某一个文字(字符)的右半部分时, THEN
需要在它的后面插入光标 AND
光标应该匹配其左侧文字样式
GIVEN
鼠标hover到文字上, WHEN
鼠标进行拖选时, THEN
需要高亮拖选中的文字
现在, 我们来实现这个feature: 当鼠标hover到编辑器边缘的六个控制点(SizeControlPoint)上时, 鼠标形状随之变化
之前, 我们渲染控制点的代码是写在src/core/CanvasTextEditor.ts
中的:
如果继续这个类中处理鼠标相关逻辑, 这个类就会变得很臃肿. 所以, 我们需要重构一下代码, 把控制点相关的代码抽离出来.
SizeControlPoint
新建文件src/core/SizeControlPoint.ts
:
然后, 我们还需要实现SizeControlPoint
中依赖的两个接口: IBoundingBox
, IRenderable
.
新建src/core/IBoundingBox.ts
:
新建src/core/IRenderable.ts
:
然后, 将CanvasTextEditor
中的renderBorderCircle
方法稍加修改, 迁移到SizeControlPoint
类中:
最后, 修改CanvasTextEditor
类, 删除老代码, 引入SizeControlPoint
:
ResponsiveToMouseHover
首先, 修改src/core/CanvasTextEditor.ts
:
sizeControlPoints
属性, 用来存放所有的控制点renderBorder
中渲染控制点相关的代码, 转移到构造函数中clearCanvas
中重置鼠标形状render
中渲染所有控制点同时, 定义了一个枚举src/core/CursorType.ts
, 用来存放目前所使用到的鼠标样式:
其中每个值的含义可以参考MDN的这个文档: https://developer.mozilla.org/en-US/docs/Web/CSS/cursor
然后, 修改src/core/SizeControlPoint.ts
:
然后, 新建src/core/ResponsiveToMouseHover
:
mouseX
, mouseX
isMouseHovering
(未完待续)
本文系转载,前往查看
如有侵权,请联系 cloudcommunity@tencent.com 删除。
本文系转载,前往查看
如有侵权,请联系 cloudcommunity@tencent.com 删除。