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

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实现控制屏幕常亮不变暗的方法示例

    iOS实现控制屏幕常亮不变暗的方法示例

    最近在工作中遇到了要将iOS屏幕保持常亮的需求,所以下面这篇文章主要给大家介绍了关于利用iOS如何实现控制屏幕常亮不变暗的方法,文中给出了详细的...

    随风13332021-04-02
  • IOSiOS中滑动控制屏幕亮度和系统音量(附加AVAudioPlayer基本用法和Masonry简单使用)

    iOS中滑动控制屏幕亮度和系统音量(附加AVAudioPlayer基本用法和

    这篇文章主要介绍了iOS中滑动控制屏幕亮度和系统音量(附加AVAudioPlayer基本用法和Masonry简单使用)的相关资料,需要的朋友可以参考下...

    CodingFire13652021-02-26
  • IOS详解iOS中多个网络请求的同步问题总结

    详解iOS中多个网络请求的同步问题总结

    这篇文章主要介绍了详解iOS中多个网络请求的同步问题总结,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧...

    liang199111302021-03-15
  • IOSiOS自定义UICollectionViewFlowLayout实现图片浏览效果

    iOS自定义UICollectionViewFlowLayout实现图片浏览效果

    这篇文章主要介绍了iOS自定义UICollectionViewFlowLayout实现图片浏览效果的相关资料,需要的朋友可以参考下...

    jiangamh8882021-01-11
  • IOSiOS中UILabel实现长按复制功能实例代码

    iOS中UILabel实现长按复制功能实例代码

    在iOS开发过程中,有时候会用到UILabel展示的内容,那么就设计到点击UILabel复制它上面展示的内容的功能,也就是Label长按复制功能,下面这篇文章主要给大...

    devilx12792021-04-02
  • IOSiOS开发之视图切换

    iOS开发之视图切换

    在iOS开发中视图的切换是很频繁的,独立的视图应用在实际开发过程中并不常见,除非你的应用足够简单。在iOS开发中常用的视图切换有三种,今天我们将...

    执着丶执念5272021-01-16
  • IOSiOS开发技巧之状态栏字体颜色的设置方法

    iOS开发技巧之状态栏字体颜色的设置方法

    有时候我们需要根据不同的背景修改状态栏字体的颜色,下面这篇文章主要给大家介绍了关于iOS开发技巧之状态栏字体颜色的设置方法,文中通过示例代码...

    梦想家-mxj8922021-05-10
  • IOSiOS中MD5加密算法的介绍和使用

    iOS中MD5加密算法的介绍和使用

    MD5加密是最常用的加密方法之一,是从一段字符串中通过相应特征生成一段32位的数字字母混合码。对输入信息生成唯一的128位散列值(32个字符)。这篇文...

    LYSNote5432021-02-04