最近項目中修改個人資料等需要用到頭像,這就需要用到截圖,故留下這篇博文,供自己以後參考。
先上效果圖:
這裏的圖片顯示效果就沒有做過多處理了,因爲小編直接採用的storyBoard佈局,設置了圖片的Mode爲Aspect Fit,需要什麼樣的mode,可自行設置。
1.在控制器中設置一個UI ImageView和一個UIButton,UIImageView用來顯示圖片,UIButton用來進行截圖跳轉。小編這都是在storyboard中完成的,所以,只是在代碼中進行了效果處理。
ViewController.h 中實現了截圖控制器的代理等
//
// ViewController.h
// TestImageZoom
//
// Created by NapoleonBai on 14-7-24.
// Copyright (c) 2014年 NapoleonBai. All rights reserved.
//
#import <UIKit/UIKit.h>
#import "ImageCropper.h"
@interface ViewController : UIViewController<ImageCropperDelegate>
@property (weak, nonatomic) IBOutlet UIImageView *imageView;
- (IBAction)onClick:(id)sender;<span style="font-family: Arial, Helvetica, sans-serif;">//按鈕點擊事件</span>
@end
在ViewController.m 中實現了協議方法,以及對截圖的加載顯示和截圖控制器的跳轉
//點擊按鈕方法
- (IBAction)onClick:(id)sender {
//打開縮放圖片控制器
ImageCropper *cropper = [[ImageCropper alloc] initWithImage:[_imageView image]];
//設置代理
[cropper setDelegate:self];
//模態跳轉
[self presentViewController:cropper animated:YES completion:nil];
}
//實現協議方法,將剪切得到的圖片,設置到當前界面的UIIamgeView上顯示
- (void)imageCropper:(ImageCropper *)cropper didFinishCroppingWithImage:(UIImage *)image {
[_imageView setImage:image];
}
2.處理截圖控制器,這個截圖控制器是使用的一個UIScroolView和一個UIImageView完成的基本構造,使用的UIView形成的固定截圖框大小。這裏就不做過多解釋了,言語都在註釋中。
在ImageCropper.h 中聲明方法/屬性等 和構建協議方法
//
// ImageCropper.h
// Created by NapoleonBai on 14-7-24.
// Copyright (c) 2014年 NapoleonBai. All rights reserved.
//
#import <UIKit/UIKit.h>
@protocol ImageCropperDelegate;
@interface ImageCropper : UIViewController <UIScrollViewDelegate> {
UIView *viewZoom;//縮放截圖View
}
@property (nonatomic, strong) UIScrollView *scrollView;//滾動視圖
@property (nonatomic, strong) UIImageView *imageView;//顯示圖片View
@property (nonatomic, assign) id <ImageCropperDelegate> delegate;
- (id)initWithImage:(UIImage *)image;//初始化方法
@end
//代理
@protocol ImageCropperDelegate <NSObject>
//完成剪切的代理方法
- (void)imageCropper:(ImageCropper *)cropper didFinishCroppingWithImage:(UIImage *)image;
@end
2.1完成初始化方法,在ImageCropper.m文件中
- (id)initWithImage:(UIImage *)image {
self = [super init];
if (self) {
[[UIApplication sharedApplication] setStatusBarStyle:UIStatusBarStyleLightContent animated:YES];
//初始化UIScrollView 大小可以自行設定
_scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 64, 320, 436)];
[_scrollView setBackgroundColor:[UIColor blackColor]];
[_scrollView setDelegate:self];
[_scrollView setShowsHorizontalScrollIndicator:NO];
[_scrollView setShowsVerticalScrollIndicator:NO];
[_scrollView setMaximumZoomScale:2.0];
//初始化圖片View
_imageView = [[UIImageView alloc] initWithImage:image];
//設置圖片現實大小等
CGRect rect;
rect.size.width = image.size.width;
rect.size.height = image.size.height;
[_imageView setFrame:rect];
//設置UIScrollView的內容大小
[_scrollView setContentSize:[_imageView frame].size];
//設置最小縮放等級
[_scrollView setMinimumZoomScale:[_scrollView frame].size.width / [_imageView frame].size.width];
//設置初始等級
[_scrollView setZoomScale:[_scrollView minimumZoomScale]];
//添加到UIScrollView上
[_scrollView addSubview:_imageView];
[[self view] addSubview:_scrollView];
//創建導航欄控制器
UINavigationBar *navigationBar = [[UINavigationBar alloc] initWithFrame:CGRectMake(0, 0, 320, 64)];
//設置導航欄標題
UINavigationItem *aNavigationItem = [[UINavigationItem alloc] initWithTitle:@"縮放和剪切"];
//設置取消按鈕
[aNavigationItem setLeftBarButtonItem:[[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemCancel target:self action:@selector(cancelCropping)]];
//設置確認剪切按鈕
[aNavigationItem setRightBarButtonItem:[[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemDone target:self action:@selector(finishCropping)]];
//添加到導航欄上
[navigationBar setItems:[NSArray arrayWithObject:aNavigationItem]];
//設置導航欄
[[self view] addSubview:navigationBar];
//初始化截圖框
[self initView];
}
return self;
}
2. 2上面也提到了一個initView函數,這個函數是用來初始化截圖框的大小的,如下
//創建一個截圖框
- (void)initView{
//初始化截圖框信息
viewZoom=[[UIView alloc]initWithFrame:CGRectMake(10, 10, 100, 100)];
[viewZoom setBackgroundColor:[UIColor clearColor]];//清除背景色
viewZoom.layer.borderColor=[[UIColor greenColor]CGColor];//設置邊框顏色
viewZoom.layer.borderWidth=1;//設置邊框寬度
viewZoom.layer.cornerRadius=5;//設置圓角
[[self scrollView] addSubview:viewZoom];//添加到視圖上
// 設置可操作 特別注意,這裏必須這樣,不然手勢將不可用
[viewZoom setUserInteractionEnabled:YES];
//設置拖動手勢事件方法
UIPanGestureRecognizer *panGestureRecognizer = [[UIPanGestureRecognizer alloc]
initWithTarget:self
action:@selector(handlePan:)];
//添加拖動手勢
[viewZoom addGestureRecognizer:panGestureRecognizer];
}
2.3到這裏,基本佈局就算完成了,但是,爲了方便,小編給截圖框添加了一個拖動手勢,這樣就可拖動截圖 框了。在拖動方法中,需要改變View 的座標,小編是通過移動的座標點來重新設置View的座標的,如下
//進行截圖框拖放時執行
- (void)handlePan:(UIPanGestureRecognizer *)recognizer{
//得到移動座標點
CGPoint translation = [recognizer translationInView:self.view];
//設置拖動視圖的中心座標
recognizer.view.center = CGPointMake(recognizer.view.center.x + translation.x,
recognizer.view.center.y + translation.y);
//重新設置視圖位置
[recognizer setTranslation:CGPointZero inView:self.view];
}
2.4實現UIScrollView的協議方法,監控它的縮放返回圖片視圖,在scrollViewDidScroll函數中固定剪切框的位置,這個函數是監控UIScrollView滾動的函數
#pragma 實現滾動視圖的協議方法
//進行縮放時進入,返回圖片View
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollViews {
return _imageView;
}
//滾動時候進入
- (void)scrollViewDidScroll:(UIScrollView *)scrollViews{
//得到截圖框的frame
CGRect frame=viewZoom.frame;
//將截圖框鎖定在屏幕(x=10,y=10)的位置 可以根據自己需要自行設定
frame.origin.x=[self.scrollView contentOffset].x+10;
frame.origin.y=[self.scrollView contentOffset].y+10;
[viewZoom setFrame:frame];
}
//取消方法
- (void)cancelCropping {
[self dismissViewControllerAnimated:NO completion:nil];
}
//這是點擊截圖按鈕觸發
- (void)finishCropping {
//得到縮放級別
float zoomScale = 1.0 / [_scrollView zoomScale];
//得到需要的截圖大小
CGRect rect;
rect.origin.x = viewZoom.frame.origin.x * zoomScale;
rect.origin.y = viewZoom.frame.origin.y * zoomScale;
rect.size.width = viewZoom.frame.size.width * zoomScale;
rect.size.height = viewZoom.frame.size.height * zoomScale;
//裁剪圖片 需要裁剪的圖片 裁剪的位置
CGImageRef cr = CGImageCreateWithImageInRect([[_imageView image] CGImage], rect);
//得到image
UIImage *cropped = [UIImage imageWithCGImage:cr];
//釋放內存<span style="white-space:pre"> </span>這裏可以不做出操作,但是爲了內存的嚴謹,推薦釋放
CGImageRelease(cr);
//使用代理將截圖傳回界面
[self.delegate imageCropper:self didFinishCroppingWithImage:cropped];
[self dismissViewControllerAnimated:NO completion:nil];
}
到這裏就結束了截圖和縮放功能
記下,只爲了留下開發生涯中的點點滴滴;
可能不是最好,但小編已經全力以赴了。
謝謝,若有不對,煩勞路過的大牛指點一二。