從零開始，開發(fā)一個(gè) Web Office 套件（15）：拖動邊框，平移編輯器
時(shí)間：2023-05-26 03:36:01 | 來源：網(wǎng)站運(yùn)營
時(shí)間：2023-05-26 03:36:01 來源：網(wǎng)站運(yùn)營
從零開始，開發(fā)一個(gè) Web Office 套件（15）：拖動邊框，平移編輯器：
這是一個(gè)系列博客，最終目的是要做一個(gè)基于 HTML Canvas 的、類似于微軟 Office 的 Web Office 套件（包括：文檔、表格、幻燈片……等等）。
博客園：《從零開始, 開發(fā)一個(gè) Web Office 套件》系列博客目錄
富文本編輯器 Github repo 地址：https://github.com/zhaokang555/canvas-text-editor
富文本編輯器 在線 Demo：https://zhaokang555.github.io/canvas-text-editor/
2. 富文本編輯器（MVP）
2.28 Feature：拖動邊框，平移編輯器
2.28.1 算法
- 新建一個(gè)類
DragZone, 用來監(jiān)聽鼠標(biāo)拖動的距離： - 拖動開始時(shí)，記錄拖動起始位置；
- 每一段拖動結(jié)束（mousemove觸發(fā)一次），將拖動的距離記為
dx, dy; - 重置拖動起始位置。
- 每當(dāng)鼠標(biāo)拖動邊框一定距離時(shí)，就把編輯器的位置平移同樣的距離；
- 平移編輯器之后，要把編輯器內(nèi)的子元素同時(shí)平移：
- 對編輯器內(nèi)的字符重新排版，計(jì)算每個(gè)字符的位置相關(guān)信息；
- 把編輯器的邊框移動相同的距離；
- 把編輯器的控制點(diǎn)移動相同的距離；
- 重新計(jì)算光標(biāo)的位置。
2.28.2 實(shí)現(xiàn)
在實(shí)現(xiàn)算法的同時(shí)，我們做一些重構(gòu)。對之前的一些類名做一些修改：
XXXableZone => XXXZoneCanvasTextEditorXXX => XXX
新建一個(gè)類DragZone, 用來監(jiān)聽鼠標(biāo)拖動的距離（記為dx, dy）：
每當(dāng)鼠標(biāo)拖動邊框一定距離時(shí)，就把編輯器的位置平移同樣的距離：
平移編輯器之后，要把編輯器內(nèi)的子元素同時(shí)平移：
移動控制點(diǎn)：
重新計(jì)算光標(biāo)的位置：
2.28.3 效果
2.28.4 新的問題：拖動事件的z-index
Bug表現(xiàn)：如下圖，我加了一些輔助線。當(dāng)我的鼠標(biāo)從兩個(gè)邊框重疊處開始拖動，且我拖動了一定距離（記為
n），但是編輯器卻移動了
2n的距離。
原因分析：這是因?yàn)橐淮瓮蟿釉趦蓚€(gè)邊框內(nèi)的DragZone內(nèi)都觸發(fā)了，所以編輯器移動的距離就疊加了。
解決辦法：給拖動事件添加z-index，確保一次只會觸發(fā)一個(gè)拖動事件。解決之后，方便我們之后實(shí)現(xiàn)拖動控制點(diǎn)調(diào)整編輯器大小的邏輯。
2.28.5 實(shí)現(xiàn)：拖動事件的z-index
實(shí)現(xiàn)方式類似之前實(shí)現(xiàn)過的：click事件的z-index。兩者的區(qū)別是：
- 拖動事件的z-index依賴于mousedown事件的z-index；
- 一次只能觸發(fā)一個(gè)拖動事件，而不像click事件一次可以觸發(fā)一組。
2.28.6 最終效果
（未完待續(xù)）
在線咨詢
