1、繪制畫板

1.1 繪制簡單畫板

• PaintBoardView.h

  @interface PaintBoardView : UIView@end

• PaintBoardView.m

  @interface PaintBoardView ()/// 路徑@property (nonatomic, strong) UIBezierPath *path;/// 保存所有路徑的數組@property (nonatomic, strong) NSMutableArray *pathsArrayM;@end@implementation PaintBoardView/// 初始化- (instancetype)initWithFrame:(CGRect)frame {if (self = [super initWithFrame:frame]) {self.backgroundColor = [UIColor whiteColor];}return self;}/// 觸摸開始- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(nullable UIEvent *)event {// 獲取觸摸起始點位置CGPoint startPoint = [touches.anyObject locationInView:self];// 添加路徑描繪起始點[self.path moveToPoint:startPoint];// 添加一條觸摸路徑描繪[self.pathsArrayM addObject:self.path];}/// 觸摸移動- (void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(nullable UIEvent *)event {// 獲取觸摸點位置CGPoint touchPoint = [touches.anyObject locationInView:self];// 添加路徑描繪[self.path addLineToPoint:touchPoint];// 刷新視圖[self setNeedsDisplay];}/// 觸摸結束- (void)touchesEnded:(NSSet<UITouch *> *)touches withEvent:(nullable UIEvent *)event {// 獲取繪制結果UIGraphicsBeginImageContextWithOptions(self.bounds.size, NO, 0);CGContextRef ctx = UIGraphicsGetCurrentContext();[self.layer renderInContext:ctx];UIImage *image = UIGraphicsGetImageFromCurrentImageContext();UIGraphicsEndImageContext();NSData *data = UIImagePNGRepresentation(image);[data writeToFile:@"/Users/JHQ0228/Desktop/Images/pic.png" atomically:YES];}/// 觸摸取消- (void)touchesCancelled:(NSSet *)touches withEvent:(nullable UIEvent *)event {[self touchesEnded:touches withEvent:event];}/// 繪制圖形- (void)drawRect:(CGRect)rect {for (UIBezierPath *path in self.pathsArrayM) {// 繪制路徑[path stroke];}}/// 懶加載- (UIBezierPath *)path {if (_path == nil) {_path = [UIBezierPath bezierPath];}return _path;}- (NSMutableArray *)pathsArrayM {if (_pathsArrayM == nil) {_pathsArrayM = [NSMutableArray array];}return _pathsArrayM;}@end

• ViewController.m

  // 創建畫板CGRect frame = CGRectMake(20, 50, self.view.bounds.size.width - 40, 200);PaintBoardView *paintBoard = [[PaintBoardView alloc] initWithFrame:frame];[self.view addSubview:paintBoard];

• 效果

1.2 繪制畫板封裝

• 具體實現代碼見 GitHub 源碼 QExtension

• QPaintBoardPath.h

  @interface QPaintBoardPath : UIBezierPath/// 線的顏色@property (nonatomic, strong) UIColor *pathColor;/// 線的寬度@property (nonatomic, assign) CGFloat pathWidth;@end

• QPaintBoardPath.m

  @implementation QPaintBoardPath@end

• QPaintBoardView.h

  @interface QPaintBoardView : UIView/// 畫線的寬度，default is 1，max is 30@property (nonatomic, assign) CGFloat paintLineWidth;/// 畫筆的顏色，default is blackColor@property (nonatomic, strong) UIColor *paintLineColor;/// 畫板的顏色，default is whiteColor@property (nonatomic, strong) UIColor *paintBoardColor;/*** 創建畫板視圖控件，獲取繪畫結果** @param frame 畫板視圖控件 frame* @param lineWidth 畫筆的線寬，default is 1，max is 30* @param lineColor 畫筆的顏色，default is blackColor* @param boardColor 畫板的顏色，default is whiteColor* @param result 繪畫結果** @return 手勢鎖視圖控件*/+ (instancetype)q_paintBoardViewWithFrame:(CGRect)framelineWidth:(CGFloat)lineWidthlineColor:(nullable UIColor *)lineColorboardColor:(nullable UIColor *)boardColorpaintResult:(void (^)(UIImage * _Nullable image))result;/*** 創建簡單畫板視圖控件** @param frame 畫板視圖控件 frame** @return 手勢鎖視圖控件*/+ (instancetype)q_paintBoardViewWithFrame:(CGRect)frame;/*** 獲取繪畫結果** @return 繪畫結果圖片*/- (UIImage * _Nullable)q_getPaintImage;/*** 清除繪畫結果*/- (void)q_clear;/*** 撤銷繪畫結果*/- (void)q_back;@end

• QPaintBoardView.m

  #import "QPaintBoardPath.h"@interface QPaintBoardView ()/// 路徑@property (nonatomic, strong, nullable) QPaintBoardPath *path;/// 保存所有路徑的數組@property (nonatomic, strong) NSMutableArray *pathsArrayM;/// 繪畫結果@property (nonatomic, copy) void (^resultBlock)(UIImage * _Nullable);/// 按鈕工具條@property (nonatomic, strong) UIView *toolView;/// 畫筆設置視圖@property (nonatomic, strong) UIView *brushSetingView;/// 顏色選擇視圖@property (nonatomic, strong) UIScrollView *colorSelectedView;/// 畫板設置視圖@property (nonatomic, strong) UIScrollView *boardSetingView;/// 記錄線的顏色@property (nonatomic, strong) UIColor *lastPaintLineColor;/// 記錄線的寬度@property (nonatomic, assign) CGFloat lastPaintLineWidth;@end@implementation QPaintBoardView#pragma mark - 創建畫板/// 創建畫板視圖控件，獲取繪畫結果+ (instancetype)q_paintBoardViewWithFrame:(CGRect)framelineWidth:(CGFloat)lineWidthlineColor:(nullable UIColor *)lineColorboardColor:(nullable UIColor *)boardColorpaintResult:(void (^)(UIImage * _Nullable image))result {QPaintBoardView *paintBoardView = [[self alloc] init];// CGRect tmpFrame = frame;// tmpFrame.size.height = frame.size.height + 44;paintBoardView.frame = frame;paintBoardView.paintLineWidth = (lineWidth > 30 ? 30 : lineWidth) ? : 1;paintBoardView.paintLineColor = lineColor ? : [UIColor blackColor];paintBoardView.paintBoardColor = boardColor ? : [UIColor whiteColor];paintBoardView.resultBlock = result;return paintBoardView;}/// 創建簡單畫板視圖控件+ (instancetype)q_paintBoardViewWithFrame:(CGRect)frame {QPaintBoardView *paintBoardView = [[self alloc] initWithFrame:frame];paintBoardView.paintLineWidth = 1;paintBoardView.paintLineColor = [UIColor blackColor];paintBoardView.paintBoardColor = [UIColor whiteColor];return paintBoardView;}#pragma mark - 自定義畫板/// 初始化，自定義畫板界面- (instancetype)init {if (self = [super init]) {self.clipsToBounds = YES;// 添加工具按鈕視圖self.toolView = [[UIView alloc] init];self.toolView.backgroundColor = [UIColor blackColor];[self addSubview:self.toolView];NSArray *imageNames = @[@"btn_brush", @"btn_board", @"btn_eraser", @"btn_back", @"btn_clear", @"btn_save"];NSArray *selectedImageNames = @[@"btn_brush_pressed", @"btn_board_pressed", @"btn_eraser_pressed"];for (NSUInteger i = 0; i < 6; i++) {UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];button.tag = i;[button setBackgroundImage:[self q_getBundleImageWithName:imageNames[i]] forState:UIControlStateNormal];[button addTarget:self action:@selector(toolButtonClick:) forControlEvents:UIControlEventTouchUpInside];[self.toolView addSubview:button];if (i < 3) {[button setBackgroundImage:[self q_getBundleImageWithName:selectedImageNames[i]] forState:UIControlStateSelected];}}// 添加畫筆設置視圖self.brushSetingView = [[UIView alloc] init];self.brushSetingView.backgroundColor = [UIColor grayColor];[self addSubview:self.brushSetingView];[self sendSubviewToBack:self.brushSetingView];UIView *widthBackView = [[UIView alloc] init];widthBackView.layer.borderWidth = 1;widthBackView.layer.borderColor = [UIColor lightGrayColor].CGColor;UIView *widthView = [[UIView alloc] init];[widthBackView addSubview:widthView];[self.brushSetingView addSubview:widthBackView];UISlider *widthSlider = [[UISlider alloc] init];widthSlider.thumbTintColor = [UIColor orangeColor];[widthSlider addTarget:self action:@selector(widthSliderClick:) forControlEvents:UIControlEventValueChanged];[self.brushSetingView addSubview:widthSlider];UIButton *colorSelectedBtn = [[UIButton alloc] init];colorSelectedBtn.layer.borderWidth = 1;colorSelectedBtn.layer.borderColor = [UIColor lightGrayColor].CGColor;[colorSelectedBtn addTarget:self action:@selector(colorSelectedBtnClick:) forControlEvents:UIControlEventTouchUpInside];[self.brushSetingView addSubview:colorSelectedBtn];// 添加畫筆顏色選擇視圖self.colorSelectedView = [[UIScrollView alloc] init];self.colorSelectedView.backgroundColor = [[UIColor grayColor] colorWithAlphaComponent:0.3];self.colorSelectedView.showsHorizontalScrollIndicator = NO;[self addSubview:self.colorSelectedView];[self sendSubviewToBack:self.colorSelectedView];NSArray *colorArray = @[[UIColor blackColor], [UIColor whiteColor], [UIColor redColor],[UIColor greenColor], [UIColor blueColor], [UIColor cyanColor],[UIColor magentaColor], [UIColor orangeColor], [UIColor yellowColor],[UIColor darkGrayColor], [UIColor lightGrayColor], [UIColor brownColor],[UIColor grayColor], [UIColor purpleColor]];for (NSUInteger i = 0; i < 14; i++) {UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];button.layer.borderWidth = 1;button.layer.borderColor = [UIColor lightGrayColor].CGColor;[button setBackgroundColor:colorArray[i]];[button addTarget:self action:@selector(colorSelectedClick:) forControlEvents:UIControlEventTouchUpInside];[self.colorSelectedView addSubview:button];}// 添加畫板設置視圖self.boardSetingView = [[UIScrollView alloc] init];self.boardSetingView.backgroundColor = [UIColor grayColor];self.boardSetingView.showsHorizontalScrollIndicator = NO;[self addSubview:self.boardSetingView];[self sendSubviewToBack:self.boardSetingView];for (NSUInteger i = 0; i < 14; i++) {UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];button.layer.borderWidth = 1;button.layer.borderColor = [UIColor lightGrayColor].CGColor;[button setBackgroundColor:colorArray[i]];[button addTarget:self action:@selector(boardColorSelectedClick:) forControlEvents:UIControlEventTouchUpInside];[self.boardSetingView addSubview:button];}}return self;}/// 布局子控件- (void)layoutSubviews {[super layoutSubviews];if (self.subviews.count) {// 設置工具按鈕視圖self.toolView.frame = CGRectMake(0, self.bounds.size.height - 44, self.bounds.size.width, 44);for (NSUInteger i = 0; i < 6; i++) {CGFloat margin = (self.bounds.size.width - 44 * 6) / 7;CGFloat x = margin + (margin + 44) * i;self.toolView.subviews[i].frame = CGRectMake(x, 0, 44, 44);}// 設置畫筆設置視圖self.brushSetingView.frame = CGRectMake(0, self.bounds.size.height - 44, self.bounds.size.width, 60);self.brushSetingView.subviews[0].frame = CGRectMake(15, 15, 30, 30);self.brushSetingView.subviews[0].layer.cornerRadius = 15;self.brushSetingView.subviews[0].layer.masksToBounds = YES;CGFloat w = self.paintLineWidth;self.brushSetingView.subviews[0].subviews[0].frame = CGRectMake(15 - w / 2, 15 - w / 2, w, w);self.brushSetingView.subviews[0].subviews[0].layer.cornerRadius = w / 2;self.brushSetingView.subviews[0].subviews[0].layer.masksToBounds = YES;self.brushSetingView.subviews[0].subviews[0].backgroundColor = self.paintLineColor;self.brushSetingView.subviews[1].frame = CGRectMake(60, 15, self.bounds.size.width - 60 - 80, 32);UISlider *slider = self.brushSetingView.subviews[1];slider.value = self.paintLineWidth / 30;self.brushSetingView.subviews[2].frame = CGRectMake(self.bounds.size.width - 60, 15, 50, 30);self.brushSetingView.subviews[2].backgroundColor = self.paintLineColor;// 設置畫筆顏色選擇視圖self.colorSelectedView.frame = CGRectMake(0, self.bounds.size.height - 44, self.bounds.size.width, 60);self.colorSelectedView.contentSize = CGSizeMake(14 * (50 + 20) + 20, 50);for (NSUInteger i = 0; i < 14; i++) {CGFloat x = 20 + (20 + 50) * i;self.colorSelectedView.subviews[i].frame = CGRectMake(x, 10, 50, 40);}// 設置畫板設置視圖self.boardSetingView.frame = CGRectMake(0, self.bounds.size.height - 44, self.bounds.size.width, 60);self.boardSetingView.contentSize = CGSizeMake(14 * (50 + 20) + 20, 50);for (NSUInteger i = 0; i < 14; i++) {CGFloat x = 20 + (20 + 50) * i;self.boardSetingView.subviews[i].frame = CGRectMake(x, 10, 50, 40);}}}/// 工具按鈕點擊事件處理- (void)toolButtonClick:(UIButton *)btn {switch (btn.tag) {case 0: {// 畫筆設置[self exitEraseState];if (btn.isSelected == NO) {[self hideBoardSetingView];[self showColorSelectedView];[self showBrushSetingView];} else {[self hideColorSelectedView];[self hideBrushSetingView];}break;}case 1: {// 畫板設置[self exitEraseState];if (btn.isSelected == NO) {[self hideColorSelectedView];[self hideBrushSetingView];[self showBoardSetingView];} else {[self hideBoardSetingView];}break;}case 2: {// 擦除[self hideBoardSetingView];[self hideColorSelectedView];[self hideBrushSetingView];if (btn.selected == NO) {[self enterEraseState];} else {[self exitEraseState];}break;}case 3: {// 撤銷[self hideBoardSetingView];[self hideColorSelectedView];[self hideBrushSetingView];[self q_back];break;}case 4: {// 清除[self hideBoardSetingView];[self hideColorSelectedView];[self hideBrushSetingView];[self exitEraseState];[self q_clear];break;}case 5: {// 獲取繪制結果[self hideBoardSetingView];[self hideColorSelectedView];[self hideBrushSetingView];[self exitEraseState];if (self.resultBlock) {self.resultBlock([self q_getPaintImage]);}break;}default:break;}}/// 畫筆線寬設置按鈕點擊事件處理- (void)widthSliderClick:(UISlider *)slider {if (slider.value == 0) {self.paintLineWidth = 1;} else {self.paintLineWidth = slider.value * 30;}CGFloat w = self.paintLineWidth;self.brushSetingView.subviews[0].subviews[0].frame = CGRectMake(15 - w / 2, 15 - w / 2, w, w);self.brushSetingView.subviews[0].subviews[0].layer.cornerRadius = w / 2;}/// 畫筆顏色選擇按鈕點擊事件處理- (void)colorSelectedBtnClick:(UIButton *)btn {if (btn.selected == NO) {[self showColorSelectedView];} else {[self hideColorSelectedView];}}/// 畫筆顏色選擇點擊響應事件處理- (void)colorSelectedClick:(UIButton *)btn {self.paintLineColor = btn.backgroundColor;self.brushSetingView.subviews[0].subviews[0].backgroundColor = btn.backgroundColor;self.brushSetingView.subviews[2].backgroundColor = btn.backgroundColor;}/// 畫板顏色選擇點擊響應事件處理- (void)boardColorSelectedClick:(UIButton *)btn {self.paintBoardColor = btn.backgroundColor;}/// 顯示畫筆設置視圖- (void)showBrushSetingView {UIButton *setBrushBtn = self.toolView.subviews[0];if (setBrushBtn.selected == NO) {setBrushBtn.selected = YES;[UIView animateWithDuration:0.2 animations:^{CGRect frame = CGRectMake(0, self.bounds.size.height - 44 - 60, self.bounds.size.width, 60);self.brushSetingView.frame = frame;}];}}/// 隱藏畫筆設置視圖- (void)hideBrushSetingView {UIButton *setBrushBtn = self.toolView.subviews[0];if (setBrushBtn.selected) {setBrushBtn.selected = NO;[UIView animateWithDuration:0.2 animations:^{CGRect frame = CGRectMake(0, self.bounds.size.height - 44, self.bounds.size.width, 60);self.brushSetingView.frame = frame;}];}}// 顯示畫筆顏色選擇視圖- (void)showColorSelectedView {UIButton *colorSelectedBtn = self.brushSetingView.subviews[2];if (colorSelectedBtn.selected == NO) {colorSelectedBtn.selected = YES;[UIView animateWithDuration:0.2 animations:^{CGRect frame = CGRectMake(0, self.bounds.size.height - 44 - 60 - 60, self.bounds.size.width, 60);self.colorSelectedView.frame = frame;}];}}/// 隱藏畫筆顏色選擇視圖- (void)hideColorSelectedView {UIButton *colorSelectedBtn = self.brushSetingView.subviews[2];if (colorSelectedBtn.selected) {colorSelectedBtn.selected = NO;[UIView animateWithDuration:0.2 animations:^{CGRect frame = CGRectMake(0, self.bounds.size.height - 44, self.bounds.size.width, 60);self.colorSelectedView.frame = frame;}];}}/// 顯示畫板設置視圖- (void)showBoardSetingView {UIButton *setBoardBtn = self.toolView.subviews[1];if (setBoardBtn.selected == NO) {setBoardBtn.selected = YES;[UIView animateWithDuration:0.2 animations:^{CGRect frame = CGRectMake(0, self.bounds.size.height - 44 - 60, self.bounds.size.width, 60);self.boardSetingView.frame = frame;}];}}/// 隱藏畫板設置視圖- (void)hideBoardSetingView {UIButton *setBoardBtn = self.toolView.subviews[1];if (setBoardBtn.selected) {setBoardBtn.selected = NO;[UIView animateWithDuration:0.2 animations:^{CGRect frame = CGRectMake(0, self.bounds.size.height - 44, self.bounds.size.width, 60);self.boardSetingView.frame = frame;}];}}/// 進入擦除狀態- (void)enterEraseState {UIButton *setEraseBtn = self.toolView.subviews[2];if (setEraseBtn.selected == NO) {setEraseBtn.selected = YES;self.lastPaintLineColor = self.paintLineColor;self.paintLineColor = self.paintBoardColor;self.lastPaintLineWidth = self.paintLineWidth;self.paintLineWidth = self.paintLineWidth + 5;}}/// 退出擦除狀態- (void)exitEraseState {UIButton *setEraseBtn = self.toolView.subviews[2];if (setEraseBtn.isSelected) {setEraseBtn.selected = NO;self.paintLineColor = self.lastPaintLineColor;self.paintLineWidth = self.lastPaintLineWidth;}}#pragma mark - 繪制圖案/// 觸摸開始- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(nullable UIEvent *)event {if (self.subviews.count) {[self hideColorSelectedView];[self hideBrushSetingView];[self hideBoardSetingView];}// 獲取觸摸起始點位置CGPoint startPoint = [touches.anyObject locationInView:self];// 添加路徑描繪起始點[self.path moveToPoint:startPoint];// 記錄線的屬性self.path.pathColor = self.paintLineColor;self.path.pathWidth = self.paintLineWidth;// 添加一條觸摸路徑描繪[self.pathsArrayM addObject:self.path];}/// 觸摸移動- (void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(nullable UIEvent *)event {// 獲取觸摸點位置CGPoint touchPoint = [touches.anyObject locationInView:self];// 添加路徑描繪[self.path addLineToPoint:touchPoint];// 刷新視圖[self setNeedsDisplay];}/// 觸摸結束- (void)touchesEnded:(NSSet<UITouch *> *)touches withEvent:(nullable UIEvent *)event {// 銷毀 pathself.path = nil;}/// 觸摸取消- (void)touchesCancelled:(NSSet *)touches withEvent:(nullable UIEvent *)event {[self touchesEnded:touches withEvent:event];}/// 繪制圖形，只要調用 drawRect 方法就會把之前的內容全部清空- (void)drawRect:(CGRect)rect {for (QPaintBoardPath *path in self.pathsArrayM) {// 繪制路徑path.lineWidth = path.pathWidth;[path.pathColor setStroke];path.lineCapStyle = kCGLineCapRound;path.lineJoinStyle = kCGLineJoinRound;[path stroke];}}/// 獲取繪畫結果- (UIImage * _Nullable)q_getPaintImage {UIImage *image = nil;CGSize boardSize = self.bounds.size;if (self.subviews.count) {boardSize.height = self.bounds.size.height - 44;}if (self.pathsArrayM.count) {UIGraphicsBeginImageContextWithOptions(boardSize, NO, 0);CGContextRef ctx = UIGraphicsGetCurrentContext();[self.layer renderInContext:ctx];image = UIGraphicsGetImageFromCurrentImageContext();UIGraphicsEndImageContext();}return image;}/// 清除繪畫結果- (void)q_clear {if (self.pathsArrayM.count) {[self.pathsArrayM removeAllObjects];[self setNeedsDisplay];}}/// 撤銷繪畫結果- (void)q_back {if (self.pathsArrayM.count) {[self.pathsArrayM removeLastObject];[self setNeedsDisplay];}}/// 懶加載- (QPaintBoardPath * _Nullable)path {// path 每次繪制完成后需要銷毀，否則無法清除之前繪制的路徑if (_path == nil) {_path = [QPaintBoardPath bezierPath];}return _path;}- (NSMutableArray *)pathsArrayM {if (_pathsArrayM == nil) {_pathsArrayM = [NSMutableArray array];}return _pathsArrayM;}/// 設置屬性值- (void)setPaintBoardColor:(UIColor *)paintBoardColor {_paintBoardColor = paintBoardColor;self.backgroundColor = paintBoardColor;}/// 加載 bundle 中的圖片- (UIImage *)q_getBundleImageWithName:(NSString *)name {NSString *bundlePath = [[[NSBundle mainBundle] resourcePath] stringByAppendingPathComponent:@"QPaintBoardView.bundle"];UIImage *image = [[UIImage imageWithContentsOfFile:[bundlePath stringByAppendingPathComponent:name]]imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];return image;}@end

• 1、創建簡單畫板

  // 創建簡單畫板CGRect frame = CGRectMake(20, 50, self.view.bounds.size.width - 40, 200);QPaintBoardView *paintBoardView = [QPaintBoardView q_paintBoardViewWithFrame:frame];// 可選屬性值設置paintBoardView.paintLineWidth = 5; // default is 1paintBoardView.paintLineColor = [UIColor redColor]; // default is blackColorpaintBoardView.paintBoardColor = [UIColor cyanColor]; // default is whiteColor[self.view addSubview:paintBoardView];self.paintBoardView = paintBoardView;// 撤銷繪畫結果[self.paintBoardView q_back];// 清除繪畫結果[self.paintBoardView q_clear];// 獲取繪畫結果UIImage *image = [self.paintBoardView q_getPaintImage];

  • 效果

• 2、創建畫板

  // 創建畫板QPaintBoardView *paintBoard = [QPaintBoardView q_paintBoardViewWithFrame:self.view.boundslineWidth:0lineColor:nilboardColor:nilpaintResult:^(UIImage * _Nullable image) {if (image) {NSData *data = UIImagePNGRepresentation(image);[data writeToFile:@"/Users/JHQ0228/Desktop/Images/pic.png" atomically:YES];}}];[self.view addSubview:paintBoard];

  • 效果

轉載于:https://www.cnblogs.com/QianChia/p/6286346.html

總結

以上是生活随笔為你收集整理的iOS - Quartz 2D 画板绘制的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。