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
发布于2024-01-30 15:16:15
浏览量27·
暂无评论,快来发表第一条评论吧