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

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

富文本编辑器 Github repo 地址:https://github.com/zhaokang555/canvas-text-editor

2. 富文本编辑器(MVP)

2.18 Click 事件的 z-index

2.18.1 新的问题:点击空白处

首先,我们先观察一下其他的幻灯片软件:

通过上图可以发现,当我们点击编辑器内空白处时,编辑器会执行以下逻辑:

  1. 找到距离点击位置最近的行
  2. 在此行内找到距离点击位置最近的字符
  3. 在此字符的左侧或者右侧插入光标

为了实现这个feature,我们就要监听编辑器空白处的click事件。与此同时,我们会遇到和hover事件相同的问题: 我们需要找到最上层的元素(Char or 空白),触发它的点击事件。

2.18.2 重构

修改ClickZone,在handle canvas click时不直接触发onClick,而是根据zIndex将onClick记录到topLayerCallbacks中:

然后,在CanvasTextEditor.render()中触发回调函数,之后清空topLayerCallbacks:

同时,修改CanvasTextEditorChar.constructor()的实现,传入zIndex:

这样,ClickZone就支持了z-index.

2.19 Feature: 点击编辑器空白处后,在适当位置插入光标

修改CanvasTextEditor, 添加blankSpace属性, 大小和整个编辑器重叠:

然后,添加handleClickOnTheBlankSpace方法,实现文章开头所描述的算法:

其中,形参mouseXmouseY代表点击位置,我们需要修改ClickZone将其传入:

效果:

2.19.1 Fix bug

不过,细心的读者会发现一个问题:当我们点击最左侧区域,试图在第二行第一个字符前插入光标,结果光标跑到了第一行末尾。

这是因为,我们之前将行首的char的prev属性赋值成了上一行行尾的char。要解决这个bug,只需要将赋值相关代码从Paragraph中挪到SoftLine中:



效果:

2.19.2 Fix: 光标在不同位置粗细不一

细心观察上图的同学会发现一个样式问题:光标在不同位置时,其粗细肉眼可见地不一致。这是因为根据字符位置,计算出来的光标的位置不是整数。我们只需要将其坐标取整就可以了:

效果:

(未完待续)

从零开始,开发一个 Web Office 套件(7):新的问题—— Click 事件的 z-index的更多相关文章

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

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

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

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

  3. 从零开始, 开发一个 Web Office 套件 (3): 鼠标事件

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

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

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

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

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

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

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

  7. 从零开始,开发一个 Web Office 套件(10):捕获键盘事件,输入文字

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

  8. 从零开始,开发一个 Web Office 套件(11):支持中文输入法(or 其它使用输入法的语言)

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

  9. 从零开始,开发一个 Web Office 套件(12):删除文字 & 回车换行

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

随机推荐

  1. 你需要的Grid布局入门教程

    一.Grid布局概述 首先,Grid 布局与 Flex布局 有一定的相似性,都可以指定容器内部多个项目的位置.但是,Grid 布局远比 Flex 布局强大! Flex 布局是轴线布局,只能指定&quo ...

  2. 羽夏看Win系统内核——同步篇

    写在前面   此系列是本人一个字一个字码出来的,包括示例和实验截图.由于系统内核的复杂性,故可能有错误或者不全面的地方,如有错误,欢迎批评指正,本教程将会长期更新. 如有好的建议,欢迎反馈.码字不易, ...

  3. 高性能Kafka

    一.概述 消息队列模式: 点对点: 1:1.就是一个队列只能由一个消费者进行消费,这个消费者消费完毕就把消息进行删除,不会再给别的消费者.只能消费者拉消息. 发布/订阅: 1:多 消息队列主动推送消息 ...

  4. 营销MM让我讲MySQL日志顺序读写及数据文件随机读写原理

    摘要:你知道吗,MySQL在实际工作时候的两种数据读写机制? 本文分享自华为云社区<MySQL日志顺序读写及数据文件随机读写原理>,作者:JavaEdge . MySQL在实际工作时候的两 ...

  5. AT2395 [ARC071C] TrBBnsformBBtion

    基于观察,可以发现以下两条性质: A 可以到 BB,BB 也可以到 A,对 B <-> AA 也是同理的. 可以通过这两个操作交换相邻元素. 对于前者,只需证明 BB 可以到 A 即可,不 ...

  6. Maven多环境配置实战 filter

    目前在开发一个wap项目,主要有开发.测试和最终部署上线几个阶段,每个阶段对配置(数据库.日志)都有不同的设置.以前都是以开发环境为主,在测试和部署上线时由部署工程师负责修改配置并上线.但是公司并非都 ...

  7. 实现反向代理客户端IP透传

    默认情况下,使用反向代理时,后端服务器只能看到访问是从反向代理服务器的IP,无法真正识别到客户端IP.通过配置IP透传实现后端服务器识别到客户端真实IP. 一.Apache后端服务器部署 1.1 安装 ...

  8. Pandas常用操作 - 删除指定行/指定列

    1. 删除指定行 new_df = df.drop(index='行索引') new_df = df.drop('行索引', axis='index') new_df = df.drop('行索引', ...

  9. python官网导航翻译

  10. appium填坑

    首次使用appium web driver,不说搭建环境的麻烦,初次写完一个操作计算器的程序,但是运行一直报错:selenium.common.exceptions.WebDriverExceptio ...