这是一个系列博客, 最终目的是要做一个基于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): 鼠标事件的更多相关文章

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

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

  2. 从零开始, 开发一个 Web Office 套件 (2): 富文本编辑器

    书接前文: 从零开始, 开发一个 Web Office 套件 (1): 富文本编辑器 这是一个系列博客, 最终目的是要做一个基于HTML Canvas 的, 类似于微软 Office 的 Web Of ...

  3. 从零开始, 开发一个 Web Office 套件(4):新的问题—— z-index

    <从零开始, 开发一个 Web Office 套件>系列博客目录 这是一个系列博客, 最终目的是要做一个基于HTML Canvas 的, 类似于微软 Office 的 Web Office ...

  4. 从零开始, 开发一个 Web Office 套件 (1): 富文本编辑器

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

  5. 从零开始,开发一个 Web Office 套件(9):拖动鼠标选中文字 Edge Case

    这是一个系列博客,最终目的是要做一个基于 HTML Canvas 的.类似于微软 Office 的 Web Office 套件(包括:文档.表格.幻灯片--等等). 博客园:<从零开始, 开发一 ...

  6. 从零开始,开发一个 Web Office 套件(5):Mouse hover over text

    <从零开始, 开发一个 Web Office 套件>系列博客目录 这是一个系列博客, 最终目的是要做一个基于HTML Canvas 的, 类似于微软 Office 的 Web Office ...

  7. 从零开始,开发一个 Web Office 套件(6):光标 & Click 事件

    <从零开始, 开发一个 Web Office 套件>系列博客目录 这是一个系列博客,最终目的是要做一个基于 HTML Canvas 的.类似于微软 Office 的 Web Office ...

  8. 从零开始,开发一个 Web Office 套件(15):拖动边框,平移编辑器

    这是一个系列博客,最终目的是要做一个基于 HTML Canvas 的.类似于微软 Office 的 Web Office 套件(包括:文档.表格.幻灯片--等等). 博客园:<从零开始, 开发一 ...

  9. 从零开始,开发一个 Web Office 套件(7):新的问题—— Click 事件的 z-index

    这是一个系列博客,最终目的是要做一个基于 HTML Canvas 的.类似于微软 Office 的 Web Office 套件(包括:文档.表格.幻灯片--等等). 博客园:<从零开始, 开发一 ...

随机推荐

  1. python使用String的Template进行参数动态替换

    1.前言: 之前使用string的find(),从指定的param里面查找,是否包含了某个字符,有的话,使用replace进行替换,一个接口的param要替换的参数少的话,使用这种方式,的确可行,如果 ...

  2. 初识python: 模块定义及调用

    一.定义 模块:用来从逻辑上组织python代码(变量.函数.类.逻辑:实现一个功能),本质就是.py结尾的python文件(比如:文件名:test.py,对应的模块名:test) 包:用来从逻辑上组 ...

  3. Flask + flask_sqlalchemy + jq 完成书籍展示、新增、删除功能

    后端代码 from flask import Flask, render_template, request, jsonify from flask_wtf.csrf import CSRFProte ...

  4. django中的时区问题

    在django中设置时区,通过setting文件中的: TIME_ZONE = 'Asia/Shanghai' 开起多时区支持功能:USE_TZ=True 这时在数据库中插入的时间为UTC时间,当调用 ...

  5. vim - 显示不可见字符(:set list)

    默认情况下,vim是不会显示space,tabs,newlines,trailing space,wrapped lines等不可见字符的.我们可以使用以下命令打开list选项,来显示非可见字符: : ...

  6. Word2010制作收款单

    原文链接:https://www.toutiao.com/i6488255406136099342/ 页面设置 选择"页面布局"选项卡,"页面设置"功能组,&q ...

  7. [未完] Linux 4.4 USB —— spiflash模拟usb大容量存储设备 调试记录 Gadget Mass Stroage

    linux 4.4 USB Gadget Mass Stroage 硬件平台: licheepi nano衍生 调试记录 驱动信息 │ This driver is a replacement for ...

  8. ubuntu安装更换阿里云镜像源

    如果使用apt-get安装软件过慢,可以考虑以下步骤 1.备份 sudo cp /etc/apt/sources.list /etc/apt/sources.list.bak 2.编辑 sudo vi ...

  9. Docker 安装与常用命令

    目录 Docker 安装 1)安装 2)启动 3)镜像加速器 Docker 常用命令 1)Docker 进程相关命令 2)Docker 镜像相关命令 docker search:查找镜像仓库中的镜像 ...

  10. 【源码阅读】VictoriaMetrics中理解vm-backup中设置origin地址的用途

    lib/backup/actions/backup.go: // 118 行 partsToCopy := common.PartsDifference(srcParts, dstParts) //要 ...