天天看點

貝塞爾曲線實作手寫簽名點-->線二次貝塞爾曲線

項目前些天要求完成手寫簽名并生成圖檔的功能,找了很多的文章,大多數比較麻煩,而且也不需要實作那麼多附帶的功能。隻需要實作簡單的簽名就可以,如何實作呢?其實這個手寫簽名和畫闆是一樣的思路。

我們利用 path 和 手勢事件 将視圖上的點依次連起來就可以了,就可以簡單的實作簽名效果。

點-->線

我們首先建立一個繼承與 UIView 的視圖,在UIView子類中建立path和手勢事件

--------------------------------------------------------------------------------------

貝塞爾曲線實作手寫簽名點-->線二次貝塞爾曲線

接着在手勢的回調方法裡将 path 初始點和 location 的資料依次加入到BezierPath中

-----------------------------------------------------------------------------------------

貝塞爾曲線實作手寫簽名點-->線二次貝塞爾曲線

并調用UIView 的 drawRect(重繪)方法, [self setNeedsDisplay] 調用後UIView會回調 drawRect 方法

[path stroke] 會使path裡所有的點都連成線

----------------------------------------------------------------------------

貝塞爾曲線實作手寫簽名點-->線二次貝塞爾曲線

在控制器中初始化你所自定義的UIView,你就可以檢視簽名效果了,可以看下效果

----------------------------------------------------------------------------------------

貝塞爾曲線實作手寫簽名點-->線二次貝塞爾曲線

有沒有發現什麼問題,當簽名慢的時候,iOS可以很好的捕捉到你 touch 的位置,讓連起來的直線看着不那麼明顯,但是當你手速一快,就會發現曲線會很别扭,看着讓人很難受。怎麼解決呢?蘋果有關貝塞爾曲線的官方文檔告訴了我們。

二次貝塞爾曲線

我們這裡用二次貝塞爾曲線去解決這個問題,不再用直線去連接配接這些點,連接配接二次貝塞爾曲線時,我們把觸摸點當作控制點,而取中點為對應的起點和終點。如圖:

貝塞爾曲線實作手寫簽名點-->線二次貝塞爾曲線

簡單易懂,就是在之前基礎上,更加細分,使線段更加的自然。 我們需要添加新的變量來儲存上次的touch資訊 CGPoint prePoint;

然後加上一個計算中間點的方法 -----------------------------------

貝塞爾曲線實作手寫簽名點-->線二次貝塞爾曲線

現在我們需要做的就是更新一下 手勢的回調方法 ----------------------------------------------------

貝塞爾曲線實作手寫簽名點-->線二次貝塞爾曲線

我們隻改動了這三個地方,下面我們再看下效果圖

貝塞爾曲線實作手寫簽名點-->線二次貝塞爾曲線

代碼改動量很少,棱角就不見了,而且實作了簡單的手寫簽名。 ( PS:  如果想簽名實作筆鋒的效果,請參考蘋果官方文檔 OpenGl。)

最後我們把UIView的内容截取為圖檔就可以了 -------------------------------------------------

貝塞爾曲線實作手寫簽名點-->線二次貝塞爾曲線

這樣就可以擷取到你的簽名圖檔了,我們可以根據需求自行處理。 關于用貝塞爾曲線實作簡單的手寫簽名就實作了,附上GitHub位址:GitHub連結 ( 會不會有人說,看這麼半天才看到連結。。。 )