iOS 美图(贴纸，涂鸦，文字，滤镜)

2019-06-14 本文已影响0人在路上浅谈管理

开门见山，先看效果图：

主体 ImageView ，初始化的时候加载初始图

ToolsView，上方"Close"和"Next"按钮，下方四个功能按钮，从左到右分别是"贴纸 | 涂鸦 | 文字 | 滤镜"

大致的流程，一开始，四个功能View初始化完毕，隐藏在屏幕的下发，hidden = YES，点击按钮，隐藏NO，做一个UIView的平移动画到屏幕正中心，结束编辑再次平移下去，隐藏YES。

每次选中贴纸，会在主界面生成一个支持多种手势的ImageView（不然咋旋转放大），然后addSubview到主体

ImageView

涂鸦结束，渲染一张ImageView，然后addSubview到主体

ImageView

添加文字（图中是一只颜文字拼出来的狗狗）后，同样会在主界面生成一个支持多种手势的Label，然后addSubview到主体

ImageView

滤镜，最开始是通过CPU来实现的，转换成像素然后滤镜计算得到。意味着有多少种滤镜要生成多少新图片，太耗内存，不推荐用，后续改良。

点击"Next"按钮用ImageView的Layer渲染出编辑后的新

Image，传递到后续，Demo中是保存到相册。

在这先说一下大致的实现思路，后续系列将详细介绍。

贴纸的模糊是UIVisualEffectView的毛玻璃效果。

贴纸和文字的放缩、选择、移动手势分别是

UIPinchGestureRecognizer、UIRotationGestureRecognizer、UIPanGestureRecognizer，且通过delegate回调放缩和选择可以同时识别。

涂鸦是通过下面三个方法，获取到手指位置，并实时通过UIBezierPath画出来的，而且偷偷地告诉你，美图秀秀的涂鸦实现也是类似的。

虽然贴纸和文字都是addSubview到ImageView上，属于平级，但，你点击会优先选中后者加上去的。因为所有的贴纸View都保存在

@property (nonatomic, strong) NSMutableArray <UIView *> *stickerViewArray;

里，而且是逆序添加进去，所以当点击产生，顺序遍历

stickerViewArray，假如点击在View中，则停止遍历。

在你需要用到WHStoryMaker的时候引用WHStoryMakerHeader.h头文件，StoryMakeImageEditorViewController就是你需要的VC。

StoryMakeImageEditorViewController只提供一种初始化方法

- (instancetype)initWithImage:(UIImage *)image;

在初始化的时候传入Image。

本文demo：demo地址