贝塞尔曲线实现手写签名

项目前些天要求完成手写签名并生成图片的功能,找了很多的文章,大多数比较麻烦,而且也不需要实现那么多附带的功能。只需要实现简单的签名就可以,如何实现呢?其实这个手写签名和画板是一样的思路。

我们利用 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链接
( 会不会有人说,看这么半天才看到链接。。。 )