很多少兒英語啓蒙學習的程序都有26個英文字母大小寫筆畫繪製的功能。小朋友可以跟着提示，一第一筆的將一個字母寫出來。這裏解析一下該功能實現流程。
有一些初步的預想後，參考了競品，流利說少兒英語，lingokids等。
對流利說少兒英語的分析
流利說的字母筆畫教學，每一筆看起來都很自然，就像是人手寫的一樣，仔細看會發現，每一次寫同一個字母寫出來的字都是一模一樣的，其實它是有一些預設的軌跡，當用戶的觸點經過某些關鍵座標點的時候，把對應的預設軌跡繪製出來。不過簡單的將這些點連起來，看起來不會很自然：繪製的筆畫可能會壓到某一筆邊框上面去，甚至寫到邊框外面。所以在真正實現的時候，除了最底層的一個字母底圖，還會有上層的一箇中空的字母圖蓋在上面，我們在兩層圖片中間進行繪製，這樣即使我們的繪製軌跡有少許的不規則，也被上層圖片給蓋住了，理想情況下，繪製出來的字母會跟上層邊框的形狀一樣，這裏就需要設計的很大的工作量了。解壓流利說少兒英語的apk，可以找到他完整的字母圖片素材，以及關鍵座標點和軌跡座標點。寫了腳本，將這些數據提取出來，還原流利說的繪製過程，最終繪製出來的效果，跟流利說的基本一致。當然我們只是參考他的設計思路，我們的實現也跟他們不一樣。流利說少兒英語字母筆畫繪製功能還原：
基本實現思路
我們採取的方案，思想也基本類似，上下兩層圖片，在中間進行繪製。
理論上講，只要我們的筆畫比上層圖片中空的區域更粗，繪製出來的最終圖案，就會跟設計預設的圖案一樣。
光滑曲線繪製
然而實際上如果我們繪製出來的曲線比上層圖片中空區域更粗的話，雖然最終繪製出來的效果中空區域被塗滿之後跟預期一致，但在繪製的過程中，涉及到兩筆交匯的地方，就會出現把第一筆填滿，然後在第二筆中溢出的現象，很不精緻，所以我們的筆觸必須比外面中空的區域更細。那麼我們就得保證我們繪製出來的曲線是光滑的，不能直接把關鍵點連接起來，這樣繪製出來會有很多毛刺，就需要用到一些曲線繪製算法，經過多個點的平滑曲線繪製。可以參考：http://scaledinnovation.com/analytics/splines/aboutSplines.html
觸碰點採樣精度問題
解決了平滑曲線繪製的問題之後，要解決canvas的move事件採樣精度的問題。採樣精度跟設備有關係，也跟我們手指滑動的速度有關係。我們劃的很快，那我們可能就跳過了中間的好幾個點，繪製過程就可能被打斷。所以我們繪製到某一個點的時候，會記錄下這一個點是第幾筆第幾個點，然後當下一次move事件觸發，我們會檢測這個點的後面好幾個點，同時判斷距離上一個已繪製核心點的距離，使我們的軌跡剛好繪製到最近的核心點處，這樣能夠一定程度上解決劃太快和採樣精度太稀疏的問題。
容錯性
這個功能是給小孩子使用的，判斷錯誤不能那麼嚴苛。不一定要觸碰到了核心點，沿着字母比劃外面一定區域內繪製，手指沒有在字母上，只要方向是正確的，我們也會繪製出正確的軌跡，當然不能偏的太離譜，可以通過增大判斷觸碰點是不是在覈心點周圍的距離範圍實現這一點。在一筆結束和下一筆開始中間的繪製，也不會判錯。一筆的最後一兩個點，我們可以允許跳過，自動補全。距離上一個繪製點一定區域內都不判錯。實現這些之後可以讓小朋友也能夠很輕鬆的完成繪製，達到教學的目的。
核心座標點的獲取
還有一個很大的工作組成，是設計如何給我們提供這些關鍵座標點的數據。設計繪製出路徑，路徑上的點的密度和大小是可以控制的,設置路徑上的每一個點都是1px*1px的大小。 然後將帶有每個字母的路徑的設計稿上傳到藍湖。 我們拉取藍湖的數據接口，寫腳本從藍湖標註的座標數據中，過濾出路徑上的點的關鍵點座標，再進行一些座標換算和排序，就可以拿到需要的關鍵座標點。 最後根據實現出來的效果可能需要一些補點，使繪製出來的字母更完美。
經過以上步驟，就基本完成了字母筆畫繪製教學功能。git地址：英語字母筆畫繪製功能解析