Square Engineering Blog 上有一篇很棒的文章，為 Android 帶來了更流暢的簽名，但我沒有找到任何與 iOS 相關的介紹。所以，在 iOS 設備上捕捉用戶簽名的***方式是什么呢？

雖然我沒有找到關于簽名捕捉的文章，但 App Store 上已有一些應用很好地實現了簽名捕捉。我的目標用戶體驗是達到 iPad 應用 Paper by 53 那樣的效果（它是一個繪圖應用，有著漂亮且***響應性的筆刷）。

本文所有的代碼都可以在 Github 倉庫 SignatureDemo 里找到。

點點相連

最簡單的方式是捕捉用戶的觸摸點并用直線將它們連接在一起。

在 UIView 子類的初始化方法中，創建一個 path ，以及用于捕捉觸摸事件的手勢識別器。

// 創建一個 path 以連接各點 
path = [UIBezierPath bezierPath]; 
  
// 捕捉觸摸 
UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(pan:)]; 
pan.maximumNumberOfTouches = pan.minimumNumberOfTouches = 1; 
[self addGestureRecognizer:pan]; 

捕捉 pan 手勢的觸摸點，并通過連線將其放入 bézier path 里：

- (void)pan:(UIPanGestureRecognizer *)pan { 
    CGPoint currentPoint = [pan locationInView:self]; 
  
    if (pan.state == UIGestureRecognizerStateBegan) { 
        [path moveToPoint:currentPoint]; 
    } else if (pan.state == UIGestureRecognizerStateChanged) 
        [path addLineToPoint:currentPoint]; 
  
    [self setNeedsDisplay]; 
} 

畫出 path：

- (void)drawRect:(CGRect)rect 
{ 
    [[UIColor blackColor] setStroke]; 
    [path stroke]; 
} 

上圖是用這種技術畫出的字母 “J” ，它也揭示了一些問題：在較慢的速度下， iOS 可以捕捉到足夠多的觸摸點，因此看起來較平滑，但稍快的移動就會導致觸摸點之間較大的間距，簽名看起來就是一些直線段相連。

2012 年的 Apple 開發者大會有一個 session 叫做 創建高級手勢識別器，它用了一點數學來解決此問題。

二次貝塞爾曲線

作為用線段連接各觸摸點的代替，我們改用二次貝塞爾曲線來連接這些點，使用前述的 WWDC session 上討論的技術（定位到 42 分 15 秒）。用二次貝塞爾曲線來連接觸摸點，使用觸摸點作為控制點以及中間點作為起點和終點。

添加二次曲線到之前的代碼里要求存儲前一個觸摸點，所以要添加一個實例變量：

CGPoint previousPoint; 

并創建一個函數來計算兩點的中間點：

static CGPoint midpoint(CGPoint p0, CGPoint p1) { 
    return (CGPoint) { 
        (p0.x + p1.x) / 2.0, 
        (p0.y + p1.y) / 2.0 
    }; 
} 

再更新 pan 手勢處理器，用二次曲線替換直線：

- (void)pan:(UIPanGestureRecognizer *)pan { 
    CGPoint currentPoint = [pan locationInView:self]; 
    CGPoint midPoint = midpoint(previousPoint, currentPoint); 
  
    if (pan.state == UIGestureRecognizerStateBegan) { 
        [path moveToPoint:currentPoint]; 
    } else if (pan.state == UIGestureRecognizerStateChanged) { 
        [path addQuadCurveToPoint:midPoint controlPoint:previousPoint]; 
    } 
  
    previousPoint = currentPoint; 
  
    [self setNeedsDisplay]; 
} 
 
grefbd6a2d7175616472617469632e706e67 

并沒有改寫太多代碼，但我們已經看到了巨大的不同。觸摸點不再可見，但對于捕捉簽名來說，它依然有些乏味。每個曲線都是同樣的寬度，這不符合實際用鋼筆簽名的感覺。

可變的線寬

基于觸摸速度，寬度可變，這樣就能創建出更加自然的筆畫。 UIPanGestureRecognizer 已經包含有一個叫做 velocityInView: 的方法，它用一個 CGPoint 返回當前觸摸的速度。

為了渲染出一個可變寬度的筆畫，我切換到 OpenGL ES 和一個能轉換筆畫為三角形（具體說來，是三角帶（triangle strip））的叫做鑲嵌（tesselation）的技術（OpenGL 支持畫線，但 iOS 不支持平滑過渡的可變寬度）。沿曲線的二次分點同樣需要被計算，但這超出了本文討論的范疇。還請看看 Github 上的源代碼了解細節吧。

給定兩個點，計算出一個垂直的向量，它的大小設置為當前厚度的一半。基于 GL_TRIANGLE_STRIP 的自然特性，只需要兩個點就能用兩個三角形去創建下一個矩形。

下面是使用二次貝塞爾曲線，并根據速度調節筆畫粗細而創造出的一個具有視覺吸引力且非常自然的簽名。

原文出處： JASON HARWIG   

譯文出處： nixzhu（@nixzhu）