2019年4月29日 星期一

HTML5 : 筆順編輯工具

2019年4月29日 星期一
教育部「常用國字標準字體筆順學習網」(以下簡稱「筆順網」) 中收錄了 4808 個國字的筆順,而那些不在這 4808 個字內的國字,如果想要練習筆順怎麼辦呢?

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

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



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

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

分析部件

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

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

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

下載筆順

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

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

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


選擇筆畫

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

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

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

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

底下以「粄」這個字為例,說明它是如何「造」出來的:
  1. 選取「編號 1 」的顏色。
  2. 點選「糊」中屬部件「米」的所有筆畫。
  3. 選取「編號 2 」的顏色。
  4. 點選「版」中屬部件「反」的所有筆畫。



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

匯出單字

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





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



進階使用

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

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

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

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


相關網站


更新記錄

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


5 則留言:

  1. 為什麼我要造字婇
    輸入如採
    結果出現如字採字都不出現呢?換彩也不出現
    麻煩解答,感恩

    回覆刪除
  2. 您好:
    自己造的字要先匯出成筆順檔案, 要使用時, 再使用匯入該檔案的方式; 因為只有您儲存的地方有那個字的筆順資料,無法由網路下載;網路的筆順資料是由教育部維護, 不會有您自己造的字。

    回覆刪除
  3. 雄老師,感謝您所做的筆順練習網,還有筆順編輯工具!我想請問您如何可以在筆順練習網拆開部件後把單獨部件儲存下來或複製到其他的文件?我很想要用這樣的功能,不知道可不可以達成?

    回覆刪除

 
雄::gsyan © 2009. Design by Pocket