在iOS上繪製自然的簽名

在ios上繪製自然的簽名

這裡有一篇很棒的文章寫如何在android上獲取流暢的簽名：smoother signatures，但是我沒有找到一篇是寫在ios上如何實現。那麼，究竟怎麼做才能在ios裝置上獲取使用者的簽名呢？

是乙個畫畫的ipad應用程式，它擁有漂亮並且靈敏的畫筆，這也是我所要追求的使用者體驗。

**可以從這裡得到：

signaturedemo

連點成線

最簡單得辦法是，依次獲取觸控點並且用直線把它們連起來。

在uiview子類的初始化方法中建立path和用於捕獲觸控事件的gesture recongnizer .

// create a path to connect lines
path=[
uibezierpath
bezierpath
];// capture touches
uipangesturerecognizer
*pan=[[
uipangesturerecognizer
alloc
]initwithtarget:
self
action:
@selector
(pan:
)];pan
.maximumnumberoftouches
=pan
.minimumnumberoftouches=1
;[self
addgesturerecognizer:
pan];

將捕獲到的pan事件location資料依次加入到貝塞爾path中，連點成線。

-
(void
)pan:
(uipangesturerecognizer*)
panelseif(
pan.
state
==uigesturerecognizerstatechanged)[
path
addlinetopoint:
currentpoint];[
self
setneedsdisplay
];}

畫出軌跡

用這種方法畫個字母j就暴露出一些問題了。

當簽名速度較慢時，ios可以捕獲到足夠的touch位置資訊，讓連線起來的直線看起來不那麼明顯。但是當手指移動速度很快時就有麻煩了。

在2012蘋果開發者大會中介紹的

提到，可以用數學來解決這個問題。

二次貝塞爾曲線

新增二次貝塞爾曲線到之前的**中，需要用到上一次的touch資訊，所以我們增加乙個例項變數來儲存它。

cgpoint
previouspoint
;

寫乙個計算2點中點的方法

static
cgpoint
midpoint
(cgpointp0,
cgpointp1)
;}

更新手勢處理，用二次貝塞爾曲線替換掉之前的直接連線處理

沒有寫很多**，我們就看到了很大的改觀。稜角不見了，但是作為簽名似乎有點乏味。每一處曲線都是等寬的，和用乙隻真正的鋼筆籤出來的簽名效果相違背。

可變的筆刷寬度

筆刷的寬度應該基於簽名的速度而變化，這樣的簽名看起來才自然。

uipangesturerecognizer 有乙個 velocityinview 方法可以返回當前觸控點的速度。

為了畫出變化的寬度，我改用opengl es 曲面細分將筆刷轉換成三角序列（opengl支援畫線，但是ios不支援繪製平滑的可變寬度的線條）。二次貝塞爾曲線點需要重新計算，但是這超出了這篇文章的討論範疇，具體可以檢視**：github

用相鄰的2個二次貝塞爾曲線點來說明一下，可以計算得到此兩點差值表示的向量的垂直向量，並且設定其長度為當前厚度值的1/2（譯者注：下圖大括號部分包含2份1/2厚度值長度，故恰好為當前厚度），採用gl_********_strip的

方式繪製三角序列，因此需要2個二次貝塞爾曲線點來確定乙個含有2個三角形的矩形段。

（譯者注：原理細節原文一筆帶過，建議讀下**，了解下opengl曲面細分，有助於更好的理解）

這個例子，就是用二次貝塞爾曲線和速度控制筆刷厚度的方法畫出來的簽名，自然多了吧。

在iOS上繪製自然的簽名

在iOS上繪製自然的簽名

在iOS上繪製自然的簽名

在iOS上繪製自然的曲線

相關推薦