從零開始，開發一個 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():

然后再看下效果：

（未完待續）