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

这是一个系列博客,最终目的是要做一个基于 HTML Canvas 的、类似于微软 Office 的 Web Office 套件(包括:文档、表格、幻灯片……等等)。
博客园:《从零开始, 开发一个 Web Office 套件》系列博客目录
富文本编辑器 Github repo 地址://github.com/zhaokang555/canvas-text-editor
富文本编辑器 在线 Demo://zhaokang555.github.io/canvas-text-editor/

2. 富文本编辑器(MVP)

2.28 Feature:拖动边框,平移编辑器

2.28.1 算法

  1. 新建一个类DragZone, 用来监听鼠标拖动的距离:
    1. 拖动开始时,记录拖动起始位置;
    2. 每一段拖动结束(mousemove触发一次),将拖动的距离记为dx, dy;
    3. 重置拖动起始位置。
  2. 每当鼠标拖动边框一定距离时,就把编辑器的位置平移同样的距离;
  3. 平移编辑器之后,要把编辑器内的子元素同时平移:
    1. 对编辑器内的字符重新排版,计算每个字符的位置相关信息;
    2. 把编辑器的边框移动相同的距离;
    3. 把编辑器的控制点移动相同的距离;
    4. 重新计算光标的位置。

2.28.2 实现

在实现算法的同时,我们做一些重构。对之前的一些类名做一些修改:

  • XXXableZone => XXXZone
  • CanvasTextEditorXXX => XXX

新建一个类DragZone, 用来监听鼠标拖动的距离(记为dx, dy):

每当鼠标拖动边框一定距离时,就把编辑器的位置平移同样的距离:

平移编辑器之后,要把编辑器内的子元素同时平移:

移动控制点:

重新计算光标的位置:

2.28.3 效果

2.28.4 新的问题:拖动事件的z-index

Bug表现:如下图,我加了一些辅助线。当我的鼠标从两个边框重叠处开始拖动,且我拖动了一定距离(记为n),但是编辑器却移动了2n的距离。

原因分析:这是因为一次拖动在两个边框内的DragZone内都触发了,所以编辑器移动的距离就叠加了。

解决办法:给拖动事件添加z-index,确保一次只会触发一个拖动事件。解决之后,方便我们之后实现拖动控制点调整编辑器大小的逻辑。

2.28.5 实现:拖动事件的z-index

实现方式类似之前实现过的:click事件的z-index。两者的区别是:

  • 拖动事件的z-index依赖于mousedown事件的z-index;
  • 一次只能触发一个拖动事件,而不像click事件一次可以触发一组。

2.28.6 最终效果

(未完待续)