从零开始, 开发一个 Web Office 套件 (3): 鼠标事件
这是一个系列博客, 最终目的是要做一个基于HTML Canvas 的, 类似于微软 Office 的 Web Office 套件, 包括: 文档, 表格, 幻灯片... 等等.
对应的Github repo 地址: https://github.com/zhaokang555/canvas-text-editor
书接前文: 从零开始, 开发一个 Web Office 套件 (2): 富文本编辑器
2. 富文本编辑器(MVP)
2.11 鼠标事件
这篇文章, 我们来实现迄今为止我们需要的鼠标事件相关的feature. 我初步整理了一下, 有如下几个:
WHEN
鼠标hover到编辑器边缘的六个控制点(SizeControlPoint)上时,THEN
鼠标形状需要变化
WHEN
鼠标hover到编辑器边缘的虚线边框上时,THEN
鼠标形状需要变化
WHEN
鼠标hover到文字上时,THEN
鼠标形状需要变化(第1篇博文中提到的)WHEN
鼠标点击某一个文字(字符)的左半部分时,THEN
需要在它的前面插入光标AND
光标应该匹配其左侧文字样式
WHEN
鼠标点击某一个文字(字符)的右半部分时,THEN
需要在它的后面插入光标AND
光标应该匹配其左侧文字样式
GIVEN
鼠标hover到文字上,WHEN
鼠标进行拖选时,THEN
需要高亮拖选中的文字
2.12 Mouse hover on SizeControlPoint
之前, 我们渲染控制点的代码是写在src/core/CanvasTextEditor.ts
中的:
如果继续这个类中处理鼠标相关逻辑, 这个类就会变得很臃肿. 所以, 我们需要重构一下代码, 把控制点相关的代码抽离出来.
2.12.1 重构代码
新建文件src/core/SizeControlPoint.ts
:
然后, 我们还需要实现SizeControlPoint
中依赖的两个接口: IBoundingBox
, IRenderable
.
新建src/core/IBoundingBox.ts
:
新建src/core/IRenderable.ts
:
然后, 将CanvasTextEditor
中的renderBorderCircle
方法稍加修改, 迁移到SizeControlPoint
类中:
最后, 修改CanvasTextEditor
类, 删除老代码, 引入SizeControlPoint
:
2.12.2 架构设计
2.12.3 自顶向下实现
首先, 修改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
- 在析构函数中移除监听函数
2.12.4 效果
(未完待续)
从零开始, 开发一个 Web Office 套件 (3): 鼠标事件的更多相关文章
- 《从零开始, 开发一个 Web Office 套件》系列博客目录
这是一个系列博客, 最终目的是要做一个基于HTML Canvas 的, 类似于微软 Office 的 Web Office 套件, 包括: 文档, 表格, 幻灯片... 等等. 对应的Github r ...
- 从零开始, 开发一个 Web Office 套件 (2): 富文本编辑器
书接前文: 从零开始, 开发一个 Web Office 套件 (1): 富文本编辑器 这是一个系列博客, 最终目的是要做一个基于HTML Canvas 的, 类似于微软 Office 的 Web Of ...
- 从零开始, 开发一个 Web Office 套件(4):新的问题—— z-index
<从零开始, 开发一个 Web Office 套件>系列博客目录 这是一个系列博客, 最终目的是要做一个基于HTML Canvas 的, 类似于微软 Office 的 Web Office ...
- 从零开始, 开发一个 Web Office 套件 (1): 富文本编辑器
这是一个系列博客, 最终目的是要做一个基于HTML Canvas 的, 类似于微软 Office 的 Web Office 套件, 包括: 文档, 表格, 幻灯片... 等等. 富文本编辑器 万里长征 ...
- 从零开始,开发一个 Web Office 套件(9):拖动鼠标选中文字 Edge Case
这是一个系列博客,最终目的是要做一个基于 HTML Canvas 的.类似于微软 Office 的 Web Office 套件(包括:文档.表格.幻灯片--等等). 博客园:<从零开始, 开发一 ...
- 从零开始,开发一个 Web Office 套件(5):Mouse hover over text
<从零开始, 开发一个 Web Office 套件>系列博客目录 这是一个系列博客, 最终目的是要做一个基于HTML Canvas 的, 类似于微软 Office 的 Web Office ...
- 从零开始,开发一个 Web Office 套件(6):光标 & Click 事件
<从零开始, 开发一个 Web Office 套件>系列博客目录 这是一个系列博客,最终目的是要做一个基于 HTML Canvas 的.类似于微软 Office 的 Web Office ...
- 从零开始,开发一个 Web Office 套件(15):拖动边框,平移编辑器
这是一个系列博客,最终目的是要做一个基于 HTML Canvas 的.类似于微软 Office 的 Web Office 套件(包括:文档.表格.幻灯片--等等). 博客园:<从零开始, 开发一 ...
- 从零开始,开发一个 Web Office 套件(7):新的问题—— Click 事件的 z-index
这是一个系列博客,最终目的是要做一个基于 HTML Canvas 的.类似于微软 Office 的 Web Office 套件(包括:文档.表格.幻灯片--等等). 博客园:<从零开始, 开发一 ...
随机推荐
- python使用String的Template进行参数动态替换
1.前言: 之前使用string的find(),从指定的param里面查找,是否包含了某个字符,有的话,使用replace进行替换,一个接口的param要替换的参数少的话,使用这种方式,的确可行,如果 ...
- 初识python: 模块定义及调用
一.定义 模块:用来从逻辑上组织python代码(变量.函数.类.逻辑:实现一个功能),本质就是.py结尾的python文件(比如:文件名:test.py,对应的模块名:test) 包:用来从逻辑上组 ...
- Flask + flask_sqlalchemy + jq 完成书籍展示、新增、删除功能
后端代码 from flask import Flask, render_template, request, jsonify from flask_wtf.csrf import CSRFProte ...
- django中的时区问题
在django中设置时区,通过setting文件中的: TIME_ZONE = 'Asia/Shanghai' 开起多时区支持功能:USE_TZ=True 这时在数据库中插入的时间为UTC时间,当调用 ...
- vim - 显示不可见字符(:set list)
默认情况下,vim是不会显示space,tabs,newlines,trailing space,wrapped lines等不可见字符的.我们可以使用以下命令打开list选项,来显示非可见字符: : ...
- Word2010制作收款单
原文链接:https://www.toutiao.com/i6488255406136099342/ 页面设置 选择"页面布局"选项卡,"页面设置"功能组,&q ...
- [未完] Linux 4.4 USB —— spiflash模拟usb大容量存储设备 调试记录 Gadget Mass Stroage
linux 4.4 USB Gadget Mass Stroage 硬件平台: licheepi nano衍生 调试记录 驱动信息 │ This driver is a replacement for ...
- ubuntu安装更换阿里云镜像源
如果使用apt-get安装软件过慢,可以考虑以下步骤 1.备份 sudo cp /etc/apt/sources.list /etc/apt/sources.list.bak 2.编辑 sudo vi ...
- Docker 安装与常用命令
目录 Docker 安装 1)安装 2)启动 3)镜像加速器 Docker 常用命令 1)Docker 进程相关命令 2)Docker 镜像相关命令 docker search:查找镜像仓库中的镜像 ...
- 【源码阅读】VictoriaMetrics中理解vm-backup中设置origin地址的用途
lib/backup/actions/backup.go: // 118 行 partsToCopy := common.PartsDifference(srcParts, dstParts) //要 ...