如何从零起步，实现Web Office套件中编辑器的拖动边框和平移功能？

本文共计875个文字，预计阅读时间需要4分钟。

这是一个系列博客，旨在最终制作一个基于HTML Canvas、类似于微软Office的Web Office套件（包括文档、表格、幻灯片等）。通过自由交流：从零开始，开发一个Web Office套件。

这是一个系列博客，最终目的是要做一个基于 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. 重新计算光标的位置。