iOS 搭建“美图(贴纸，涂鸦，文字，滤镜)”系列
2017-08-16 本文已影响361人
whbalzac
开门见山，先看效果图：
StoryMaker.gif
小姐姐有没有很好看！是不是该点一波赞！（无耻，滚粗。。）
可能你已经认出来了，低调低调。。回归正题，咳咳。。
(￣ε(#￣)╰╮o(￣皿￣///)
主界面UI构成：
主界面.png
- 主体 ImageView ，初始化的时候加载初始图
- ToolsView，上方"Close"和"Next"按钮，下方四个功能按钮，从左到右分别是"贴纸 | 涂鸦 | 文字 | 滤镜"
贴纸 | 涂鸦 | 文字 | 滤镜.png
大致的流程，一开始，四个功能 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画出来的，而且偷偷地告诉你，美图秀秀的涂鸦实现也是类似的。当你打开涂鸦界面，先将你右姑娘的食指按下去，别动，然后放下你左姑娘的食指，你会发现，一条直线，缘，妙不可言。(￣︶￣)> <(￣︶￣)
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
- (void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
- (void)touchesEnded:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
论如何在涂鸦中划出直线.png
- 虽然贴纸和文字都是 addSubview 到 ImageView 上，属于平级，但，你点击会优先选中后者加上去的。因为所有的贴纸View都保存在
@property (nonatomic, strong) NSMutableArray <UIView *> *stickerViewArray;
里，而且是逆序添加进去，所以当点击产生，顺序遍历
stickerViewArray，假如点击在 View 中，则停止遍历。
不足点：
- 贴纸和文字放大后，border 和删除都一同放大，其丑无比，若有童鞋知道解决方法，欢迎告知~
一起放大的border.和删除png
- 滤镜通过CPU来针对像素点处理，内存消耗太多，后续换其他方式。
- 目前没有撤销操作，确实有点尴尬。正在构思中。。（～￣￣～）
WHStoryMaker接入说明：
- 在你需要用到 WHStoryMaker 的时候引用 WHStoryMakerHeader.h 头文件，StoryMakeImageEditorViewController 就是你需要的VC。
-
StoryMakeImageEditorViewController 只提供一种初始化方法
- (instancetype)initWithImage:(UIImage *)image;
在初始化的时候传入 Image。 - WHStoryMaker 依赖了 Masonry，写的时候习惯性就用了，受“毒害”太深，哈哈。。￣￣
Github链接:
