写一个iOS图片编辑器

作者: wu大维 | 来源:发表于2017-04-17 10:40 被阅读2964次

    图片编辑器主要包括:画笔,马赛克,裁剪,添加文字表情,滤镜等功能。

    WechatIMG2.jpeg

    图片编辑简介

    iOS图片编辑.png

    编辑页面是盖在图片上的一层操作面板,选择不同的bar来处理不同的编辑场景

    视图层级图

    WechatIMG3.jpeg WechatIMG10.jpeg

    马赛克处理为例:在编辑页面上盖里一个masaicView,masaicView分为上下2层,下面一层为加了CIPixellate滤镜的图层,上面一层为原始图片。虽然手指的移动,移动的路径变透明就显示出底层的马赛克效果。用户操作时感觉就像随手机移动而变成马赛克。最后截屏保存。

    UML 架构图

    Class Diagram.png

    1.每一个编辑功能我称为一个:tool,如DrawTool,继承ImageToolBase。ImageEditorVC可以视作一个大的tool,它里面包含裁剪,马赛克,编辑都子工具。 所有的tool都必须实现ImageToolProtocol协议。

    2.底部的工具栏是一个toolbarItem的集合,每一个按钮,或者说一个编辑功能都是一个item

    3.无论是toolbar还是tool,他们的信息都保存为一个ImageToolInfo对象

    手势识别

    我这里的处理是在每个编辑组件中处理的,好的做法应该是:手势引擎既要『大一统』式地管理,又要与具体响应手势的元素视图进行解耦,做法就是统一接口,制定标准。可以配置元素对象来实现对手势响应的规则,更加灵活自如,而且零耦合。

    最后

    本文理论参考腾讯小哥的多媒体编辑模块架构设计

    关于滤镜方面,我用的是CIFilter,好的做法是适应GPU加速渲染
    有兴趣的可以学习:GPUImage

    imageEditorViewController实现UIScrollViewDelegate,因为图片裁剪后需要调整大小。需要动态调整maximumZoomScale,minimumZoomScale ,ZoomScale。我是直接搬的CLImageEditor

    没错,我就是代码的搬运工😢

    在图片上添加icon,并拖动

    WechatIMG4.jpeg

    最后附上所有源代码下载GitHub:ios图片编辑器

    相关文章

      网友评论

      • Topus:导入WWImageEdit 之后会报警告:Block implicitly retains 'self'; explicitly mention 'self' to indicate this is intended behavior,我想问下怎么把它弄成静态库呢
        wu大维:@Topus 把代码拉下到自己编个静态库就行了,网上很多脚本的
        wu大维:@Topus 很久没维护了,iOS系统升级了会有警告,你改成@property应该就可以了
      • Topus:这个WWImageEdit是你自己写得库吗
      • b2d1df152e2b:竟然用小鞠的图,难道你是...嘿嘿
        wu大维:@绝版青春Sandy 嘿嘿 我就是...
      • 86d83d1dbf8d:你好 我想问下自定义文字的是怎么写的
        wu大维:@LolyL 简单来说就是加个label,写几个字,然后截屏保存
      • 龙_8252:求教大神,如果想做到撤销上一步的功能,包括马赛克以及划线,能否提供一下思路,感激不尽
        MoShengLive:有撤销代码吗
        wu大维:@龙_8252 把每一次修改存下来,存一个缓存数组,撤销的时候拿缓存的修改显示。返回的时候要记得销毁缓存
      • taobingzhi:你好 pod search wwimageedit 找不到你这个库
        taobingzhi:@wu大维 也一样pod不下来 说没有这个库
        taobingzhi:@wu大维 说找不到这个库
        wu大维:pod ‘WWImageEdit’
      • Look2021:你好,我发现在iPhone6p,iOS11使用马赛克的时候,连续涂马赛克,很快程序就会崩溃。请问这是哪里的问题,可以怎么修改?
        Look2021:@wu大维 你好,是MosaicView里的- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event这个方法有问题
        Look2021:@wu大维 好的
        wu大维:@景城Cc 确实有个内存泄漏,你用Leaks调一下,最近太忙,没空
      • 不懂后悔:请问下。我发现多次马赛克编辑马赛克像素大小会叠加。是哪儿的设置问题么?
        不懂后悔:@wu大维 这个问题应该怎么处理?能否处理下。谢谢。
        wu大维:是有这个问题,之前没有考虑到
      • 白马笑西风:改了一些东西,很好用,感谢
      • MTDeveloper:又来麻烦大神了:smile: ,添加文字的时候字体颜色如何设置?还有字体大小,是不是可以用添加emotion表情和draw里面的那一套设置字体大小和字体颜色??
        MTDeveloper:@wu大维 嗯嗯 谢谢了:blush:
        wu大维:@iOSDeveloper110 KKTextView里面InitWithTool方法中: [_label setTextColor:[UIColor blueColor]]; 是最后lable显示的颜色。KKtextTool :showTextEditView中[_textEditView setTextColor:[UIColor whiteColor]]; 是编辑view的字体颜色
      • MTDeveloper:n你好 我没有安装cocopods的话 会报错 运行不起来 手动还需要添加哪些东西吗 ,谢谢
        MTDeveloper:@wu大维 OK:smile:
        wu大维:@iOSDeveloper110 你自己建一个工程 把类拖进去

      本文标题:写一个iOS图片编辑器

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