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

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

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

看看效果:

剪裁之后的图片:

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

(0)

相关推荐

  • 浅析iOS多视图滑动点击切换的集成

    前言 多视图滑动点击切换这个视图在很多App都有用到,我对这个View进行了封装,外界只需要调用一个接口,就能实现这个效果,使用方法和系统的tabbarController很相似. 外界只需要调用下面这个接口即可集成. /** * 添加一个子控制器 */ - (void)addSubItemWithViewController:(UIViewController *)viewController; HYTabbarView效果图如下 HYTabbarView可灵活配置一屏宽显示多少个标题,以及标

  • 详解IOS图片压缩处理

    前言  1.确图片的压缩的概念: "压" 是指文件体积变小,但是像素数不变,长宽尺寸不变,那么质量可能下降. "缩" 是指文件的尺寸变小,也就是像素数减少,而长宽尺寸变小,文件体积同样会减小.  2.图片压的处理 对于"压"的功能,我们可以使用UIImageJPEGRepresentation或UIImagePNGRepresentation方法实现, 如代码: //图片压 - (void)_imageCompression{ UIImage *

  • iOS中常见的视图和图片处理示例详解

    前言 众所周知在开发中不可避免的会遇到一些图片和视图的处理,我这里总结的这些只是我遇到的一些,以供下次使用查看.下面话不多说了,来一起看看详细的介绍吧. 图片的旋转 是UIImage的扩展类,直接使用UIImage的对象调用即可 UIImage #import <QuartzCore/QuartzCore.h> #import <Accelerate/Accelerate.h> @implementation UIImage (ImageRotate) -(UIImage *)im

  • 比较IOS开发中常用视图的四种切换方式

    在iOS开发中,比较常用的切换视图的方式主要有以下几种: 1. push.pop 使用举例(ViewController假设为需要跳转的控制器): [self.navigationController pushViewController:ViewController animated:YES]; //入栈,跳转到指定控制器视图 [self.navigationController popViewControllerAnimated:YES]; //弹栈,返回到前一个视图 [self.navig

  • iOS开发中视图的下拉放大和上拉模糊的效果实现

    把"秘密"的Cell效果整体视图都放到scrollView中,基本是和secret app 一模一样的效果了. 代码如下:(模糊效果的类就不写了,大家可以搜"UIImage+ImageEffects",还要导入Accelerate.framework) 1.MTSecretAppEffect.h 复制代码 代码如下: #import <Foundation/Foundation.h>    @interface MTSecretAppEffect : N

  • iOS毛玻璃效果的实现及图片模糊效果的三种方法

    App设计时往往会用到一些模糊效果或者毛玻璃效果,iOS目前已提供一些模糊API可以让我们方便是使用. 话说苹果在iOS7.0之后,很多系统界面都使用了毛玻璃效果,增加了界面的美观性,比如下图的通知中心界面; 但是其iOS7.0的SDK并没有提供给开发者实现毛玻璃效果的API,所以很多人都是通过一些别人封装的框架来实现,后面我也会讲到一个; 其实在iOS7.0(包括)之前还是有系统的类可以实现毛玻璃效果的, 就是 UIToolbar这个类,并且使用相当简单,几行代码就可以搞定. 下面是代码实现:

  • IOS给图片添加水印(两种方式)

    为了防止自己辛苦做的项目被别人盗走,采取图片添加水印,在此表示图片的独一无二.加水印不是在上面添加几个Label,而是我们把字画到图片上成为一个整体,下面小编给大家分享IOS给图片添加水印(两种方式). 提供一个方法,此方法只需要传递一个要加水印的图片和水印的内容就达到效果. 第一种方式: -(UIImage *)watermarkImage:(UIImage *)img withName:(NSString *)name { NSString* mark = name; int w = img

  • iOS实现列表与网格两种视图的相互切换

    下图为京东商城的截图 很多人看到这个,第一眼想到的是用TableView和CollectionView来做切换,笔者刚开始也是认为这么做,后来发现还有一个非常的简单方法,就可以实现这个功能. 实现代码 1.首先创建一个CollectionView. - (UICollectionView *)collectionView { if (!_collectionView) { UICollectionViewFlowLayout *flowlayout = [[UICollectionViewFlo

  • iOS开发中实现显示gif图片的方法

    我们知道Gif是由一阵阵画面组成的,而且每一帧画面播放的时常可能会不相等,观察上面两个例子,发现他们都没有对Gif中每一帧的显示时常做处理,这样的结果就是整个Gif中每一帧画面都是以固定的速度向前播放,很显然这并不总会符合需求.   于是自己写一个解析Gif的工具类,解决每一帧画面并遵循每一帧所对应的显示时间进行播放.   程序的思路如下:   1.首先使用ImageIO库中的CGImageSource家在Gif文件.   2.通过CGImageSource获取到Gif文件中的总的帧数,以及每一

  • IOS中实现图片点击全屏预览

    如果你感觉累,那就对了那是因为你在走上坡路..这句话似乎有点道理的样子,时常提醒自己无论走到哪都不要忘记自己当初为什么出发.有时想想感觉有的东西可以记录一下,就把它记录下来吧,这次想写一下关于单张图片点击全屏预览的问题,网上查了一些大神写的有的功能确实很强大但自己暂时想要的只是简单的功能就好,还有些方法自己也没弄出想要的效果,最后写了一个比较简单的点击单张图片的全屏预览和双指捏合缩小放大,可能有时要对图片做一些处理,这里放大后只是显示同一张图片并未做处理,下面直接贴出代码 // // ViewC

随机推荐