您的位置:首页 > 移动开发 > IOS开发

IOS图片裁剪和小图看大图动画

2013-01-19 13:08 369 查看
  IOS的UIImagePickerController可以让用户通过相机或者相册获取想要的图片,并且通过设置allowsEditing属性允许用户在选择了图片以后对图片进行裁剪。不过在某些时候会出现正方形的裁剪框没有适配图片的情况,如下图:

View Code

//
//  AvatarHDViewController.h
//  CutPicTest
//
//  Created by liulu on 12-12-21.
//  Copyright (c) 2012年 liulu. All rights reserved.
//

#import "AvatarHDViewController.h"
#import "AppDelegate.h"
#import <QuartzCore/QuartzCore.h>

#define SCREEN_WIDTH 320
#define SCREEN_HEIGHT 480

@interface AvatarHDViewController ()

@end

@implementation AvatarHDViewController
@synthesize avatarImg;
@synthesize beginRect;
@synthesize delegate;

- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
{
self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
if (self) {
// Custom initialization
isShowHDImg = NO;
self.view.backgroundColor = [UIColor clearColor];

_viewBg = [[UIView alloc]initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT)];
[self.view addSubview:_viewBg];
[self.view sendSubviewToBack:_viewBg];
_viewBg.backgroundColor = [UIColor blackColor];
_viewBg.alpha = 0;
}
return self;
}

- (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view.
_avatarImgV = [[UIImageView alloc]init];
[self.view addSubview:_avatarImgV];
[_avatarImgV.layer setMasksToBounds:YES];
//    [_avatarImgV.layer setCornerRadius:6.0];

_avatarImgV.contentMode = UIViewContentModeScaleAspectFill;

}

-(void)viewDidAppear:(BOOL)animated{
[super viewDidAppear:animated];
[self enterAnimation];
}

- (void)dealloc{
[_avatarImgV release];
[super dealloc];
}

#pragma mark -
#pragma mark set
- (void)setAvatarImg:(UIImage *)img{
avatarImg = img;
[_avatarImgV setImage:self.avatarImg];
}

- (void)setBeginRect:(CGRect)rect{
beginRect = rect;
_avatarImgV.frame = self.beginRect;
}

#pragma mark -
#pragma mark Animation
- (void)enterAnimation{
//    [UIView animateWithDuration:0.2 animations:^{
//       _viewBg.alpha = 1;
//    }completion:^(BOOL finished){
//        if (finished) {
[UIView animateWithDuration:0.5 animations:^{
_avatarImgV.frame = CGRectMake(0, (SCREEN_HEIGHT - SCREEN_WIDTH)/2, SCREEN_WIDTH, SCREEN_WIDTH);
_viewBg.alpha = 1;
}completion:^(BOOL finished){
if (finished) {
//添加手势
if (!_recognizer) {
_recognizer = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(handleSwipeFromDownToUp)];
}
[_recognizer setNumberOfTapsRequired:1];
[_recognizer setNumberOfTouchesRequired:1];
[self.view addGestureRecognizer:_recognizer];
}
}];
//        }
//    }];
}

- (void)exitAnimation{
//    [UIView animateWithDuration:0.4 animations:^{
//        _avatarImgV.frame = self.beginRect;
//    }completion:^(BOOL finished){
//        if (finished) {
[UIView animateWithDuration:0.5 animations:^{
_viewBg.alpha = 0;
_avatarImgV.frame = self.beginRect;
}completion:^(BOOL finished){
if (self.delegate&&[self.delegate respondsToSelector:@selector(hiddenHDUserImg)]) {
[self.delegate hiddenHDUserImg];
}
}];
//        }
//    }];
}

- (void)handleSwipeFromDownToUp{
//移除手势
for (UITapGestureRecognizer* recognizer in self.view.gestureRecognizers) {
if (recognizer==_recognizer) {
[self.view removeGestureRecognizer:recognizer];
}
}
[self exitAnimation];
}

- (void)didReceiveMemoryWarning
{
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}

@end


最终效果:

  因为设计的时候考虑不足,在真机上拍照以后可能出现裁剪得到的图片与裁剪框中不同的问题,这是因为ios的相机并没有根据拍照时的重力方向来将图片实际旋转,而是采用了写入图片EXIF信息的方式确保图片显示方向正确。因此在裁剪图片时还需要根据从相册获取到的UIImage对象的imageOrientation来重新计算正确的裁剪坐标和区域才能得到正确的图像。

  最终我的这个裁剪器还是没有在实际当中使用,原因是为了适配高清图片,在图片最小边不足720时我直接禁止用户放大了,导致用户体验非常不好。而应用在设置头像的场景中时很多时候对于一张照片用户确实就只想截取其中的某个区域作为头像,而用户很少会在意头像是否是绝对的高清。并且300的尺寸和720的尺寸在大部分手机屏幕上实际上看起来差别并不大。设计时更应该全面考虑实际应用情况,720的分辨率只应该作为高清头像的一个上限标准,而不该强制用户使用720分辨率头像。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: