裁剪图片(自定义裁剪范围)
2016-06-04 12:43
330 查看
网上现在有很多的图片剪切和从图片库中取出图片并截取的demo,但是大部分都是固定的大小,而且我们系统本来就带可编辑的图片裁剪功能。不过那个是正方形的,并不适用于我们多变的需求。
1.做裁剪图片需要先放一个父view,然后再在上面放原始图片imageview最后还需要一个裁剪图片的区域,为了防止用view会遮盖屏幕,到时候想滑动图片,缩放图片的时候就会遇到麻烦,所以需要用layer,就是之前博客提到的用calayer绘图,将编辑框画出来。这样既有了裁剪范围又不会遮挡界面手势。
2.父view和手势代码如下
大图片的view
编辑框的代码
两个手势的实现方法
3.最后要上实现切图的代码
1.做裁剪图片需要先放一个父view,然后再在上面放原始图片imageview最后还需要一个裁剪图片的区域,为了防止用view会遮盖屏幕,到时候想滑动图片,缩放图片的时候就会遇到麻烦,所以需要用layer,就是之前博客提到的用calayer绘图,将编辑框画出来。这样既有了裁剪范围又不会遮挡界面手势。
2.父view和手势代码如下
//声明需要切图的可滑动的背景 self.originImageBoardView = [[UIView alloc] initWithFrame:CGRectMake(0, 64, SCREEN_WIDTH, SCREEN_HEIGHT-64)]; self.originImageBoardView.clipsToBounds = YES; [self.view addSubview:self.originImageBoardView]; //缩放图片 UIPinchGestureRecognizer *pinchOriginGestureRecognizer = [[UIPinchGestureRecognizer alloc] initWithTarget:self action:@selector(pinchGestureAction:)]; //移动图片 UIPanGestureRecognizer *panOriginGestureRecognizer = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(panGestureAction:)]; panOriginGestureRecognizer.maximumNumberOfTouches = 1; [self.originImageBoardView addGestureRecognizer:pinchOriginGestureRecognizer]; [self.originImageBoardView addGestureRecognizer:panOriginGestureRecognizer];
大图片的view
//声明原图 self.originImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT-64)]; self.originImageView.image = self.originImage; //UIViewContentModeScaleAspectFit(将图片全部显示出来等比例缩放到屏幕能放下图片为止,例如屏幕未铺满有,由于图片比例不同所以显示全部图片内容后必定有部分不会被图片显示出来)UIViewContentModeScaleAspectFill(将图片最小的部分显示出来,例如图片高度和宽度比例不同则全屏显示,可能高度或者宽度超出屏幕) self.originImageView.contentMode = UIViewContentModeScaleAspectFit; [self.originImageBoardView addSubview:self.originImageView];
编辑框的代码
-(void)cutImageWithPath { UIBezierPath *path = [UIBezierPath bezierPath]; [path moveToPoint:CGPointMake(0, (SCREEN_HEIGHT+64-SCREEN_WIDTH/1.8)/2)]; [path addLineToPoint:CGPointMake(SCREEN_WIDTH, (SCREEN_HEIGHT+64-SCREEN_WIDTH/1.8)/2)]; [path addLineToPoint:CGPointMake(SCREEN_WIDTH, (SCREEN_HEIGHT+64+SCREEN_WIDTH/1.8)/2)]; [path addLineToPoint:CGPointMake(0, (SCREEN_HEIGHT+64+SCREEN_WIDTH/1.8)/2)]; [path closePath]; CAShapeLayer *myLayer = [CAShapeLayer layer]; myLayer.fillColor = [UIColor clearColor].CGColor; myLayer.strokeColor = [UIColor whiteColor].CGColor; myLayer.path = path.CGPath; myLayer.lineWidth=1; [self.view.layer addSublayer:myLayer]; }
两个手势的实现方法
- (void)pinchGestureAction:(UIPinchGestureRecognizer *)gestureRecognizer { UIView *gestureView = gestureRecognizer.view; gestureView = self.originImageView; CGAffineTransform affineTransform = CGAffineTransformScale(gestureView.transform,gestureRecognizer.scale, gestureRecognizer.scale); gestureView.transform = affineTransform; gestureRecognizer.scale = 1; } - (void)panGestureAction:(UIPanGestureRecognizer *)gestureRecognizer { UIView *gestureView = gestureRecognizer.view, *gestureViewSuperView = gestureView.superview; BOOL needPaddingDistance = NO; gestureView = self.originImageView; needPaddingDistance = NO; CGPoint touchPoint = [gestureRecognizer locationInView:gestureView.superview]; if(gestureRecognizer.state == UIGestureRecognizerStateChanged) { CGPoint centerPoint = CGPointMake(gestureView.center.x + touchPoint.x - PreviousTapPoint.x, gestureView.center.y + touchPoint.y - PreviousTapPoint.y); if(needPaddingDistance) { CGFloat w = CGRectGetWidth(gestureView.frame), h = CGRectGetHeight(gestureView.frame); CGRect tempFrame = CGRectMake(centerPoint.x - w / 2, centerPoint.y - h / 2, w, h); if(!CGRectContainsRect(gestureViewSuperView.frame, tempFrame)) { return; } } gestureView.center = centerPoint; } PreviousTapPoint = touchPoint; [gestureRecognizer setTranslation:CGPointZero inView:gestureView.superview]; }
3.最后要上实现切图的代码
UIGraphicsBeginImageContext(self.originImageBoardView.bounds.size); //currentView 当前的view [self.originImageBoardView.layer renderInContext:UIGraphicsGetCurrentContext()]; UIImage *originFullImage = UIGraphicsGetImageFromCurrentImageContext(); UIGraphicsEndImageContext(); CGImageRef imageRef = originFullImage.CGImage; CGImageRef imagePartRef = CGImageCreateWithImageInRect(imageRef, self.cropView.frame); UIImage *cropImage = [UIImage imageWithCGImage:imagePartRef]; CGImageRelease(imagePartRef);
相关文章推荐
- Android打造带透明圆弧的ImageView
- C#实现在服务器端裁剪图片的方法
- Android编程UI设计之GridView和ImageView的用法
- 基于Android实现随手指移动的ImageView
- Android使用ImageView 制作透明圆弧实例代码
- Android中ImageView用法实例分析
- Android使用控件ImageView加载图片的方法
- PHP图片处理之使用imagecopyresampled函数裁剪图片例子
- Android ImageView随手势变化动态缩放图片
- Android程序开发之动态设置ImageView的亮度
- Android实现GridView中ImageView动态变换的方法
- Android控件之ImageView用法实例分析
- 实例解析Android ImageView的scaleType属性
- Android UI之ImageView实现图片旋转和缩放
- 图文讲解Android的ImageView类中的ScaleType属性设置
- Android手势滑动实现ImageView缩放图片大小
- Android编程实现ImageView图片抛物线动画效果的方法
- Android编程简单实现ImageView点击时背景图修改的方法
- android ImageView 的几点经验总结
- Android控件系列之ImageView使用方法