從零開始，開發(fā)一個(gè) Web Office 套件（16）：拖動控制點(diǎn)，調(diào)整編輯器大小
時(shí)間：2023-05-26 02:21:02 | 來源：網(wǎng)站運(yùn)營
時(shí)間：2023-05-26 02:21:02 來源：網(wǎng)站運(yùn)營
從零開始，開發(fā)一個(gè) Web Office 套件（16）：拖動控制點(diǎn)，調(diào)整編輯器大?。?blockquote data-first-child data-pid="QcSZBux1">這是一個(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.29 Feature：拖動控制點(diǎn)，調(diào)整編輯器大小
2.29.1 算法
- 監(jiān)聽控制點(diǎn)的拖動事件，將拖動的距離記為
(dx, dy)。根據(jù)控制點(diǎn)所處方位，平移編輯器或者改變其大?。?/li>- 如果拖動的是左上角（TopLeft）的控制點(diǎn)，則：
- 將編輯器平移
(dx, dy) - 將編輯器寬高增加
(-dx, -dy)
- 如果拖動的是頂部中央（Top）的控制點(diǎn)，則：
- 將編輯器平移
(0, dy) - 將編輯器高度增加
-dy
- 如果拖動的是右上角（TopRight）的控制點(diǎn)，則：
- 將編輯器平移
(0, dy) - 將編輯器寬高增加
(dx, -dy)
- 如果拖動的是右側(cè)中央（Right）的控制點(diǎn)，則將編輯器寬度增加
dx - 如果拖動的是右下角（BottomRight）的控制點(diǎn)，則將編輯器寬高增加
(dx, dy) - 如果拖動的是底部中央（Bottom）的控制點(diǎn)，則將編輯器高度增加
dy - 如果拖動的是左下角（BottomLeft）的控制點(diǎn)，則：
- 將編輯器平移
(dx, 0) - 將編輯器寬高增加
(-dx, dy)
- 如果拖動的是左側(cè)中央（Left）的控制點(diǎn)，則：
- 將編輯器平移
(dx, 0) - 將編輯器寬度增加
-dx
- 如果平移了編輯器，就會進(jìn)入上一節(jié)講到的平移編輯器的邏輯，這里就不再贅述；
- 如果調(diào)整了編輯即的寬度，則需要：
- 將上邊框和下邊框橫向拉伸，但是高度不變
- 將左邊框和右邊框平移
- 將不同位置的控制點(diǎn)平移不同距離
- 如果調(diào)整了編輯即的高度，則需要：
- 將左邊框和右邊框縱向拉伸，但是寬度不變
- 將上邊框和下邊框平移
- 將不同位置的控制點(diǎn)平移不同距離
2.29.2 實(shí)現(xiàn)
2.29.3 效果
2.29.4 Bug: 平移或調(diào)整大小后，點(diǎn)擊編輯器空白處，光標(biāo)不能正確定位
Bug表現(xiàn)：
原因分析：這是因?yàn)榫庉嬈髌揭苹蛘{(diào)整大小后，editor.blankSpace沒有及時(shí)更新。
修復(fù)：
2.29.5 最終效果
（未完待續(xù)）
在線咨詢
