转载：https://blog.csdn.net/zhongbeida_xue/article/details/51656842
这里有一篇很棒的文章写如何在Android上获取流畅的签名：Smoother Signatures，但是我没有找到一篇是写在iOS上如何实现。那么，究竟怎么做才能在iOS设备上获取用户的签名呢？
虽然我没有找到任何关于获取签名的文章，但是在App store上已经有了实现得很好的app。Paper by 53是一个画画的iPad应用程序，它拥有漂亮并且灵敏的画笔，这也是我所要追求的用户体验。
代码可以从这里得到：SignatureDemo
连点成线
最简单得办法是，依次获取触摸点并且用直线把它们连起来。
在UIView子类的初始化方法中创建path和用于捕获触摸事件的gesture recongnizer .
// Create a path to connect linespath=[UIBezierPathbezierPath];// Capture touchesUIPanGestureRecognizer*pan=[[UIPanGestureRecognizeralloc]initWithTarget:selfaction:@selector(pan:)];pan.maximumNumberOfTouches=pan.minimumNumberOfTouches=1;[selfaddGestureRecognizer:pan];
将捕获到的pan事件location数据依次加入到贝塞尔path中，连点成线。
-(void)pan:(UIPanGestureRecognizer*)pan{CGPointcurrentPoint=[panlocationInView:self];if(pan.state==UIGestureRecognizerStateBegan){[pathmoveToPoint:currentPoint];}elseif(pan.state==UIGestureRecognizerStateChanged)[pathaddLineToPoint:currentPoint];[selfsetNeedsDisplay];}
画出轨迹
-(void)drawRect:(CGRect)rect{[[UIColorblackColor]setStroke];[pathstroke];}
用这种方法画个字母J就暴露出一些问题了。
当签名速度较慢时，iOS可以捕获到足够的touch位置信息，让连接起来的直线看起来不那么明显。但是当手指移动速度很快时就有麻烦了。
在2012苹果开发者大会中介绍的 Building Advanced Gesture Recognizers提到，可以用数学来解决这个问题。
二次贝塞尔曲线
我们需要用二次贝塞尔曲线去连接那些触摸点，而并非用直线，可以参考上面给出的苹果开发者大会视频（大约在42：15处）。连接二次贝塞尔曲线时，应把触摸点当作控制点，而取中点为对应的起点和终点。
添加二次贝塞尔曲线到之前的代码中，需要用到上一次的touch信息，所以我们增加一个实例变量来存储它。
CGPointpreviousPoint;
写一个计算2点中点的方法
staticCGPointmidpoint(CGPointp0,CGPointp1){return(CGPoint){(p0.x+p1.x)/2.0,(p0.y+p1.y)/2.0};}
更新手势处理，用二次贝塞尔曲线替换掉之前的直接连接处理
-(void)pan:(UIPanGestureRecognizer*)pan{CGPointcurrentPoint=[panlocationInView:self];CGPointmidPoint=midpoint(previousPoint,currentPoint);if(pan.state==UIGestureRecognizerStateBegan){[pathmoveToPoint:currentPoint];}elseif(pan.state==UIGestureRecognizerStateChanged){[pathaddQuadCurveToPoint:midPointcontrolPoint:previousPoint];}previousPoint=currentPoint;[selfsetNeedsDisplay];}
没有写很多代码，我们就看到了很大的改观。棱角不见了，但是作为签名似乎有点乏味。每一处曲线都是等宽的，和用一只真正的钢笔签出来的签名效果相违背。
可变的笔刷宽度
笔刷的宽度应该基于签名的速度而变化，这样的签名看起来才自然。UIPanGestureRecognizer 有一个 velocityInView 方法可以返回当前触摸点的速度。
为了画出变化的宽度，我改用OpenGL ES 曲面细分将笔刷转换成三角序列（OpenGL支持画线，但是iOS不支持绘制平滑的可变宽度的线条）。二次贝塞尔曲线点需要重新计算，但是这超出了这篇文章的讨论范畴，具体可以查看代码：github
用相邻的2个二次贝塞尔曲线点来说明一下，可以计算得到此两点差值表示的向量的垂直向量，并且设定其长度为当前厚度值的1/2（译者注：下图大括号部分包含2份1/2厚度值长度，故恰好为当前厚度），采用GL_TRIANGLE_STRIP的方式绘制三角序列，因此需要2个二次贝塞尔曲线点来确定一个含有2个三角形的矩形段。
（译者注：原理细节原文一笔带过，建议读下代码，了解下OpenGL曲面细分，有助于更好的理解）
这个例子，就是用二次贝塞尔曲线和速度控制笔刷厚度的方法画出来的签名，自然多了吧。
网友评论