HTML5 : 筆順編輯工具

教育部「常用國字標準字體筆順學習網」(以下簡稱「筆順網」) 中收錄了 4808 個國字的筆順，而那些不在這 4808 個字內的國字，如果想要練習筆順怎麼辦呢？

最近因為國語課本中有個生字「粄」不在筆順網的收錄範圍內，為了它，我開發了一個小工具，可以利用它來下載有筆順的其它字，再將「粄」所需要的筆畫拼接起來，就這樣無中生有造出和筆順網相同格式「粄」的筆順資料了。

姑且就叫這個「html5_strokeeditor」 小工具為「筆順編輯工具」。這個工具的網址如下：

• https://gsyan888.github.io/html5_fun/html5_strokeeditor/html5_strokeeditor.html

當然囉！因為教育部並沒有開放我們將造好的新字上載到主機儲存，所以造出的筆順還是無法使用筆順網來練習。不過，可以利用我開發的新版筆順練習工具來載入自己造的新單字。新版的筆順練習工具，網址如下：

• https://gsyan888.github.io/html5_fun/html5_stroke_parts/html5_stroke_parts.html

如何利用「筆順編輯工具」造出「粄」這個字呢？

分析部件

由於我們是利用筆順網已有的字來「重組」成新的字，所以在開始「造字」前，得先來分析一下新單字需要哪些筆畫，哪些字中帶有那些筆畫。

以「粄」來說，它可拆成左側的「米」和右側的「反」兩個部件，因為要放兩部件，所以「米」可能需要稍小一點點，才不會和右偏旁的「反」重疊。

綜合上述的需求，「米」我們可以取結構上分左、中、右三部件的「糊」，再結合結構上分為左、右兩部件的「版」。「版」的「反」這個部件會稍小一點點的。這樣應該就有機會造出一個比例適當的「粄」囉！

下載筆順

根據分析部件後的結果，想要造出「粄」這個字，我們需要下載「糊」和「版」兩個字的筆順。

打開「筆順編輯工具」後，在下載的對話框中，輸入想下載筆順的字後，按「開始下載」的按鈕。

之後如果還想再下載別的字，可以按一下右下角的工具箱開關，打開工具箱以後，按一下「下載筆順」的圖示，即可出現下載筆順的對話框。

選擇筆畫

筆畫是有順序的，「筆順編輯工具」怎麼知道哪個筆畫先寫，哪個筆畫後寫呢？

因為筆順網的筆畫有其習慣上的書寫順序，而我們在造字時，其實是依習慣切分的部件，一個筆畫、一個筆畫來選取，所以一個字中，同一個部件的，筆畫順序應該會按照原有的順序。

那不同字的，哪一個要優先呢？以造「粄」這個字需要「糊」的「米」，和「版」的「反」，取出的「米」和「反」，哪一個會先寫呢？

為了解決筆順的順序，「筆順編輯工具」是以著色的方式來選取所需要的筆畫（原本白色或灰色的筆畫，按一下會被塗色，表示已選擇該筆畫；反之，已有塗色的則會被取消），同一顏色的會被當作同一組（同一部件）。此外，因為顏色是有其優先順序的（請注意「色盤」上的編號），所以最後會依顏色的順序來結合成成新單字。

底下以「粄」這個字為例，說明它是如何「造」出來的：

1. 選取「編號 1 」的顏色。
2. 點選「糊」中屬部件「米」的所有筆畫。
3. 選取「編號 2 」的顏色。
4. 點選「版」中屬部件「反」的所有筆畫。

照上述的順序來換色並點選所需要的筆畫，最後就可以讓新單字「粄」，擁有正確的全字筆順了。不但如此，連部件的設定，也一併設定完畢了。

匯出單字

在「筆順編輯工具」造好的字，可以在右下角的工具列中，找到「匯出單字」的工具。打開後，輸入新筆順是哪個單字，即可匯出一個 .json 的檔案。匯出的檔案，日後可以重新匯入，這樣就不用再重新造字了。

因為目前教育部的筆順網並無法讓我們自行擴充筆順字庫，所以目前只能將造好的筆順，用個人開發的筆順工具來展示並練習。

進階使用

筆順編輯工具除了直接將現有的筆畫或部件拼接以後，也有提供將筆畫移動、縮小和放大的功能。由於只要新增或減少新字的筆畫，移動和縮放的設定都會重置，所以建議想移動或是縮放前，得先確認所需要的筆畫都已增、刪好了，以免「前功盡棄」。

無論搬移或是縮放的功能，操作的程序都是先按一下想進行的功能鈕，然後拖曳想調整的筆畫或是按一下調整的筆畫。以縮放的功能來說，每按一下想調整大小的筆畫，都會放大或縮小為原來的 5%。

有了搬移和縮放的功能，相信大家可以創造出更多字的筆順了。

下面是製作「闁」這個字的簡單示範影片：

相關網站

• 教育部 : 常用國字標準字體筆順學習網
  http://stroke-order.learningweb.moe.edu.tw
• 雄 : HTML5 Fun
  https://gsyan888.github.io/html5_fun/

更新記錄

• 2019.05.04 加入由儲存在 localStorage 的資料載入的功能。
• 2019.04.28 加入將造的字移動、縮放的功能。
• 2019.04.23 可依填入的顏色區分筆畫的順序。
• 2019.04.20 初版