從零開始，開發一個 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代表一個點選區域，我們稍後實現。ClickZone的建構函式接收這些引數：

• left
• top
• width
• height
• onClick 回撥函式
• ctx

然後，我們來實現兩個回撥函式：

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

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

最後，銷燬Char的時候要同時銷燬點選區域：

2.17.2 獲取上一個Char

因為點選一個Char的左半邊時，游標要匹配上一個Char的樣式，所以，我們要在每個Char內新增上一個Char的引用：

2.17.3 修改CanvasTextEditor

2.17.4 效果

（未完待續）