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