iOS中实现一个手写板,类似签名那样的效果,简单实现。

原创文章
声明:作者声明此文章为原创,未经作者同意,请勿转载,若转载,务必注明本站出处,本平台保留追究侵权法律责任的权利。
全栈老韩
全栈工程师,擅长iOS App开发、前端(vue、react、nuxt、小程序&Taro)开发、Flutter、React Native、后端(midwayjs、golang、express、koa)开发、docker容器、seo优化等。

下面的代码是好多年前的,仅供参考:
先展示一下这个文件的.h文件中的代码:

复制代码
//
//  HandSignatureView.h
//  badminton
//
//  Created by 韩卫星 on 2017/8/1.
//  Copyright © 2017年 huayu. All rights reserved.
//

#import <UIKit/UIKit.h>

/**
 “手写签名”视图
 */
@interface HandSignatureView : UIView

/*
 手势涂鸦或者绘制的颜色
 */
@property (nonatomic,strong)UIColor *penColor;

/**
 清楚“手写签名”
 */
- (void)clear;

/*
 获取当前的屏幕绘制的图片
 */
- (UIImage *)getHandSignatureImage;

@end


//

然后是.m中的代码,如下:

复制代码
//
//  HandSignatureView.m
//  badminton
//
//  Created by 韩卫星 on 2017/8/1.
//  Copyright © 2017年 huayu. All rights reserved.
//

#import "HandSignatureView.h"

@interface HandSignatureView()

@property (nonatomic,strong)UIBezierPath *oneDrawPath;         //记录某一次的路径绘制
@property (nonatomic,strong)NSMutableArray *allPathArray;  //用来记录当前触摸的所有点

@property (nonatomic, copy) NSMutableArray *ptsArr;

@end

@implementation HandSignatureView

// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect {
    // Drawing code
    
    //将数组中的所有的点绘制出来
    for (UIBezierPath *path in self.allPathArray) {
        
        UIColor *color = nil;
        if (_penColor) {
            color =_penColor;
        }else{
            color = [UIColor blackColor];
        }
        [color set];
        [path stroke];
    }
}

/*
 每次触摸屏幕,生成一个记录路径的UIBezierPath
 */
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
    UITouch *touch = [touches anyObject];
    CGPoint point = [touch locationInView:self];
    _oneDrawPath = [UIBezierPath bezierPath];
    [_oneDrawPath setLineWidth:5];
    [_oneDrawPath moveToPoint:point];
    [self.allPathArray addObject:_oneDrawPath];
    
    NSValue *ptValue = [NSValue valueWithCGPoint:point];
    [self.ptsArr addObject:ptValue];
}
/*
 结合生成的path,将移动轨迹绘制出来
 */

- (void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
    UITouch *touch = [touches anyObject];
    CGPoint point = [touch locationInView:self];
    [_oneDrawPath addLineToPoint:point];
    [self setNeedsDisplay];
    
    NSValue *ptValue = [NSValue valueWithCGPoint:point];
    [self.ptsArr addObject:ptValue];
}

- (void)clear {
    [_allPathArray removeAllObjects];
    [self setNeedsDisplay];
}

/*
 根据当前view的大小,从上下文内容得出图片
 */
- (UIImage *)getHandSignatureImage{
    
    // 如果没有笔画痕迹,图片为nil
    if(self.ptsArr.count == 0) {
        return nil;
    }
    
    // 签名笔划所在的矩形框(笔画的最左点,最高点,最右点,最低点)
    CGRect rect = [self getPenZoneRect];
    
    UIGraphicsBeginImageContext(self.bounds.size);
    
    CGContextRef context = UIGraphicsGetCurrentContext();
    
    //设置当前绘图环境到矩形框(主要是截取签名文笔所在矩形框)
    CGContextClipToRect(context, rect);
    
    [self.layer renderInContext:context];
    
    UIImage *theImage = UIGraphicsGetImageFromCurrentImageContext();
    
    
    UIGraphicsEndImageContext();
    return theImage;
}

/*
 将存储的数组初始化
 */
- (NSMutableArray *)allPathArray{
    if (!_allPathArray) {
        _allPathArray = [NSMutableArray array];
    }
    return _allPathArray;
}

- (NSMutableArray *)ptsArr {
    if(!_ptsArr) {
        _ptsArr = [NSMutableArray array];
    }
    return _ptsArr;
}

/**
 获取到笔画所在的矩形区域
 */
- (CGRect)getPenZoneRect {
    
    NSValue *firstPtValue = [self.ptsArr firstObject];
    CGPoint firstPt = [firstPtValue CGPointValue];
    
    float leftPtX = firstPt.x;
    float topPtY = firstPt.y;
    float rightPtX = firstPt.x;
    float bottomPtY = firstPt.y;
    
    for(int i = 0; i < self.ptsArr.count; i++) {
        NSValue *value = self.ptsArr[i];
        CGPoint pt = [value CGPointValue];
        
        if(pt.x < leftPtX) {
            leftPtX = pt.x;
        }
        
        if(pt.x > rightPtX) {
            rightPtX = pt.x;
        }
        
        if(pt.y < topPtY) {
            topPtY = pt.y;
        }
        
        if(pt.y > bottomPtY) {
            bottomPtY = pt.y;
        }
    }
    
    return CGRectMake(leftPtX,
                      topPtY,
                      rightPtX - leftPtX,
                      bottomPtY - topPtY);
}


@end

暂无评论,快来发表第一条评论吧