服务器之家:专注于服务器技术及软件下载分享
分类导航

PHP教程|ASP.NET教程|Java教程|ASP教程|编程技术|正则表达式|C/C++|IOS|C#|Swift|Android|VB|R语言|JavaScript|易语言|vb.net|

服务器之家 - 编程语言 - IOS - iOS实现裁剪框和图片剪裁功能

iOS实现裁剪框和图片剪裁功能

2021-01-12 15:34jiangamh IOS

这篇文章主要为大家详细介绍了iOS实现裁剪框和图片剪裁功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

图片处理中经常用的图片剪裁,就是通过剪裁框确定图片剪裁的区域,然后剪去该区域的图片,今天实现了一下,其实图片剪裁本身不难,主要剪裁框封装发了点时间,主要功能可以拖动四个角缩放,但不能超出父视图,拖动四个边单方向缩放,不能超出父视图,拖动中间部分单单移动,不改变大小,不能超出父视图。下面列举一些主要代码。
四个角的处理代码:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
-(void)btnpangesture:(uipangesturerecognizer*)pangesture
{
 uiview *vw = pangesture.view;
 cgrect oldframe = self.frame;
 cgrect oldintersectrect = cgrectintersection(self.frame, self.superview.bounds);
 
 cgpoint transport = [pangesture translationinview:vw];
 if (vw.tag == 4) {
  self.width = self.preframe.size.width + transport.x;
  self.height = self.preframe.size.height + transport.y;
 }
 else if(vw.tag == 3)
 {
  self.x = self.preframe.origin.x + transport.x;
  self.width = self.preframe.size.width - transport.x;
  self.height = self.preframe.size.height + transport.y;
 }
 else if(vw.tag == 2)
 {
  self.width = self.preframe.size.width + transport.x;
  self.y = self.preframe.origin.y + transport.y;
  self.height = self.preframe.size.height - transport.y;
 }
 else if(vw.tag == 1)
 {
  self.x = self.preframe.origin.x + transport.x;
  self.width = self.preframe.size.width - transport.x;
  self.y = self.preframe.origin.y + transport.y;
  self.height = self.preframe.size.height - transport.y;
 }
 if (pangesture.state == uigesturerecognizerstateended) {
  self.preframe = self.frame;
 }
 if (self.width < minwidth || self.height < minheight) {
  self.frame = oldframe;
 }
 cgrect newframe = self.frame;
 if (newframe.size.width * newframe.size.height > oldframe.size.height * oldframe.size.width) {
 
  cgrect newintersectrect = cgrectintersection(self.frame, self.superview.bounds);
  if (newframe.size.width * newframe.size.height > newintersectrect.size.width * newintersectrect.size.height) {
   self.frame = oldframe;
  }
 }
 self.precenter = self.center;
}

我是通过视图于父视图的frame的交集部分的面积判断是否超出父视图的。
四个边的控制代码:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
-(void)viewpangesture:(uipangesturerecognizer*)pangesture
{
 uiview *vw = pangesture.view;
 cgrect oldframe = self.frame;
 cgrect oldintersectrect = cgrectintersection(self.frame, self.superview.bounds);
 
 cgpoint transport = [pangesture translationinview:vw];
 if (vw.tag == 1) {
  self.y = self.preframe.origin.y + transport.y;
  self.height = self.preframe.size.height - transport.y;
 }
 else if(vw.tag == 2)
 {
  self.x = self.preframe.origin.x + transport.x;
  self.width = self.preframe.size.width - transport.x;
 }
 else if(vw.tag == 3)
 {
  self.height = self.preframe.size.height + transport.y;
 }
 else if(vw.tag == 4)
 {
  self.width = self.preframe.size.width + transport.x;
 }
 if (pangesture.state == uigesturerecognizerstateended) {
  self.preframe = self.frame;
 }
 if (self.width < minwidth || self.height < minheight) {
  self.frame = oldframe;
 
 }
 self.precenter = self.center;
 cgrect newframe = self.frame;
 if (newframe.size.width * newframe.size.height > oldframe.size.height * oldframe.size.width) {
 
  cgrect newintersectrect = cgrectintersection(self.frame, self.superview.bounds);
  if (oldintersectrect.size.width * oldintersectrect.size.height >= newintersectrect.size.width * newintersectrect.size.height) {
   self.frame = oldframe;
   self.precenter = self.precenter;
  }
 
 }
 
}

中间部分移动的控制代码:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
-(void)contentviewpangestureaction:(uipangesturerecognizer*)pangesture
{
 cgpoint transport = [pangesture translationinview:self];
 cgrect oldframe = self.frame;
 cgrect oldintersectrect = cgrectintersection(self.frame, self.superview.bounds);
 cgfloat oldmj = oldintersectrect.size.width * oldintersectrect.size.height;
 
 self.center = cgpointmake(self.precenter.x + transport.x, self.precenter.y + transport.y);
 
 if (pangesture.state == uigesturerecognizerstateended) {
 
  self.precenter = self.center;
 }
 cgrect newintersectrect = cgrectintersection(self.frame, self.superview.bounds);
 cgfloat newmj = newintersectrect.size.width * newintersectrect.size.height;
 
 if (newmj < oldmj) {
  self.frame = oldframe;
  self.precenter = self.center;
 }
}

剪裁框实现的核心代码如上,个人觉得最不好处理的是对超出父视图的控制,要保证不能超出父视图,个人主要用到的是通过子视图与父视图的交集部分的面积的改变来获知是否超出父视图,如果超出父视图,就会退到之前的frame,不知道是否还有其他好的方法,有的话可以一起交流一下。

图片剪裁部分
代码如下:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
-(void)cropimg
{
 cgrect cropframe = self.cropview.frame;
 cgfloat orgx = cropframe.origin.x * (self.img.size.width / self.imgview.frame.size.width);
 cgfloat orgy = cropframe.origin.y * (self.img.size.height / self.imgview.frame.size.height);
 cgfloat width = cropframe.size.width * (self.img.size.width / self.imgview.frame.size.width);
 cgfloat height = cropframe.size.height * (self.img.size.height / self.imgview.frame.size.height);
 cgrect croprect = cgrectmake(orgx, orgy, width, height);
 cgimageref imgref = cgimagecreatewithimageinrect(self.img.cgimage, croprect);
 
 cgfloat devicescale = [uiscreen mainscreen].scale;
 uigraphicsbeginimagecontextwithoptions(cropframe.size, 0, devicescale);
 cgcontextref context = uigraphicsgetcurrentcontext();
 cgcontexttranslatectm(context, 0, cropframe.size.height);
 cgcontextscalectm(context, 1, -1);
 cgcontextdrawimage(context, cgrectmake(0, 0, cropframe.size.width, cropframe.size.height), imgref);
 uiimage *newimg = uigraphicsgetimagefromcurrentimagecontext();
 cgimagerelease(imgref);
 uigraphicsendimagecontext();
 
 alassetslibrary *library = [[alassetslibrary alloc] init];
 [library toolwriteimagetosavedphotosalbum:newimg.cgimage metadata:nil completionblock:^(nsurl *asseturl, nserror *error) {
  if(error)
  {
   jglog(@"写入出错");
  }
 } groupname:@"相册名称"];
}

这里要注意一点cgcontextdrawimage这个函数的坐标系和uikit的坐标系上下颠倒,需对坐标系处理如下:

?
1
2
cgcontexttranslatectm(context, 0, cropframe.size.height);
cgcontextscalectm(context, 1, -1);

看看效果:

iOS实现裁剪框和图片剪裁功能

剪裁之后的图片:

iOS实现裁剪框和图片剪裁功能

以上就是本文的全部内容,希望对大家的学习有所帮助。

延伸 · 阅读

精彩推荐
  • IOSiOS布局渲染之UIView方法的调用时机详解

    iOS布局渲染之UIView方法的调用时机详解

    在你刚开始开发 iOS 应用时,最难避免或者是调试的就是和布局相关的问题,下面这篇文章主要给大家介绍了关于iOS布局渲染之UIView方法调用时机的相关资料...

    windtersharp7642021-05-04
  • IOSiOS通过逆向理解Block的内存模型

    iOS通过逆向理解Block的内存模型

    自从对 iOS 的逆向初窥门径后,我也经常通过它来分析一些比较大的应用,参考一下这些应用中某些功能的实现。这个探索的过程乐趣多多,不仅能满足自...

    Swiftyper12832021-03-03
  • IOSiOS 雷达效果实例详解

    iOS 雷达效果实例详解

    这篇文章主要介绍了iOS 雷达效果实例详解的相关资料,需要的朋友可以参考下...

    SimpleWorld11022021-01-28
  • IOS解析iOS开发中的FirstResponder第一响应对象

    解析iOS开发中的FirstResponder第一响应对象

    这篇文章主要介绍了解析iOS开发中的FirstResponder第一响应对象,包括View的FirstResponder的释放问题,需要的朋友可以参考下...

    一片枫叶4662020-12-25
  • IOSIOS 屏幕适配方案实现缩放window的示例代码

    IOS 屏幕适配方案实现缩放window的示例代码

    这篇文章主要介绍了IOS 屏幕适配方案实现缩放window的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要...

    xiari5772021-06-01
  • IOS关于iOS自适应cell行高的那些事儿

    关于iOS自适应cell行高的那些事儿

    这篇文章主要给大家介绍了关于iOS自适应cell行高的那些事儿,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的...

    daisy6092021-05-17
  • IOSiOS中tableview 两级cell的展开与收回的示例代码

    iOS中tableview 两级cell的展开与收回的示例代码

    本篇文章主要介绍了iOS中tableview 两级cell的展开与收回的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧...

    J_Kang3862021-04-22
  • IOSIOS开发之字典转字符串的实例详解

    IOS开发之字典转字符串的实例详解

    这篇文章主要介绍了IOS开发之字典转字符串的实例详解的相关资料,希望通过本文能帮助到大家,让大家掌握这样的方法,需要的朋友可以参考下...

    苦练内功5832021-04-01