從零開始，開發一個 Web Office 套件（5）：Mouse hover over text

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

2. 富文字編輯器(MVP)

2.15 Mouse hover over text

2.15.1 再議 Bounding box

首先，讓我們來回顧一下CanvasTextEditorChar的包圍盒：

如上圖，CanvasTextEditorChar的包圍盒是由：left, boundingBoxTop, width, height定義的。另外，其top僅指的是textBaseLine的縱座標，跟包圍盒沒有直接的關係。
我們期望的結果是：當滑鼠hover在包圍盒上時，產生相應變化。
所以，不能直接讓CanvasTextEditorChar直接繼承ResponsiveToMouseHover，因為二者的top含義完全不同。而是要讓CanvasTextEditorChar的包圍盒繼承它。

2.15.2 實現

修改CanvasTextEditorChar：

• 讓其持有一個boundingBox物件：
  • 新增屬性：boundingBox: ResponsiveToMouseHover
  • 在constructor中為boundingBox初始化

• 當修改Char的位置資訊時，要同時更新boundingBox的位置資訊

• 在render中呼叫boundingBox.render()

同時，修改CursorType:

新增普通文字對應的滑鼠樣式：

然後修改CanvasTextEditorParagraph和CanvasTextEditor中對應的destructor:

2.15.3 效果

為了看得更清楚，我們可以加上一些輔助線。修改ResponsiveToMouseHover.render():

然後再看下效果：

（未完待續）