iOS如何实现图片和视频的涂鸦、贴图、马赛克、高斯笔涂鸦等技术

一: 图片处理理部分:

1, 图片的涂鸦:

项目演示:

实现的主要思路路是利利 用 贝塞尔绘制原理理:

创建 一个 IJSIPanDrawingView 所有的操作都将在这个UIView上 面完成创建model IJSIPath 用于绘制

首先在初始化 方法中创建 一个 手势: 在 手势的 方法中实现下 面的代码核 心代码:

创建 IJSIPath 类 提供 属性和 添加初始化 添加点的 方法 绘制 方法等初始化 方法

先看 IJSIPath 这个类实现 主要的实现思路路就是 贝塞尔划线的思想

下 面我们来看如何在 IJSIPanDrawingView 这个UIView中调 用这个 方法, 首先创建 一个 手势 并在 手势的 方法中实现;

由于是在UIView中我们不采取 在 -(void)draw 方法中绘制 所以我们需要创建上下 文,并将资源绘制成 一张图 片返回给外 面,具体的代码看下 面的实现

至此绘制的 大招已经完成,如果你想开接 口给外 面你可以直接绘制 self.drawingView.image 就可以如:

2, 特图和 文字的实现

贴图和 文字的实现原理其实是 一样的,这里我们只讲如何实现贴图:

主要的 大体思想就是两张图绘制到 一起, 表情图 片有很多的操作 比如 画边框 移动 旋转 删除 隐藏划线框等等这样的 这个不不在这 里里详细介绍,给位客观可以看SDK 的具体实现

思路路分析:

首先我们会把 贴图或者 文字封装到 IJSIImputTextExportView( 文字) IJSIMapViewExportView(贴图),其实这个可以理理解成就是 一个UIView 但是这个UIView 里里 面有其他不不同的属性

因为我们的这个项 目是直接对外显示,所有我们选择在controller 的view上操作, 我们再controller上创建 一个 UIImageView 名字叫drawingView, 然后把上 面的UIView 全部添加到这个UIImageView上,下 面就是核 心的代码,这个代码决定这个绘制的结果 代码如下:

核 心的思路就是选择 用的 UIKit 提供的绘制方法, 一个图层 一个图层的去绘制

[textImg drawInRect:CGRectMake( , , , )];

绘图部分基本完成,下面我们来讲 马赛格绘制和 高斯模糊画笔设置

3, 马赛克绘制

我们先说说实现思路:

首先我们需要获取 一张已经制作好的 马赛克图, 这 里里我们不研究 马赛克的算法,各位客官想研究 马

赛克的算法 请看IJSExtension UIImage的分类

下 面我们假设已经获取好了了UIimage

首先看图层

首先我们需要创建 一个UIImage 显示完整的图 片在,主要是在没有进行马赛克蒙版的是需要给 用户已经显示的错觉,

下 面是内容的核 心:

创建 一个 IJSImageMosaicView 集成 自UIView

我们配置他的UI

1, 首先需要创建 一个 CALayer 这 一层主要 用于显示上 面已经获取好的 马赛克图

2, 我们再创建 一个 CAShapeLayer 这个主要是为了在拖动的时候绘制不规则的图形设置

3, 最关键的 一点就是 将 CAShapeLayer 对象设置给 CALayer 的mask 属性 CALayer 是 一个

非常 牛逼的属性本质还是 一个 CALayer

因为mask是 一个层， 而且它最重要的是它的轮廓，所以mask如果是CALayer 时，常设置它的contents属性来定义它的外观，如果mask是CAShapeLayer的时候常会设置它的path属性，让它和UIBezierPath来结合使 用定义它的外观 我们这边的思路就是根据 CAShapeLayer 来实现这个出来 方案

具体代码如下:

接下来就是 通过 CAShapeLayer 的path 属性进行不规则额路径绘制等等核 心的代码只有 一句句话:

CGMutablePathRef path = (__bridge CGMutablePathRef)([array objectAtIndex:i]);

self.shapeLayer.path = path;

这中间会牵扯到 路路径的存储等等逻辑,过程不复杂这 里不仔细讲解下 面我们来谈谈 CAShapeLayer 的path

我们知道绘制图像 一般有下 面 几种过程

1,调 用CGContextBeginPath

2,调 用CGContextMoveToPoint来设置路径的起点

3,调 用CGPathAddLineToPoint, CGPathAddArc, CGPathAddRect等函数添加路路径

4,最后，我们需要调 用fill或stroke来绘制出这些路径或图形

当我们绘制路径时，Path的信息就会被Graphics context重置。

如果我们想要保存path信息，并多次使 用它，我们就可以 用到CGPathCreatMutable申请路径,本

文技术核 心就是这种方案

在开始touch的时候:

CGPathMoveToPoint(self.path, NULL, point.x, point.y);

在touch 过程中

CGPathAddLineToPoint(self.path, NULL, point.x, point.y); 然后

CGMutablePathRef path = (__bridge CGMutablePathRef)([array objectAtIndex:i]);

self.shapeLayer.path = path;

到此整个 马赛克的逻辑已经处理完成

高斯画笔的实现

下 面我们再来讲讲 高斯画笔的实现

高斯画笔的实现和之前涂鸦的思路路基本 一样 都是利用链接点的 方式实现,我这 里换了 更底层的 方式来处理理:

首先需要获取 一个 高斯图,这个 高斯的获取 方法这 里不仔细讲解

首先我们将点的集合放到 一个数组,组成 一个路径集合,我们再讲路径的集合放到 一个数组中, 目的是为了有撤销的操作等等

最后在

到此图 片处理部分基本结束

下 面我们再来讲讲 怎么处理理视频

视频处理理

这部分我们先来说说裁剪,这部分的内容封装到了了 IJSEditSDK 这个sdk 里里 面

首先我们先看看视频具体的操作

1 创建AVMutableComposition对象来添加视频 音频资源的

AVMutableComposition *mixComposition = [[AVMutableComposition alloc] init];

2设置采集区域

3, 我们知道视频有 视频轨道和 音频轨道 下 面的操作就是将这连个轨道合并

通常上 面的操作返回的视频,视频的转向都有问题,所以都需要做转向处理转向的代码给位老铁去sdk 里面看吧

最后 一步,导出视频, 导出视频的对象是 AVAssetExportSession 对这个对象进 行属性设置处理就可以了

到此视频裁剪就ok了,这个处理的思路 一般处理的是时间规定的, 比如从第 几秒裁剪到第 几秒

视频的涂鸦贴图和加 水印

这部分操作 大致的思路路是 将 一张处理好的图 片等 比例 添加到视频的图 片的处理和上面图片的处理一样的

核 心代码

videoComposition.animationTool = [AVVideoCompositionCoreAnimationTool videoComposit

ionCoreAnimationToolWithPostProcessingAsVideoLayer:videoLayer inLayer:parentLayer];

第 一个参数

重要的 一步是 首先创建 一个承载的视图层: CALayer *parentLayer

我们所有的操作 比如加图加 文字 加边框等等都是在这个 calayer上完成,然后将我们的这个parentLayer添加到 创建的 CALayer *videoLayer上

到此整片文档的技术要点都已经分析完毕,思路也已经理清楚,各位大神可以看看SDK 点赞 一波了了

https://github.com/wangjinshan/IJSPhotoSDK

文/Mob移动开发者平台