移动开发

iOS开发类似于呱呱卡效果，手指划过的区域形成画笔。适用于取出部分图片（截图），如截取出图片中带文字的区域部分。

云博小周宇2 Mins Read

HKBrushShots

Demo下载地址:

类似于呱呱卡效果，手指划过的路线可以刮出痕迹。

??功能：

用于取出部分图片（截图），如截取出图片中带文字的区域部分。

??效果：

截取出图片中的“你就是我的全世界”文字区域的图片：

图片1

截取出图片中那只呆萌的小犀牛??：

图片2

更多截图效果：

图片3

图片4

??使用：

1 – 首先将工程中的“HKScreenShot”文件夹拷贝至项目中。
2 – 在需要使用的类中引入头文件：
#import "HKCropView.h" #import "HKLineView.h"
3 – 创建2个自定义view的对象：
@property (nonatomic, strong) HKCropView *cropView;
@property (nonatomic, strong) HKLineView *lineView;
4 – lineView作为覆盖view，用以下方式创建、并设置代理，view的frame需要根据具体的image调整暂时不定义：
// 画笔的属性在这里修改 - (HKLineView *)lineView { if (!_lineView) { _lineView = [[HKLineView alloc] init]; _lineView.backgroundColor = [UIColor blackColor]; _lineView.alpha = 0.5; _lineView.delegate = self; _lineView.currentLineColor = [UIColor whiteColor]; _lineView.currentLineWidth = 20.0; } return _lineView; }
5 – 遵守HKScreenShotImageViewRectDelegate代理：
<HKScreenShotImageViewRectDelegate>
6 – 接着获取图片，如果图片来源为系统相册，需要对图片方向做调整：

使用Demo中ViewController.m中的”fixOrientation:”方法修复。

// 修复照片的方向问题 - (UIImage *)fixOrientation:(UIImage *)aImage
7 – 在获取到图片image后，此时在显示这个image的imageView上将lineView覆盖上去：
    // 在原始图片上蒙上一层半透黑底背景 // originalImageView为显示选取image的imageView self.lineView.frame = self.originalImageView.frame; [self.view addSubview:self.lineView];
8 – 上几步操作完成后就可以在图片上刮出痕迹了。当结束刮图后、代理会返回刮出的区域rect：
// 代理回调手指划出图片的区域rect - (void)getScreenShotImageViewRect:(CGRect)rect { // 获取到需要截取图片的区域rect }
9 – 拿到从上一步获取的rect与选取的原始图片imageView后调用截图view的方法，就可以获取到所需要的图片了：
- (UIImage *)clipWithImageRect:(CGRect)clipRect clipImage:(UIImageView *)orgiImageView {
    if (!_cropView) {
        // 初始化
        _cropView = [[HKCropView alloc] initWithImageView:orgiImageView];
    }
    
    UIImage *newImage = [_cropView getClipImageRect:clipRect];
    [_cropView removeFromSuperview];
    _cropView = nil;
    return newImage;
}

??接口：

1 – HKCropView 裁剪图片类:
/**  初始化剪切视图   @param imageView 原始图片imageView  @return self  */ - (id)initWithImageView:(UIImageView *)imageView; /**  获取剪切图片  传入一个rect   @param newRect 需要截图的区域rect  @return 截取出来的图片image  */ - (UIImage *)getClipImageRect:(CGRect)newRect;
2 – HKLineManager 画笔属性类:
@property (nonatomic,assign) float lineWidth;//线宽 @property (nonatomic,strong) UIColor *lineColor;//线颜色 @property (nonatomic,strong) NSMutableArray *linePointsMArr;//线点数组
3 – HKLineView.h 画笔（手指）划动效果类:
/**  清空所有的线  */ -(void)cleanAllLine; /**  撤销上一条线  */ -(void)cleanBeforeLine;

??注意：

本demo为了简洁明了，直接选取的是正方形的图片。如果选择非正方形图片会导致变形，这样截图区域会不准确。

正确做法：应该在展示image时，根据image具体的比例调整“orgiImageView”的frame，这样截取出来的图片才是正确的。