iOS上绘制自然的签名-b

这里有一篇很棒的文章写如何在Android上获取流畅的签名:Smoother Signatures:https://corner.squareup.com/2012/07/smoother-signatures.html,但是我没有找到一篇是写在iOS上如何实现。那么,究竟怎么做才能在iOS设备上获取用户的签名呢?

虽然我没有找到任何关于获取签名的文章,但是在App store上已经有了实现得很好的app。  Paper by 53:http://www.fiftythree.com/paper 是一个画画的iPad应用程序,它拥有漂亮并且灵敏的画笔,这也是我所要追求的用户体验。

代码可以从这里得到: SignatureDemo:https://github.com/jharwig/PPSSignatureView

连点成线

最简单得办法是,依次获取触摸点并且用直线把它们连起来。

在UIView子类的初始化方法中创建path和用于捕获触摸事件的gesture recongnizer .

// Create a path to connect linespath = [UIBezierPath bezierPath];// Capture touchesUIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(pan:)];pan.maximumNumberOfTouches = pan.minimumNumberOfTouches = 1;[self addGestureRecognizer:pan];

将捕获到的pan事件location数据依次加入到贝塞尔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];}

画出轨迹

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

用这种方法画个字母J就暴露出一些问题了。

当签名速度较慢时,iOS可以捕获到足够的touch位置信息,让连接起来的直线看起来不那么明显。但是当手指移动速度很快时就有麻烦了。

在2012苹果开发者大会中介绍的 Building Advanced Gesture Recognizers :https://developer.apple.com/videos/play/wwdc2012/233/提到,可以用数学来解决这个问题。

二次贝塞尔曲线

我们需要用二次贝塞尔曲线去连接那些触摸点,而并非用直线,可以参考上面给出的苹果开发者大会视频(大约在42:15处)。连接二次贝塞尔曲线时,应把触摸点当作控制点,而取中点为对应的起点和终点。

添加二次贝塞尔曲线到之前的代码中,需要用到上一次的touch信息,所以我们增加一个实例变量来存储它CGPoint previousPoint;

写一个计算2点中点的方法

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

更新手势处理,用二次贝塞尔曲线替换掉之前的直接连接处理

- (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];}

没有写很多代码,我们就看到了很大的改观。棱角不见了,但是作为签名似乎有点乏味。每一处曲线都是等宽的,和用一只真正的钢笔签出来的签名效果相违背。

可变的笔刷宽度

笔刷的宽度应该基于签名的速度而变化,这样的签名看起来才自然。UIPanGestureRecognizer 有一个 velocityInView 方法可以返回当前触摸点的速度。

为了画出变化的宽度,我改用OpenGL ES 曲面细分将笔刷转换成三角序列(OpenGL支持画线,但是iOS不支持绘制平滑的可变宽度的线条)。二次贝塞尔曲线点需要重新计算,但是这超出了这篇文章的讨论范畴,具体可以查看代码:github :https://github.com/jharwig/PPSSignatureView

用相邻的2个二次贝塞尔曲线点来说明一下,可以计算得到此两点差值表示的向量的垂直向量,并且设定其长度为当前厚度值的1/2(译者注:下图大括号部分包含2份1/2厚度值长度,故恰好为当前厚度),采用GL_TRIANGLE_STRIP的方式绘制三角序列,因此需要2个二次贝塞尔曲线点来确定一个含有2个三角形的矩形段。

(译者注:原理细节原文一笔带过,建议读下代码,了解下OpenGL曲面细分,有助于更好的理解)

这个例子,就是用二次贝塞尔曲线和速度控制笔刷厚度的方法画出来的签名,自然多了吧。

时间: 2024-08-06 16:05:31

iOS上绘制自然的签名-b的相关文章

在iOS上绘制阴影

代码在playground中实现 //: Playground - noun: a place where people can play import UIKit class MyView : UIView{ override func drawRect(rect: CGRect) { //获取绘制上下文 var context = UIGraphicsGetCurrentContext() //计算要在其中绘制的矩形 var pathRect = CGRectInset(self.bound

在DrawingVisual上绘制圆形的进度条,类似于IOS系统风格。

1.说明:在WPF中,文件下载时需要显示下载进度,由于系统自带的条型进度条比较占用空间,改用圆形的进度条,需要在DrawingVisual上呈现. 运行的效果如图: private Point GetPointOnCir(Point CenterPoint, double r, double angel) { Point p = new Point(); p.X = Math.Sin(angel * Math.PI / 180) * r + CenterPoint.X; p.Y = Center

iOS开发之在地图上绘制出你运行的轨迹

首先我们看下如何在地图上绘制曲线.在Map Kit中提供了一个叫MKPolyline的类,我们可以利用它来绘制曲线,先看个简单的例子. 使用下面代码从一个文件中读取出经纬度,然后创建一个路径:MKPolyline实例. 1 -(void) loadRoute 2 { 3 NSString* filePath = [[NSBundle mainBundle] pathForResource:@"route" ofType:@"csv"]; 4 NSString* fi

iOS:quartz2D绘图(在PDF文件上绘制图片)

quartz2D还可以在PDF文件上绘制图片,它有自己的PDF Graphics Context上下文,通过UIGraphicsBeginPDFContextToFile方法开始上下文后就可以绘制图片了,最后记得使用UIGraphicsEndPDFContext()方法结束上下文.绘制pdf时,既可以绘制单页pdf,也可以绘制多页pdf成一本书,在绘制开始时,使用UIGraphicsBeginPDFPage()开始新的一页这是非常重要的.下面演示绘制单页pdf和多页的pdf. 具体的实例如下:

漫谈iOS程序的证书和签名机制

原文:漫谈iOS程序的证书和签名机制 接触iOS开发半年,曾经也被这个主题坑的摸不着头脑,也在淘宝上买过企业证书签名这些服务,有大神都做了一个全自动的发布打包(不过此大神现在不卖企业证书了),甚是羡慕和崇拜.于是,花了一点时间去研究了一下iOS这套证书和签名机制,并撰文分享给需要的朋友.由于本人才疏学浅,多有遗漏或错误之处,还请大神多多指教. 非对称加密和摘要 非对称加密的特性和用法 非对称加密算法可能是世界上最重要的算法,它是当今电子商务等领域的基石.简而言之,非对称加密就是指加密密钥和解密密

复杂TableView在iOS上的性能优化

声明:本文翻译自<iOS performance optimization>,原文作者 Khang Vo.翻译本文纯属为了技术交流的目的,并不具有任何的商业性质,也不得利用本文内容进行商业盈利.欢迎转载,但是希望转载的时候加上出处连接,谢谢.译者联系方式 [email protected],如果有 iOS 开发之类的问题,欢迎?一起讨论,谢谢.另,由于本人翻译经验不多,如果翻译不妥或者理解不到位的地方,希望各位朋友海涵,可以发信到上述邮箱,我会及时地根据大家的反馈,对翻译稿做及时地修改,谢谢!

在iOS上实现变换

形状的绘制没有问题,但我们有时希望能够处理稍微复杂一些的东西,比如旋转或拉伸一个形状.当然可以通过提供不同的坐标来直接创建新的路径,但要求iOS替我们完成旋转通常会更好一些. 为此,我们使用变换,变换就是变换矩阵的表示,通常可以对内容进行任何形式的变形和操控. 无论你的代码进行什么样的绘制操作,都会受到道歉转换矩阵(CTM)的影响,它会对每条路径及所执行的绘制操作进行变换.默认情况下,变换矩阵是单位矩阵,也就是说它不做任何工作.但是,可以修改CTM以影响绘制过程. 要修改CTM,首先要对低级绘制

创建 Android 上使用的自签名证书(Creating self-signed certificates for use on Android)

创建 Android 上使用的自签名证书 太阳火神的美丽人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途-保持一致"创作公用协议 转载请保留此句:太阳火神的美丽人生 -  本博客专注于 敏捷开发及移动和物联设备研究:iOS.Android.Html5.Arduino.pcDuino,否则,出自本博客的文章拒绝转载或再转载,谢谢合作. 创建 Android 上使用的自签名证书 Creating self-signed certificat

获取IMap上绘制的Element的区域范围

运行环境:开发环境:Windows7旗舰版64bit.VisualStudio2008 With SP1.ArcEngine10.0.NetFrameWork4.0.IIS7和C#开发语言. 问题描述:之前CS端的断面分析功能,是将断面图绘制在IMap之上,然后再AxMapControl进行展现,现在要将其移植到WebService中,自然没有控件进行展现,于是采用了直接将在IMap中绘制的要素导出为图片的方式进行,但是在导出图片的过程中,往往导出的区域并不是自己绘制要素所在的区域,因此要先获取