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曲面细分,有助于更好的理解)
这个例子,就是用二次贝塞尔曲线和速度控制笔刷厚度的方法画出来的签名,自然多了吧。
iOS上绘制自然的签名-b相关推荐
- 在iOS上绘制自然的签名
在iOS上绘制自然的签名 这里有一篇很棒的文章写如何在Android上获取流畅的签名:Smoother Signatures,但是我没有找到一篇是写在iOS上如何实现.那么,究竟怎么做才能在iOS设备 ...
- iOS开发之在地图上绘制出你运行的轨迹
iOS中的MapKit集成了google地图api的很多功能加上iOS的定位的功能,我们就可以实现将你运行的轨迹绘制到地图上面.这个功能非常有 用,比如汽车的gprs追踪.人员追踪.快递追踪等等.这篇 ...
- iOS开发之在地图上绘制出你运动的轨迹
iOS中的MapKit集成了google地图api的很多功能加上iOS的定位的功能,我们就可以实现将你运行的轨迹绘制到地图上面.这个功能非常有用,比如快递追踪.汽车的gprs追踪.人员追踪等等.这篇文 ...
- iOS 在地图上绘制出你运动的轨迹
iOS中的MapKit集成了google地图api的很多功能加上iOS的定位的功能,我们就可以实现将你运行的轨迹绘制到地图上面.这个功能非常有用,比如快递追踪.汽车的gprs追踪.人员追踪等等.这篇文 ...
- iOS 在地图上绘制运动轨迹
iOS中的MapKit集成了google地图api的很多功能加上iOS的定位的功能,我们就可以实现将你运行的轨迹绘制到地图上面.这个功能非常有用,比如快递追踪.汽车的gprs追踪.人员追踪等等.这篇文 ...
- Pluto - iOS 上一个高性能的排版渲染引擎
Pluto 是 iOS 上的一个排版渲染引擎,通过 JSON/JS 文件可以很方便地描述界面元素,开发效率很高,并且在流畅度,内存等方便有保证.pluto.oa.com 上有更多详细资料. Qzone ...
- utm虚拟机安装linux,UTM: 在 iOS 上安装 Windows 或 Linux 等系统及虚机安装过程
Apps & Tweaks|Jailbreak Guide|iDevices UTM Version: 2.0.20 Repo: https://getutm.app/ Support: 11 ...
- iOS上文本处理之简史
iOS 文字简史 iPhone OS 2 UILabel UITextField UITextView iPhone OS 3 New Feature: 复制 && 粘贴 iOS 3. ...
- Xamarin 从零开始部署 iOS 上的 Walterlv.CloudKeyboard 应用
本文将告诉大家如何从零开始在 iOS 上部署 Walterlv.CloudKeyboard 应用.这个 Walterlv.CloudKeyboard 应用是一个云输入法应用,在 GitHub 完全开源 ...
- 地图上绘制任意角度的椭圆_地图上的总椭圆
地图上绘制任意角度的椭圆 或者,如何选择下班后去海滩的最佳方式 (Or, how to choose the best way to walk to the beach after work) It ...
最新文章
- 《科学》封面特别报道:人类登月50年
- 参加51CTO学院软考培训,我通过啦
- Win2008 R2 WEB 服务器安全设置指南之修改3389端口与更新补丁
- 1.java局部变量 实例变量 类变量(静态变量)
- 忽略所有信号导致的程序Ctrl+c和Ctrl+z无法退出问题,以及信号表详解
- mysql性能优化的一些建议
- poj 3278 catch that cow BFS(基础水)
- 头条Java后台3面(含答案):事务+List集合+慢查询SQL+Redis+秒杀设计
- Linux 编译 没有path,编译linux-2.6.21的问题-‘PATH_MAX’ undeclared
- how pwm update
- vba 中sql like用法
- jvm原理及性能调优系列(jvm调优)
- DM6467T开发板领航——开发环境
- SDOI2015 序列统计
- python+word+excel+ppt自动化办公教程_Python自动化办公之Word,全网最全看这一篇就够了...
- Resnet 网络结构的理解以及论文
- ie11安装程序无法继续 因为你的计算机,ie11无法安装解决方法详解
- 【HTML】极简个人主页设计
- wtl单文档选项_[翻译]WTL开发者指南 第1章 WTL概述
- Faceswap文档之---使用手册
热门文章
- python---windows中的文件路径书写的错误
- js使用html5,JS使用H5实现图片预览功能
- 汇编64位无法生成可用exe_MASM学习x86汇编语言2 寄存器、伪指令与程序调试
- python编程学习笔记_python学习笔记--python编程基础
- jcodec_java-jcodec-有人看过该库的文档吗?
- exchange无法收发邮件_【知乎最详细】Windows邮件amp;日历UWP+QQ邮箱如何设置
- thymeleaf 消息推送_SpringBoot整合WebSocket实现消息推送
- c++ vector排序_儿童时间管理课6:便利贴时间排序法
- VR线下体验店群雄并起,超级队长为何能靠IP突围?
- iOS类别(Category)和扩展(Extension,匿名类)