触摸事件练习 -- 画画板(截屏分类)
Main.storyboard
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="5053" systemVersion="13D65" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" initialViewController="vXZ-lx-hvc"> <dependencies> <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="3733"/> </dependencies> <scenes> <!--View Controller--> <scene sceneID="ufC-wZ-h7g"> <objects> <viewController id="vXZ-lx-hvc" customClass="LWTViewController" sceneMemberID="viewController"> <layoutGuides> <viewControllerLayoutGuide type="top" id="jyV-Pf-zRb"/> <viewControllerLayoutGuide type="bottom" id="2fi-mo-0CV"/> </layoutGuides> <view key="view" contentMode="scaleToFill" id="kh9-bI-dsS"> <rect key="frame" x="0.0" y="0.0" width="320" height="480"/> <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/> <subviews> <view contentMode="scaleToFill" fixedFrame="YES" translatesAutoresizingMaskIntoConstraints="NO" id="O12-F5-sTX" customClass="LWTView"> <rect key="frame" x="0.0" y="80" width="320" height="320"/> <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/> <color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="calibratedWhite"/> </view> <button opaque="NO" contentMode="scaleToFill" fixedFrame="YES" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="Uig-1j-G4F"> <rect key="frame" x="20" y="20" width="46" height="30"/> <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/> <state key="normal" title="清屏"> <color key="titleColor" red="0.30005167820127365" green="0.0" blue="1" alpha="1" colorSpace="calibratedRGB"/> <color key="titleShadowColor" white="0.5" alpha="1" colorSpace="calibratedWhite"/> </state> <connections> <action selector="clearOnClick" destination="vXZ-lx-hvc" eventType="touchUpInside" id="Pi3-JJ-h4m"/> </connections> </button> <button opaque="NO" contentMode="scaleToFill" fixedFrame="YES" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="qxJ-JE-L8i"> <rect key="frame" x="254" y="20" width="46" height="30"/> <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/> <state key="normal" title="保存"> <color key="titleColor" red="0.3000516782" green="0.0" blue="1" alpha="1" colorSpace="calibratedRGB"/> <color key="titleShadowColor" white="0.5" alpha="1" colorSpace="calibratedWhite"/> </state> <connections> <action selector="saveOnClick" destination="vXZ-lx-hvc" eventType="touchUpInside" id="C2I-4S-8ES"/> </connections> </button> <button opaque="NO" contentMode="scaleToFill" fixedFrame="YES" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="XxV-Qs-KKx"> <rect key="frame" x="137" y="20" width="46" height="30"/> <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/> <state key="normal" title="撤销"> <color key="titleColor" red="0.3000516782" green="0.0" blue="1" alpha="1" colorSpace="calibratedRGB"/> <color key="titleShadowColor" white="0.5" alpha="1" colorSpace="calibratedWhite"/> </state> <connections> <action selector="removeOnClick" destination="vXZ-lx-hvc" eventType="touchUpInside" id="NY8-UW-wza"/> </connections> </button> </subviews> <color key="backgroundColor" red="1" green="0.54953925280000004" blue="0.292054386" alpha="1" colorSpace="calibratedRGB"/> </view> <connections> <outlet property="drawingView" destination="O12-F5-sTX" id="ftL-w3-dLx"/> </connections> </viewController> <placeholder placeholderIdentifier="IBFirstResponder" id="x5A-6p-PRh" sceneMemberID="firstResponder"/> </objects> </scene> </scenes> <simulatedMetricsContainer key="defaultSimulatedMetrics"> <simulatedStatusBarMetrics key="statusBar"/> <simulatedOrientationMetrics key="orientation"/> <simulatedScreenMetrics key="destination"/> </simulatedMetricsContainer> </document>
LWTViewController.h
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
#import <UIKit/UIKit.h> @interface LWTViewController : UIViewController @end
LWTViewController.m
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
// // LWTViewController.m // 画画板 // // Created by apple on 14-6-12. // Copyright (c) 2014年 lwt. All rights reserved. // #import "LWTViewController.h" #import "LWTView.h" #import "MBProgressHUD+NJ.h" #import "UIImage+captureView.h" @interface LWTViewController () /** * 清屏 */ - (IBAction)clearOnClick; /** * 回退 */ - (IBAction)removeOnClick; /** * 保存 */ - (IBAction)saveOnClick; @property (weak, nonatomic) IBOutlet LWTView *drawingView; @end @implementation LWTViewController - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typically from a nib. } - (void)didReceiveMemoryWarning { [super didReceiveMemoryWarning]; // Dispose of any resources that can be recreated. } - (IBAction)clearOnClick { [self.drawingView clearPaths]; } - (IBAction)removeOnClick { [self.drawingView removeLastPath]; } - (IBAction)saveOnClick { UIImage *image = [UIImage captureImageWithView:self.drawingView]; // 保存到相册 UIImageWriteToSavedPhotosAlbum(image, self, @selector(image:didFinishSavingWithError:contextInfo:), nil); } - (void)image:(UIImage *)image didFinishSavingWithError:(NSError *)error contextInfo:(void *)contextInfo { if (error) { [MBProgressHUD showError:@"保存失败"]; }else { [MBProgressHUD showSuccess:@"保存成功"]; } } @end
LWTView.h
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
#import <UIKit/UIKit.h> @interface LWTView : UIView - (void)clearPaths; - (void)removeLastPath; @end
LWTView.m
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
// // LWTView.m // 画画板 // // Created by apple on 14-6-12. // Copyright (c) 2014年 lwt. All rights reserved. // #import "LWTView.h" @interface LWTView () @property (nonatomic, strong) NSMutableArray *paths; @end @implementation LWTView - (NSMutableArray *)paths { if (!_paths) { _paths = [NSMutableArray array]; } return _paths; } // 开始触摸 - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event { // 获取手指触摸的位置 CGPoint startPoint = [self getCurrentPointWithTouchPoint:touches]; // 当用户手指按下的时候创建一条路径 UIBezierPath *path = [UIBezierPath bezierPath]; // 设置当前路径的起点 [path moveToPoint:startPoint]; // 设置路径的相关属性 [path setLineCapStyle:kCGLineCapRound]; [path setLineJoinStyle:kCGLineJoinRound]; [path setLineWidth:3.0]; // 将路径添加到数组中 [self.paths addObject:path]; } // 移动 - (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event { // 获取手指触摸的位置 CGPoint movePoint = [self getCurrentPointWithTouchPoint:touches]; // 取出当前的path UIBezierPath *path = [self.paths lastObject]; // 设置当前路径的终点 [path addLineToPoint:movePoint]; // 调用drawRect方法重回视图 [self setNeedsDisplay]; } // 离开view(停止触摸) - (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event { [self touchesMoved:touches withEvent:event]; } - (CGPoint)getCurrentPointWithTouchPoint : (NSSet *)touches { // 获取手指对应UITouch对象 UITouch *touch = [touches anyObject]; // 通过UITouch对象获取手指触摸的位置 CGPoint point = [touch locationInView:touch.view]; return point; } - (void)drawRect:(CGRect)rect { [[UIColor cyanColor] set]; // Drawing code // 遍历数组绘制所有的线段 for (UIBezierPath *path in self.paths) { [path stroke]; } } - (void)clearPaths { [self.paths removeAllObjects]; [self setNeedsDisplay]; } - (void)removeLastPath { [self.paths removeLastObject]; [self setNeedsDisplay]; } @end
UIImage+captureView.h
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
#import <UIKit/UIKit.h> @interface UIImage (captureView) + (UIImage *)captureImageWithView : (UIView *)view; @end
UIImage+captureView.m
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
// // UIImage+captureView.m // 画画板 // // Created by apple on 14-6-12. // Copyright (c) 2014年 lwt. All rights reserved. // #import "UIImage+captureView.h" @implementation UIImage (captureView) + (UIImage *)captureImageWithView:(UIView *)view { // 创建bitmap上下文 UIGraphicsBeginImageContext(view.bounds.size); // 将要保存的view的layer绘制到bitmap上下文中 [view.layer renderInContext:UIGraphicsGetCurrentContext()]; // 取出绘制号的图片 UIImage *image = UIGraphicsGetImageFromCurrentImageContext(); return image; } @end