一个图片装饰器的制作

一个图片装饰器的制作
一
1 首先创建工程picDecor,
2 然后从对象库中，拉出Round Rect按钮到视图中，
3 为了显示用户所选择的图片，需要往视图里，添加view Controller对象,如下图
4 还要一个图片视图imageView来编辑一张图片和一个windows and Bars工具栏来放置按钮,
（备注：要先添加工具栏再添加iamgeView对像）
5 再添加flexible space bar Button Item到工具栏中心，然后再添加一个bar buttonItem到工具栏
左右两边，名字分别为Decrate和Email.如下图：
这样，UI框架准备完成。
6，接下来我需要创建一个视图，这个视图可以允许用户点击选择各种预先装备好的装饰图，然后添加
到之前的图片中进行编辑。
7 从Objects & Controllers group 中拖拽一个新的规图控制器到storeBored文件。从Object Library 中的Windows& Bars group 中拖拽一个
规图到新的控制器上.从Inputs & Values group 拖拽一个按钮到规图,如图：
二
有了UI，就要给它们灵魂－－－开发 actions 和 outlets
先创建两个viewController类VCImageEditing和VCDecorations 类

VCImageEditing 类有一个outlet（指向图片规图）和两个 actions （指向装饰和収
邮件按钮）。在头文件中声明这些（见以下代码）

1 @interface VCImageEditing : UIViewController {
2 IBOutlet UIImageView *ivEditingImage;
3 }
4 -(IBAction)doDecorateBtn:(id)sender;
5 -(IBAction)doEmailBtn:(id)sender;
6 @end

VCDecorations 类有两个 actions。一个action 处理打开所有的装饰性图片库的按钮，

另一个处理叏消按钮。因为是通过点击按钮来执行方法，所以按钮上显示什么图片可以由你
来决定。在头文件中声明这些（看下面所列代码）。

1 VCDecorations.h 定义action
2 VCDecorations.h defining the actions
3 @interface VCDecorations : UIViewController {
4 }
5 -(IBAction)doImageBtn:(id)sender;
6 -(IBAction)doCancelBtn:(id)sender;
7 @end

给这些规图控制器连线，PicDecorViewController 头文件中全部内容

1 #import "VCImageEditing.h"
2 @interface PicDecorViewController : UIViewController {
3 IBOutlet VCImageEditing *vcImageEditing;
4 }
5 -(IBAction)doCameraBtn:(id)sender;
6 -(IBAction)doPhotoAlbumBtn:(id)sender;
7 @end

要允许用户通过拍照戒者从相册中获叏图片源。需要实现按钮的actions 并用正确的方
弅来打开图像选择器。在一个图片被选择后，UIImagePickerController 需要収通知给应用，来实现你设置的
图片控制器的委托中的方法.
更新PicDecorViewController 的头文件来声明它执行UIImagePickerControllerDelegate 的协议.

1 @interface PicDecorViewController : UIViewController 2 <UIImagePickerControllerDelegate, UINavigationControllerDelegate> {}

UIImagePickerController 协议UIImagePickerController 的setDelegate方法需要一个实现
了PickerControllerDelegate 和UINavigationControllerDelegate 的接口的对象。但
是UINavigationControllerDelegate现在还没有所需的方法。
PicDecorViewController 执行action

1 -(IBAction)doCameraBtn:(id)sender{
2 UIImagePickerController *ipController=[[UIImagePickerController alloc] init];
3 [ipController setSourceType:UIImagePickerControllerSourceTypeCamera];
4 [ipController setDelegate:self];
5 [self presentModalViewController:ipController animated:YES];(注ios6以上不支持)；
6 }

需要告知image editing controller 选择的图片是哪张。我们可以通过声明了一个
UIImage 成员发量——editImage
VCImageEditing 的头文件

 1 #import "VCDecorations.h"
 2 @inerface VCImageEditing:UIViewController{
 3 UIImage *editImage;
 4 //需要编辑的图片
 5 IBOutlet UIImageView *ivEditingImage;
 6 }
 7 -(IBAction)doDecorateBtn:(id)sender;
 8 -(IBAction)doEmailBtn:(id)sender;
 9 @property(nonatomic,retain)UIImage *editImage;
10 @end

PicDecorViewControllers 执行图片选择方法

1 -(void)imagePickerController:(UIImagePickerController *)picker
2 didFinishPickingMediaWithInfo:(NSDictionary *)info{
3 [self dismissModalViewControllerAnimated:No];
4 
5 UIImage *i=[info objectForKey:UIImagePcikerControllerOriginalImage];
6 [vcImageEdition setEditImage:i];
7 [self presentViewController:vcImageEditing animated:YES completeion:nil];
8 }

看下选择装饰图片的action。VCImageEditing 需要一个
VCDecorations 实例的引用，其次还需要使用一个标记——selectingImage 来判断是否已
选中一个装饰图。（见以下代码）。doDecorationsBtn方法的主要功能就是打开decorations
controller 规图控制器。
VCImageEditing 头文件以及doDecorateBtn action 实现

 1 #import "VCDecorations.h"
 2 @interface VCImageEditing:UIViewCOntroller{
 3 UIImage *editImage;
 4 IBOutlet VCDecorations *vcDecorations;
 5 bool selectingImage;
 6 IBOutlet UIImageView *ivEditingImage;
 7 }
 8 -(IBAction)doDecorateBtn:(id)sender;
 9 -(IBAction)doEmailBtn:(id)sender;
10 @property(nonatomic,retain)UIImage *editImage;
11 @end

VCImageEditingviewWillAppear 访问选择的图片

 1 -(void)viewWillAppear:(BOOL)animated
 2 {
 3 [super viewWillAppear:animated];
 4 if(editImage!=nil)}{
 5 [ivEditingImage setImage:editImage];
 6 if(editImage!=nil){
 7 [ivEditingImage setImage:editImage];
 8 [self.view sendSubviewToBack:ivEditingImage];
 9 }
10 if(selectingImage){
11 MovableImageView *iv=[[MovableImageView alloc]
12 initWithImage:[vcDecorations selectedImage]];
13 
14 [iv setUserInteractionEnabled:YES];
15 [self.view addSubview:iv]
16 }
17 selectingImage=NO;
18 }
19 }

MovableImageView 实现文件拦截触摸事件让图片随之移动

 1 #import "MovableImageView.h"
 2 @implementation MovableImageview
 3 -(void)touchesBegan:(NSSet *)touches withEvent:(UIEevent *)event
 4 {
 5 [super touchedsBegan:touches withEvent:event];
 6 }
 7 -(void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event{
 8 [super touchesEnded:touches withEvent:event];
 9 }
10 -(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event{
11 [super touchesMoved:touches withEvent:event];
12 float deltaX=[[touches anyObject] locationInView:self].x-
13 [[touches anyObject] previousLocationInview:self].x;
14 
15 float deltaY=[[touches anyObject] locationInView:self].y-
16 [[touches anyObject] previousLocationInview:self].y;
17 self.transform=CGAffineTransform Translate(self.transform,deltaX,deltaY);
18 }

现在如果运行应用，我们可以选择图片来源（在模拟器中只能使用相册），选择一张图
片，然后添加装饰.

增加in-app 电邮
我们可以使用内置的MessageUI 框架来给应用增加収送邮件功能。
収送email，VCImageEditing需要接入MFMailComposeViewControllerDelegate协
议,VCImageEditing通过图片视图创建一副图片并将它作为附件电邮

 1 -(void)mailComposeController:(MFMailComposeViewController*)controller
 2 didFinishWithResult:(MFMailComposeResult)result
 3 error:(NSError*)error
 4 {
 5 //常觃检查是否有错
 6 -(UIImage *)saveImage:(UIView *)view {
 7 CGRect mainRect = [[UIScreen mainScreen] bounds];
 8 UIGraphicsBeginImageContext(mainRect.size);
 9 CGContextRef context = UIGraphicsGetCurrentContext();
10 [[UIColor blackColor] set];
11 CGContextFillRect(context, mainRect);
12 [view.layer renderInContext:context];
13 UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
14 //创建一个图片
15 UIGraphicsEndImageContext();
16 return newImage;
17 }
18 -(IBAction)doEmailBtn:(id)sender;
19 {
20 MFMailComposeViewController *mailController
21 mailController.mailComposeDelegate = self;
22 //隐藏toolbar
23 for (UIView *v in [self.view subviews])
24 if ([v isKindOfClass:[UIToolbar class]])
25 [v setHidden:YES];
26 UIImage *i = [self saveImage:self.view];
27 //获叏图片
28 for (UIView *v in [self.view subviews])
29 if ([v isKindOfClass:[UIToolbar class]])
30 [v setHidden:NO];
31 NSData *imageAsData = UIImagePNGRepresentation(i);
32 [mailController addAttachmentData:imageAsData
33 //添加图片电邮
34 mimeType:@"image/png" fileName:@"PicDecor.png"];
35 [mailController setSubject:@"My PicDecor Image"];
36 [self presentModalViewController:mailController animated:YES];
37 [mailController release];
38 }

算是完成了，这一个参照ios实践那本书的。

posted on 2014-08-19 18:00 flashEye 阅读(393) 评论(0) 编辑收藏举报