最近看了一些網(wǎng)上的畫板demo，這些demo的實(shí)現(xiàn)方式基本上是使用CGContextRef或者UIBezierPath實(shí)現(xiàn)，但是基本上都存在一個比較嚴(yán)重的bug凌受，在使用擦除功能的時候基本上都是直接將畫板的顏色改為背景的顏色赌厅，那么當(dāng)背景的是一張圖片或者背景并不是單一顏色而是多種顏色時，擦除功能就會失效砂缩。本demo文章將解決這樣一個問題。按照國際慣例先上圖。
demo主要使用CGContextRef實(shí)現(xiàn)挟冠，擦除功能使用kCGBlendModeDestinationIn和clearColor聯(lián)合使用實(shí)現(xiàn)。
1镣屹、新建DWStroke類存儲CGContextRef信息
DWStroke.h
#import <UIKit/UIKit.h>
typedef struct CGPath *CGMutablePathRef;
typedef enum CGBlendMode CGBlendMode;
@interface DWStroke : NSObject
@property (nonatomic) CGMutablePathRef path;
@property (nonatomic, assign) CGBlendMode blendMode;
@property (nonatomic, assign) CGFloat strokeWidth;
@property (nonatomic, strong) UIColor *lineColor;
- (void)strokeWithContext:(CGContextRef)context;
@end
DWStroke.m
- (void)strokeWithContext:(CGContextRef)context {
CGContextSetStrokeColorWithColor(context, [_lineColor CGColor]);
CGContextSetLineWidth(context, _strokeWidth);
CGContextSetBlendMode(context, _blendMode);
CGContextBeginPath(context);
CGContextAddPath(context, _path);
CGContextStrokePath(context);
}
2圃郊、畫板
DrawTouchPointView.h
#import <UIKit/UIKit.h>
#import <QuartzCore/QuartzCore.h>
@interface DrawTouchPointView : UIView
/** 清屏 */
- (void)clearScreen;
/** 撤消操作 */
- (void)revokeScreen;
/** 擦除 */
- (void)eraseSreen;
/** 設(shè)置畫筆顏色 */
- (void)setStrokeColor:(UIColor *)lineColor;
/** 設(shè)置畫筆大小 */
- (void)setStrokeWidth:(CGFloat)lineWidth;
@end
DrawTouchPointView.m
@interface DrawTouchPointView () {
CGMutablePathRef currentPath;//路徑
}
//是否擦除
@property (nonatomic, assign) BOOL isEarse;
//存儲所有的路徑
@property (nonatomic, strong) NSMutableArray *stroks;
//畫筆顏色
@property (nonatomic, strong) UIColor *lineColor;
//線條寬度
@property (nonatomic, assign) CGFloat lineWidth;
@end
初始化 ，背景顏色必須為[UIColor clearColor]
- (id)initWithFrame:(CGRect)frame {
self = [super initWithFrame:frame];
if (self) {
_stroks = [[NSMutableArray alloc] initWithCapacity:1];
self.backgroundColor = [UIColor clearColor];
}
return self;
}
當(dāng)用戶點(diǎn)擊畫板存儲路徑的基本信息女蜈，并畫起始點(diǎn)持舆，根據(jù)使用擦除來設(shè)置blendMode屬性和畫筆的寬度色瘩，如果是擦除則blendMode = kCGBlendModeDestinationIn，畫筆的大小為20逸寓，畫筆顏色為[UIColor clearColor]
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
currentPath = CGPathCreateMutable();
DWStroke *stroke = [[DWStroke alloc] init];
stroke.path = currentPath;
stroke.blendMode = _isEarse ? kCGBlendModeDestinationIn : kCGBlendModeNormal;
stroke.strokeWidth = _isEarse ? 20.0 : _lineWidth;
stroke.lineColor = _isEarse ? [UIColor clearColor] : _lineColor;
[_stroks addObject:stroke];
UITouch *touch = [touches anyObject];
CGPoint point = [touch locationInView:self];
// CGAffineTransform transform = CGAffineTransformMakeTranslation(0, 0);
// CGPathAddArc(currentPath, &transform, point.x, point.y, _lineWidth/2.0, 0, 2*M_PI, 1);
CGPathMoveToPoint(currentPath, NULL, point.x, point.y);
// [self setNeedsDisplay];
}
開始移動居兆， setNeedsDisplay 系統(tǒng)自動調(diào)用- (void)drawRect:(CGRect)rect
- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {
UITouch *touch = [touches anyObject];
CGPoint point = [touch locationInView:self];
CGPathAddLineToPoint(currentPath, NULL, point.x, point.y);
[self setNeedsDisplay];
}
在- (void)drawRect:(CGRect)rect中畫圖
- (void)drawRect:(CGRect)rect {
CGContextRef context = UIGraphicsGetCurrentContext();
for (DWStroke *stroke in _stroks) {
[stroke strokeWithContext:context];
}
}
清屏功能主要是移除數(shù)組中所有的路徑并調(diào)用[self setNeedsDisplay]、設(shè)置_isEarse = NO
撤消功能主要是移除數(shù)組中最后一個對象并調(diào)用[self setNeedsDisplay]竹伸、設(shè)置_isEarse = NO
擦除功能只需修改isEarse屬性為YES
畫筆功能修改lineColor屬性并設(shè)置_isEarse = NO
畫筆大小功能修改strokeWidth屬性并設(shè)置_isEarse = NO
/** 清屏 */
- (void)clearScreen {
_isEarse = NO;
[_stroks removeAllObjects];
[self setNeedsDisplay];
}
/** 撤消操作 */
- (void)revokeScreen {
_isEarse = NO;
[_stroks removeLastObject];
[self setNeedsDisplay];
}
/** 擦除 */
- (void)eraseSreen {
self.isEarse = YES;
}
/** 設(shè)置畫筆顏色 */
- (void)setStrokeColor:(UIColor *)lineColor {
_isEarse = NO;
self.lineColor = lineColor;
// [self setNeedsDisplay];
}
/** 設(shè)置畫筆大小 */
- (void)setStrokeWidth:(CGFloat)lineWidth {
_isEarse = NO;
self.lineWidth = lineWidth;
}
- (void)dealloc {
CGPathRelease(currentPath);
}
打完收工泥栖，有什么問題歡迎指出！demo：http://code.cocoachina.com/view/135225
https://github.com/wuzaozhou/iOSDrawingBoard
