WWImageEdit 0.1.1

WWImageEdit 0.1.1

测试已测试
Lang语言 Obj-CObjective C
许可证 MIT
发布最后发布2017年12月

[wuwei] 维护。



  • 作者:
  • wuwei

WWImageEdit

基本的图像编辑功能,画笔,马赛克,裁剪,添加文字表情
演示运行:修改 bundleID 和 signing,运行 xcworkspace 文件(虽然并没什么卵用)

用法

  • (void)imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary *)info
    {

    UIImage *image = [info objectForKey:UIImagePickerControllerOriginalImage];

    KKImageEditorViewController *editor = [[KKImageEditorViewController alloc] initWithImage:image delegate:self];

    [picker pushViewController:editor animated:YES];

}

WechatIMG2.jpeg

####图片编辑简介

iOS图片编辑.png

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

####视图层级图
WechatIMG3.jpeg

WechatIMG10.jpeg

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

####UML 架构图

Class Diagram.png

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

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

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

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

####最后
本文理论参考腾讯小哥的[多媒体编辑模块架构设计](http://yulingtianxia.com/blog/2016/12/29/Multimedia-Edit-Module-Architecture-Design/)

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

imageEditorViewController 实现UIScrollViewDelegate,因为图片裁剪后需要调整大小。需要动态调整maximumZoomScale,minimumZoomScale ,ZoomScale。我是直接搬的CLImageEditor
####没错,我就是代码的搬运工😢

打着加班的名义在写博客,该撤了。😊
源代码我会在下一篇【写一个iOS图片编辑器(二)】给出:在图片上添加 icon,并拖动

WechatIMG4.jpeg

简书地址:wu大维的简书