Main.storyboard
<?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" 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"> <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" id="zGs-rQ-Aon" customClass="LWTDrawingView"> <rect key="frame" x="0.0" y="53" width="320" height="290"/> <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/> <color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="calibratedWhite"/> </view> <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="middleTruncation" id="BXY-Uh-bwt"> <rect key="frame" x="20" y="20" width="30" height="30"/> <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/> <state key="normal" title="清屏"> <color key="titleColor" red="0.0" green="0.0" blue="0.0" alpha="1" colorSpace="calibratedRGB"/> <color key="titleShadowColor" white="0.5" alpha="1" colorSpace="calibratedWhite"/> </state> <connections> <action selector="clearScreen" destination="vXZ-lx-hvc" eventType="touchUpInside" id="Z7z-Ev-6j3"/> </connections> </button> <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="middleTruncation" id="DzN-Ep-ahQ"> <rect key="frame" x="145" y="20" width="30" height="30"/> <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/> <state key="normal" title="撤销"> <color key="titleColor" red="0.0" green="0.0" blue="0.0" alpha="1" colorSpace="calibratedRGB"/> <color key="titleShadowColor" white="0.5" alpha="1" colorSpace="calibratedWhite"/> </state> <connections> <action selector="removeLast" destination="vXZ-lx-hvc" eventType="touchUpInside" id="0y3-5M-qsg"/> </connections> </button> <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="middleTruncation" id="PpB-nf-Tsy"> <rect key="frame" x="270" y="20" width="30" height="30"/> <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/> <state key="normal" title="截屏"> <color key="titleColor" red="0.0" green="0.0" blue="0.0" alpha="1" colorSpace="calibratedRGB"/> <color key="titleShadowColor" white="0.5" alpha="1" colorSpace="calibratedWhite"/> </state> <connections> <action selector="cutScreen" destination="vXZ-lx-hvc" eventType="touchUpInside" id="WpD-40-G5b"/> </connections> </button> <view contentMode="scaleToFill" id="Qdu-J2-wjW"> <rect key="frame" x="0.0" y="343" width="320" height="137"/> <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/> <subviews> <view contentMode="scaleToFill" id="QzE-x7-3fo"> <rect key="frame" x="20" y="68" width="133" height="28"/> <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/> <subviews> <label opaque="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="红" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" id="FW8-Gw-zn8"> <rect key="frame" x="0.0" y="3" width="17" height="21"/> <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/> <fontDescription key="fontDescription" type="system" pointSize="14"/> <nil key="highlightedColor"/> </label> <slider opaque="NO" tag="1" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" minValue="0.0" maxValue="255" id="Xcl-ef-86f"> <rect key="frame" x="23" y="-2" width="106" height="31"/> <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/> <connections> <action selector="colorChange:" destination="vXZ-lx-hvc" eventType="valueChanged" id="hXl-tF-APf"/> </connections> </slider> </subviews> <color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="calibratedWhite"/> </view> <view contentMode="scaleToFill" id="DA1-pG-lDr"> <rect key="frame" x="161" y="68" width="133" height="28"/> <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/> <subviews> <label opaque="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="绿" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" id="5qb-5u-s9v"> <rect key="frame" x="0.0" y="3" width="17" height="21"/> <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/> <fontDescription key="fontDescription" type="system" pointSize="14"/> <nil key="highlightedColor"/> </label> <slider opaque="NO" tag="2" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" minValue="0.0" maxValue="255" id="iwb-rt-4iD"> <rect key="frame" x="29" y="-2" width="106" height="31"/> <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/> <connections> <action selector="colorChange:" destination="vXZ-lx-hvc" eventType="valueChanged" id="RAc-kx-DFR"/> </connections> </slider> </subviews> <color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="calibratedWhite"/> </view> <view contentMode="scaleToFill" id="s2U-Ce-qso"> <rect key="frame" x="20" y="99" width="133" height="28"/> <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/> <subviews> <label opaque="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="蓝" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" id="11I-oN-7rI"> <rect key="frame" x="0.0" y="3" width="17" height="21"/> <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/> <fontDescription key="fontDescription" type="system" pointSize="14"/> <nil key="highlightedColor"/> </label> <slider opaque="NO" tag="3" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" minValue="0.0" maxValue="255" id="9lU-dE-18V"> <rect key="frame" x="23" y="-2" width="106" height="31"/> <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/> <connections> <action selector="colorChange:" destination="vXZ-lx-hvc" eventType="valueChanged" id="001-NE-Bc3"/> </connections> </slider> </subviews> <color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="calibratedWhite"/> </view> <view contentMode="scaleToFill" id="ayu-qe-YDW"> <rect key="frame" x="161" y="99" width="149" height="28"/> <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/> <subviews> <label opaque="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="透明" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" id="dgr-d3-BGQ"> <rect key="frame" x="-5" y="3" width="34" height="21"/> <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/> <fontDescription key="fontDescription" type="system" pointSize="14"/> <nil key="highlightedColor"/> </label> <slider opaque="NO" tag="4" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" value="1" minValue="0.0" maxValue="1" id="Q0N-q5-k79"> <rect key="frame" x="29" y="-2" width="106" height="31"/> <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/> <connections> <action selector="colorChange:" destination="vXZ-lx-hvc" eventType="valueChanged" id="OQx-H5-WJ8"/> </connections> </slider> </subviews> <color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="calibratedWhite"/> </view> <view contentMode="scaleToFill" id="Tya-xR-NlL"> <rect key="frame" x="0.0" y="0.0" width="320" height="36"/> <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/> <subviews> <label opaque="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="画笔粗细" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" id="268-rh-wkE"> <rect key="frame" x="20" y="7" width="68" height="21"/> <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/> <fontDescription key="fontDescription" type="system" pointSize="14"/> <color key="textColor" cocoaTouchSystemColor="darkTextColor"/> <nil key="highlightedColor"/> </label> <slider opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" value="1" minValue="1" maxValue="15" id="LDh-zJ-bDC"> <rect key="frame" x="94" y="3" width="208" height="31"/> <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/> <connections> <action selector="lineWidthChange:" destination="vXZ-lx-hvc" eventType="valueChanged" id="Br8-tO-qjp"/> </connections> </slider> </subviews> <color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="calibratedWhite"/> </view> <view contentMode="scaleToFill" id="iwj-6U-CCL"> <rect key="frame" x="0.0" y="34" width="353" height="32"/> <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/> <subviews> <label opaque="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="画笔颜色" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" id="5a6-Nl-X5C"> <rect key="frame" x="20" y="5" width="68" height="21"/> <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/> <fontDescription key="fontDescription" type="system" pointSize="14"/> <color key="textColor" cocoaTouchSystemColor="darkTextColor"/> <nil key="highlightedColor"/> </label> <view contentMode="scaleToFill" id="VMZ-L3-guK"> <rect key="frame" x="96" y="4" width="205" height="22"/> <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/> <subviews> <label opaque="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" id="UMA-dn-jTE"> <rect key="frame" x="0.0" y="0.0" width="205" height="22"/> <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/> <color key="backgroundColor" red="0.0" green="0.0" blue="0.0" alpha="1" colorSpace="calibratedRGB"/> <fontDescription key="fontDescription" type="system" pointSize="17"/> <color key="textColor" red="1" green="1" blue="1" alpha="1" colorSpace="custom" customColorSpace="calibratedRGB"/> <nil key="highlightedColor"/> </label> </subviews> <color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="calibratedWhite"/> </view> </subviews> <color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="calibratedWhite"/> </view> </subviews> <color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="calibratedWhite"/> </view> </subviews> <color key="backgroundColor" red="1" green="0.62925297680000003" blue="0.36846892539999998" alpha="1" colorSpace="calibratedRGB"/> </view> <connections> <outlet property="drawingView" destination="zGs-rQ-Aon" id="Tri-Vv-f4t"/> <outlet property="lineColor" destination="UMA-dn-jTE" id="9YW-pa-5O9"/> <outlet property="lineWidth" destination="LDh-zJ-bDC" id="p1q-pa-tji"/> </connections> </viewController> <placeholder placeholderIdentifier="IBFirstResponder" id="x5A-6p-PRh" sceneMemberID="firstResponder"/> </objects> <point key="canvasLocation" x="57" y="180"/> </scene> </scenes> <simulatedMetricsContainer key="defaultSimulatedMetrics"> <simulatedStatusBarMetrics key="statusBar"/> <simulatedOrientationMetrics key="orientation"/> <simulatedScreenMetrics key="destination"/> </simulatedMetricsContainer> </document>
LWTViewController.h
#import <UIKit/UIKit.h> @interface LWTViewController : UIViewController @end
LWTViewController.m
// // LWTViewController.m // 画画板精装 // // Created by apple on 14-6-14. // Copyright (c) 2014年 lwt. All rights reserved. // #import "LWTViewController.h" #import "LWTDrawingView.h" #import "LWTColorModel.h" #import "MBProgressHUD+NJ.h" /** * 定义color色值的枚举 */ typedef enum { KColorChangeRedVale = 1, KColorChangeGreenValue, KColorChangeBlueValue, KColorChangeAlphaValue } KColorChange; @interface LWTViewController () /** * 绘图区的view */ @property (weak, nonatomic) IBOutlet LWTDrawingView *drawingView; /** * 颜色的模型 */ @property (nonatomic, strong) LWTColorModel *currentColor; /** * 预览颜色的label */ @property (weak, nonatomic) IBOutlet UILabel *lineColor; /** * 修改线宽的slider */ @property (weak, nonatomic) IBOutlet UISlider *lineWidth; /** * 修改绘画的线的线宽 */ - (IBAction)lineWidthChange:(UISlider *)sender; /** * 改变绘画的线的颜色 */ - (IBAction)colorChange:(UISlider *)sender; /** * 清屏 */ - (IBAction)clearScreen; /** * 撤销最后绘画的线 */ - (IBAction)removeLast; /** * 截屏 */ - (IBAction)cutScreen; @end @implementation LWTViewController - (void)viewDidLoad{ [super viewDidLoad]; // Do any additional setup after loading the view, typically from a nib. /** * 创建色值对象 */ LWTColorModel *color = [LWTColorModel color]; self.currentColor = color; // 设置最大线宽 self.lineWidth.maximumValue = 20; } - (IBAction)lineWidthChange:(UISlider *)sender { // 设置绘画的线宽 self.drawingView.lineWidth = sender.value; } - (IBAction)clearScreen { [self.drawingView clearPath]; } - (IBAction)removeLast { [self.drawingView backPath]; } - (IBAction)cutScreen { UIGraphicsBeginImageContext(self.drawingView.bounds.size); [self.drawingView.layer renderInContext:UIGraphicsGetCurrentContext()]; UIImage *image = UIGraphicsGetImageFromCurrentImageContext(); 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:@"保存成功"]; } } - (IBAction)colorChange:(UISlider *)sender { switch (sender.tag) { case KColorChangeRedVale: // 设置红色的色值 self.currentColor.redValue = sender.value; break; case KColorChangeGreenValue: // 设置绿色的色值 self.currentColor.greenValue = sender.value; break; case KColorChangeBlueValue: // 设置蓝色的色值 self.currentColor.blueValue = sender.value; break; case KColorChangeAlphaValue: // 设置透明度 self.currentColor.alphaValue = sender.value; break; default: break; } // 设置预览的label的背景颜色 self.lineColor.backgroundColor = [self.currentColor getcurrentColor]; // 设置要绘画的线的颜色 self.drawingView.currentColor = [self.currentColor getcurrentColor]; } @end
LWTDrawingView.h
// // LWTDrawingView.h // 画画板精装 // // Created by apple on 14-6-14. // Copyright (c) 2014年 lwt. All rights reserved. // #import <UIKit/UIKit.h> @interface LWTDrawingView : UIView /** * 线宽 */ @property (nonatomic, assign) CGFloat lineWidth; /** * 线的颜色 */ @property (nonatomic, strong) UIColor *currentColor; /** * 清屏 */ - (void)clearPath; /** * 撤销 */ - (void)backPath; @end
LWTDrawingView.m
// // LWTDrawingView.m // 画画板精装 // // Created by apple on 14-6-14. // Copyright (c) 2014年 lwt. All rights reserved. // #import "LWTDrawingView.h" @interface LWTDrawingView () /** * 存储所有线的路径的数组 */ @property (nonatomic, strong) NSMutableArray *paths; /** * 存储所有线的颜色的数组 */ @property (nonatomic, strong) NSMutableArray *colors; @end @implementation LWTDrawingView #pragma mark - 懒加载 - (NSMutableArray *)paths { if (!_paths) { _paths = [NSMutableArray array]; } return _paths; } - (NSMutableArray *)colors { if (!_colors) { _colors = [NSMutableArray array]; } return _colors; } - (CGFloat)lineWidth { if (!_lineWidth) { _lineWidth = 1; } return _lineWidth; } - (UIColor *)currentColor { if (!_currentColor) { _currentColor = [UIColor blackColor]; } return _currentColor; } #pragma mark - 重写init /** * 代码创建时加载 */ - (id)initWithFrame:(CGRect)frame { if (self = [super initWithFrame:frame]) { [self setup]; } return self; } /** * xib或storyboard创建时加载 */ - (id)initWithCoder:(NSCoder *)aDecoder { if (self = [super initWithCoder:aDecoder]) { [self setup]; } return self; } /** * 创建view时添加长按触摸事件 */ - (void)setup { // 给view添加长按事件 UILongPressGestureRecognizer *longPress = [[UILongPressGestureRecognizer alloc] initWithTarget:self action:@selector(longPress:)]; // 设置反应时间 longPress.minimumPressDuration = 0; [self addGestureRecognizer:longPress]; } - (void)drawRect:(CGRect)rect { // 遍历得到所有线的路径 for (int i = 0; i < self.paths.count; i++) { // 线的路径 UIBezierPath *path = self.paths[i]; // 线的颜色 UIColor *currentColor = self.colors[i]; [currentColor set]; // 绘制线 [path stroke]; } } // 长按事件 - (void)longPress: (UILongPressGestureRecognizer *)longPress { // 得到当前的触摸点 CGPoint point = [longPress locationInView:longPress.view]; // 判断长按的状态 if ( longPress.state == UIGestureRecognizerStateBegan) { // 开始长按 UIBezierPath *path = [[UIBezierPath alloc] init]; // 设置起点 [path moveToPoint:point]; // 设置线的属性 [path setLineCapStyle:kCGLineCapRound]; [path setLineJoinStyle:kCGLineJoinRound]; [path setLineWidth:self.lineWidth]; [self.paths addObject:path]; [self.colors addObject:self.currentColor]; }else if (longPress.state == UIGestureRecognizerStateChanged || longPress.state == UIGestureRecognizerStateEnded) { // 移动和结束当前长按状态 UIBezierPath *path = [self.paths lastObject]; [path addLineToPoint:point]; } // 重载drawRect:方法 [self setNeedsDisplay]; } - (void)clearPath { [self.paths removeAllObjects]; [self.colors removeAllObjects]; [self setNeedsDisplay]; } - (void)backPath { [self.paths removeLastObject]; [self.colors removeLastObject]; [self setNeedsDisplay]; } @end
LWTColor.h
#import <UIKit/UIKit.h> @interface LWTColorModel : UIColor @property (nonatomic, assign) CGFloat redValue; @property (nonatomic, assign) CGFloat greenValue; @property (nonatomic, assign) CGFloat blueValue; @property (nonatomic, assign) CGFloat alphaValue; - (UIColor *)getcurrentColor; + (instancetype)color; @end
LWTColor.m
// // LWTColor.m // 画画板精装 // // Created by apple on 14-6-14. // Copyright (c) 2014年 lwt. All rights reserved. // #import "LWTColorModel.h" @interface LWTColorModel () @end @implementation LWTColorModel - (CGFloat)alphaValue { if(!_alphaValue) { _alphaValue = 1.0; } return _alphaValue; } - (UIColor *)getcurrentColor { return [UIColor colorWithRed:self.redValue/255.f green:self.greenValue/255.f blue:self.blueValue/255.f alpha:self.alphaValue]; } + (instancetype)color { return [[self alloc] init]; } @end