HTML5 筆順練習可以在練習時，提示哪裡寫得不夠到位或是檢查是否寫對，主要是利用教育部筆順網的筆順資料中，有針對每一個筆畫給了供繪製示範動畫用的關鍵座標。但是這些座標有的卻是在筆畫之外，不知道當初為什麼這樣設計，所以我在實現習寫功能時，調了好久，才把程式調到大部份的字都可以適用。不過這是犠牲正確性換來的。
以「多」這個來說，觀察下圖中綠色的圈圈，它們是用來檢查習寫是否正確的檢查點：
 |
| 「多」練習時，原始的檢查點 |
兩個箭頭指出的檢查點都落在筆畫的外面。這種情形大多出現在「橫撇」。
像「祝」這個字也有檢查點萿在筆畫外的情形：
 |
| 箭頭處的檢查點落在筆畫外 |
練習的人，寫到這幾個「折點」，應該常會聽到程式喊「加油」！所以我只好將「容錯」開到最大：
 |
| 在行動載具上「容錯」開到最大 |
如此一來，犠牲了檢查點的精準度，變成隨便寫就過關了。
朋友問我可不可以讓習慣手左手的孩子也能用這支程式練習筆順？也就是練習時不用按右手的習慣順序，只要把筆畫完成即可過關。
如果要達成可以不按檢查點順序的要求，這下就得面對檢查點落到筆畫外面的問題了。目前想到的方法就是找出每一筆畫 X 座標跟 Y 座標的最大和最小值，如果超出範圍了，就修正。幸好之前為了寫部件拼圖遊戲時，已經寫好找出座標最大、最小值的函數了。來看看效果：
 |
| 「多」檢查點的修正 |
 |
| 「祝」檢查點的修正 |
上面兩張圖中，紅色方框框出了每一個筆畫的範圍；綠色的圓圈是原來的檢查點中心；紅色的小圓圈則為修正過的檢查點中心；紅色的大圓圈則為實際偵測是否已寫到位的範圍。
多觀察了幾個國字修正完的結果，看起來，這個方法應該是可行的。接下來就可以再來幫筆順練習第三版優化，並加入新功能了。
發表文章
沒有留言:
張貼留言