开门见山,先看效果图:
主体 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地址
网友评论