当前位置： 移动技术网 > 移动技术>移动开发>IOS > iOS实现裁剪框和图片剪裁功能

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

2019年07月24日  | 移动技术网移动技术  | 我要评论

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

-(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的交集部分的面积判断是否超出父视图的。
四个边的控制代码：

-(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;
  }

 }

}

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

-(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，不知道是否还有其他好的方法，有的话可以一起交流一下。

图片剪裁部分
代码如下：

-(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的坐标系上下颠倒，需对坐标系处理如下：

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

看看效果：

剪裁之后的图片：

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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网