首页 > 代码库 > 一个图片装饰器的制作
一个图片装饰器的制作
一个图片装饰器的制作
一
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 定义action2 VCDecorations.h defining the actions3 @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 *)picker2 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 *mailController21 mailController.mailComposeDelegate = self;22 //隐藏toolbar23 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 =http://www.mamicode.com/ UIImagePNGRepresentation(i);32 [mailController addAttachmentData:imageAsData33 //添加图片电邮34 mimeType:@"image/png" fileName:@"PicDecor.png"];35 [mailController setSubject:@"My PicDecor Image"];36 [self presentModalViewController:mailController animated:YES];37 [mailController release];38 }
算是完成了，这一个参照ios实践那本书的。