2022年3月13日 星期日

HTML5 : 筆順練習偵錯優化

2022年3月13日 星期日

 HTML5 筆順練習可以在練習時,提示哪裡寫得不夠到位或是檢查是否寫對,主要是利用教育部筆順網的筆順資料中,有針對每一個筆畫給了供繪製示範動畫用的關鍵座標。但是這些座標有的卻是在筆畫之外,不知道當初為什麼這樣設計,所以我在實現習寫功能時,調了好久,才把程式調到大部份的字都可以適用。不過這是犠牲正確性換來的。

以「多」這個來說,觀察下圖中綠色的圈圈,它們是用來檢查習寫是否正確的檢查點:

「多」練習時,原始的檢查點

兩個箭頭指出的檢查點都落在筆畫的外面。這種情形大多出現在「橫撇」。

像「祝」這個字也有檢查點萿在筆畫外的情形:

箭頭處的檢查點落在筆畫外

練習的人,寫到這幾個「折點」,應該常會聽到程式喊「加油」!所以我只好將「容錯」開到最大:

在行動載具上「容錯」開到最大

如此一來,犠牲了檢查點的精準度,變成隨便寫就過關了。

朋友問我可不可以讓習慣手左手的孩子也能用這支程式練習筆順?也就是練習時不用按右手的習慣順序,只要把筆畫完成即可過關。

如果要達成可以不按檢查點順序的要求,這下就得面對檢查點落到筆畫外面的問題了。目前想到的方法就是找出每一筆畫 X 座標跟 Y 座標的最大和最小值,如果超出範圍了,就修正。幸好之前為了寫部件拼圖遊戲時,已經寫好找出座標最大、最小值的函數了。來看看效果:

「多」檢查點的修正

「祝」檢查點的修正

上面兩張圖中,紅色方框框出了每一個筆畫的範圍;綠色的圓圈是原來的檢查點中心;紅色的小圓圈則為修正過的檢查點中心;紅色的大圓圈則為實際偵測是否已寫到位的範圍。

多觀察了幾個國字修正完的結果,看起來,這個方法應該是可行的。接下來就可以再來幫筆順練習第三版優化,並加入新功能了。

相關連結


沒有留言:

張貼留言

 
雄::gsyan © 2009. Design by Pocket