美文网首页
iOS 美图(贴纸,涂鸦,文字,滤镜)

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

作者: 在路上浅谈管理 | 来源:发表于2019-06-14 17:54 被阅读0次

    开门见山,先看效果图:

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

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

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

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

    ImageView

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

    ImageView

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

    ImageView

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

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

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

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

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

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

    UIPinchGestureRecognizerUIRotationGestureRecognizerUIPanGestureRecognizer,且通过delegate回调放缩和选择可以同时识别。

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

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

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

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

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

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

    StoryMakeImageEditorViewController只提供一种初始化方法

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

    在初始化的时候传入Image

    本文demo:demo地址

    参考文章:iOS 搭建“美图(贴纸,涂鸦,文字,滤镜)”系列 - 简书

    相关文章

      网友评论

          本文标题:iOS 美图(贴纸,涂鸦,文字,滤镜)

          本文链接:https://www.haomeiwen.com/subject/duopfctx.html