從零開始，開發一個 Web Office 套件（15）：拖動邊框，平移編輯器

趙康發表於2022-04-18
Web套件

這是一個系列部落格，最終目的是要做一個基於 HTML Canvas 的、類似於微軟 Office 的 Web Office 套件（包括：文件、表格、幻燈片……等等）。
部落格園：《從零開始, 開發一個 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 演算法

  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 最終效果

（未完待續）

相關文章