iOS 手写签名并生成图片

简介

由于项目需求,安卓的同事做了这样一个功能,iOS不用做,我还是找了找资料,做了一个小dome,GitHub地址,进入正题。

1.封装一个view作为签名视图,属性很好懂,就是设置签名的线的颜色,线宽,还有最后生成的图片,以及图片的缩放比例,方法分别是准备开始画线,重置以及保存
#import <UIKit/UIKit.h>

@interface CJSignatureView : UIView
// 线宽 默认1
@property (nonatomic, assign) CGFloat lineWidth;
// 线颜色 默认黑
@property (nonatomic, strong) UIColor *lineColor;
// 生成图片的缩放比例 默认1不缩放 范围0.1~1.0
@property (nonatomic, assign) CGFloat imageScale;
// 生成的图片
@property (nonatomic, strong) UIImage *signImage;

// 初始化视图之后调用 准备画图
- (void)startDraw;
// 重置
- (void)resetDraw;
// 保存成图片
- (void)saveDraw;

@end
2.初始化path
// 先声明两个全局变量
UIBezierPath *path;// 签名的线
CGPoint previousPoint;// 上一个点

#pragma mark 准备开始签名
- (void)startDraw
{
    // 背景色
    self.backgroundColor = [UIColor whiteColor];
    // 初始化 设置属性
    path = [UIBezierPath bezierPath];
    // 线宽
    path.lineWidth = _lineWidth ? _lineWidth : 1;
    // 线颜色
    if (_lineColor) {
        [_lineColor set];
    }
}
3.画线,将第一个点击的点和之后移动到的点连接
#pragma mark 画线刚开始,保存上一个点
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
{
    // 获取点击点坐标
    UITouch * touch = touches.anyObject;
    CGPoint currentPoint = [touch locationInView:self];
    // 保存成上一点
    previousPoint = currentPoint;
    // 开始点移动到点击点
    [path moveToPoint:currentPoint];
}
#pragma mark 开始画线,连接上一个点和当前点
- (void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
{
    // 获取点击点坐标
    UITouch * touch = touches.anyObject;
    CGPoint currentPoint = [touch locationInView:self];
    
    // 获取两点中点
    CGPoint midPoint = midpoint(previousPoint, currentPoint);
    // 画曲线
    [path addQuadCurveToPoint:midPoint controlPoint:previousPoint];
    // 替换当前点为上一点
    previousPoint = currentPoint;
    // 画图,调用系统的darwRect:
    [self setNeedsDisplay];
}
#pragma mark 系统画线方法
- (void)drawRect:(CGRect)rect
{
    [path stroke];
}
4.写重置方法,调用startDraw重置属性,调用setNeedsDisplay重画图(path这时候时空的)
#pragma mark 重置path
- (void)resetDraw
{
    [self startDraw];
    [self setNeedsDisplay];
}
5.写保存方法,这里涉及到2个方法,截图以及缩放
#pragma mark 保存成图片
- (void)saveDraw
{
    self.signImage = [self captureWithView:self];
    if (!_imageScale) {
        return;
    }
    // 这里控制范围,范围可以自己定
    if (_imageScale < 0.1) {
        _imageScale = 0.1;
    }
    if (_imageScale > 1) {
        _imageScale = 1;
    }
    if (_imageScale != 1) {
        [self scaleImage];
    }
    
}

#pragma mark 缩放图片
- (UIImage *)scaleImage
{
    // 用这个方法 画质会变渣 
//    UIGraphicsBeginImageContext(CGSizeMake(_signImage.size.width * _imageScale, _signImage.size.height * _imageScale));
//    [_signImage drawInRect:CGRectMake(0, 0, _signImage.size.width * _imageScale, _signImage.size.height * _imageScale)];
//    self.signImage = UIGraphicsGetImageFromCurrentImageContext();
//    UIGraphicsEndImageContext();
    
    // 判断机型
    if([[UIScreen mainScreen] scale] == 2.0){      // @2x
        UIGraphicsBeginImageContextWithOptions(CGSizeMake(_signImage.size.width * _imageScale, _signImage.size.height * _imageScale), NO, 2.0);
    }else if([[UIScreen mainScreen] scale] == 3.0){ // @3x ( iPhone 6plus 、iPhone 6s plus)
        UIGraphicsBeginImageContextWithOptions(CGSizeMake(_signImage.size.width * _imageScale, _signImage.size.height * _imageScale), NO, 3.0);
    }else{
        UIGraphicsBeginImageContext(CGSizeMake(_signImage.size.width * _imageScale, _signImage.size.height * _imageScale));
    }
    // 绘制改变大小的图片
    [_signImage drawInRect:CGRectMake(0, 0, _signImage.size.width * _imageScale, _signImage.size.height * _imageScale)];
    // 从当前context中创建一个改变大小后的图片
    _signImage = UIGraphicsGetImageFromCurrentImageContext();
    // 使当前的context出堆栈
    UIGraphicsEndImageContext();
    // 返回新的改变大小后的图片
    
    return self.signImage;
}

#pragma mark 截屏
- (UIImage *)captureWithView:(UIView *)view
{
    CGRect screenRect = [view bounds];
    UIGraphicsBeginImageContext(screenRect.size);
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    [view.layer renderInContext:ctx];
    UIImage * image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return image;
}

6.调用,调用比较简单了直接上代码了,这里写的例子是A控制器跳转到B控制器,在B中签名,并把图片返回到A显示
// A控制器.m代码
@implementation ViewController
{
    UIImageView *showImageView;
}
- (void)viewDidLoad {
    [super viewDidLoad];
    
    self.view.backgroundColor = [UIColor cyanColor];
    
    showImageView = [[UIImageView alloc] initWithFrame:self.view.frame];
    [self.view addSubview:showImageView];
    showImageView.contentMode = UIViewContentModeScaleAspectFit;
}

- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
{
    CJDrawViewController *VC = [CJDrawViewController new];
    VC.delegate = self;
    [self presentViewController:VC animated:YES completion:nil];
}
// 代理方法
- (void)returnImage:(UIImage *)signImage
{
    showImageView.frame = CGRectMake(0, 0, signImage.size.width, signImage.size.height);
    showImageView.center = self.view.center;
    showImageView.image = signImage;
}

// B控制器.h代码
@protocol CJDrawViewControllerDelegate <NSObject>
// 返回签名图片
- (void)returnImage:(UIImage *)signImage;

@end

@interface CJDrawViewController : UIViewController

@property (nonatomic, assign) id<CJDrawViewControllerDelegate> delegate;

@end
B控制器.m代码
#import "CJDrawViewController.h"
#import "CJSignatureView.h"

@interface CJDrawViewController ()

@property (nonatomic, strong) CJSignatureView *signView;

@end

@implementation CJDrawViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    self.view.backgroundColor = [UIColor yellowColor];
    [self.view addSubview:self.signView];
    [self createView];
}
#pragma mark 初始化
- (CJSignatureView *)signView
{
    if (!_signView) {
        _signView = [[CJSignatureView alloc] initWithFrame:CGRectMake(0, self.view.frame.size.height/2.0-200/2.0, self.view.frame.size.width, 200)];
        _signView.lineColor = [UIColor redColor];
        _signView.lineWidth = 2;
        _signView.imageScale = 0.5;
        [_signView startDraw];
    }
    return _signView;
}
#pragma mark 创建按钮
- (void)createView
{
    NSArray *titleArr = @[@"返回", @"重置", @"保存"];
    
    CGFloat btnW = self.view.frame.size.width/3.0;
    for (int i = 0; i < titleArr.count; i++) {
        UIButton *btn = [UIButton buttonWithType:UIButtonTypeSystem];
        btn.frame = CGRectMake(btnW*i, self.view.frame.size.height-40, btnW, 40);
        [self.view addSubview:btn];
        [btn setTitle:titleArr[i] forState:UIControlStateNormal];
        [btn addTarget:self action:@selector(btnAction:) forControlEvents:UIControlEventTouchUpInside];
        btn.tag = 100+i;
    }
}
#pragma mark 按钮点击方法
- (void)btnAction:(UIButton *)btn
{
    switch (btn.tag) {
        case 100:
            [self dismissViewControllerAnimated:YES completion:nil];
            break;
        case 101:
            [_signView resetDraw];
            break;
        case 102:
            [_signView saveDraw];
            if ([self.delegate respondsToSelector:@selector(returnImage:)]) {
                [self.delegate returnImage:_signView.signImage];
            }
            [self dismissViewControllerAnimated:YES completion:nil];
            break;
            
        default:
            break;
    }
}

这样,一个简单的签名就封装好了,里面有许多的东西是可以根据具体需求修改的。

结语:限于水平,本文只写了一些基本用法和注意事项,如果文中存在错误请指出,我会及时修改。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,423评论 6 491
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,147评论 2 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,019评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,443评论 1 283
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,535评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,798评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,941评论 3 407
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,704评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,152评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,494评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,629评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,295评论 4 329
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,901评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,742评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,978评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,333评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,499评论 2 348

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,761评论 25 707
  • ¥开启¥ 【iAPP实现进入界面执行逐一显】 〖2017-08-25 15:22:14〗 《//首先开一个线程,因...
    小菜c阅读 6,365评论 0 17
  • https://github.com/xiaochaofeiyu/YSCAnimation
    精神病患者link常阅读 392评论 0 0
  • 刚考完研,在家一边放寒假一边等消息,整天无所事事,吃饭睡觉上厕所看剧是我的日常,回不到之前备研充实的状态……怎么办...
    fooooooooour阅读 178评论 0 0
  • 我们互相忘记 在关注和被关注的细节里 手机推送微博被你关注之后点进去往往都是幻影 好多时候我都觉得自己看得真切 但...
    宇宙无敌美阅读 421评论 1 0