從零開始，開發一個 Web Office 套件（6）：光標 & Click 事件

《從零開始, 開發一個 Web Office 套件》系列博客目錄
這是一個系列博客，最終目的是要做一個基於 HTML Canvas 的、類似於微軟 Office 的 Web Office 套件（包括：文檔、表格、幻燈片……等等）。
對應的Github repo 地址: https://github.com/zhaokang555/canvas-text-editor

2. 富文本編輯器(MVP)

2.16 光標

我們先來實現一個閃爍的光標，就像下面這樣：

2.16.1 繪制靜止的光標

首先，創建文件src/core/BlinkingCursor.ts:

然后，在CanvasTextEditor中添加函數createBlinkingCursor，暫時將光標繪制在最后一個字符后面。

最后，修改CanvasTextEditor的構造函數和render函數:

效果：

2.16.2 讓光標閃爍起來

首先我們需要確定光標閃爍的頻率。這里，我們暫定為一秒（其中亮半秒，隱藏半秒）。

然后，修改BlinkingCursor:

其中：

• duration代表動畫一個周期的長度（即波長）；
• phase代表當前時刻動畫所處的相位；

同時，在合適的地方調用show函數。這里，我們暫時在createBlinkingCursor中調用它：

效果：

2.17 Click 事件

現在，我們來實現這兩個需求：

• 當鼠標點擊某一個文字（字符）的左半部分時，需要在它的前面插入光標，並且光標應該匹配其左側文字樣式。

• 當鼠標點擊某一個文字（字符）的右半部分時，需要在它的前面插入光標，並且光標應該匹配其右側文字樣式。

2.17.1 添加點擊區域

首先，修改CanvasTextEditorChar，為其添加兩個點擊區域：

• leftClickZone
• rightClickZone

其中，ClickZone代表一個點擊區域：

然后，我們來實現兩個回調函數：

其中，prev是上一個Char的引用，我們稍后實現。

然后，當修改Char的位置的時候，要同時修改點擊區域的位置：

最后，銷毀Char的時候要同時銷毀點擊區域：

2.17.2 獲取上一個Char

因為點擊一個Char的左半邊時，光標要匹配上一個Char的樣式，所以，我們要在每個Char內添加上一個Char的引用：

2.17.3 修改CanvasTextEditor

2.17.4 效果

（未完待續）