ios開發實現畫板功能

weixin_34321977發表於2017-06-03
iOS

最近看了一些網上的畫板demo，這些demo的實現方式基本上是使用CGContextRef或者UIBezierPath實現，但是基本上都存在一個比較嚴重的bug，在使用擦除功能的時候基本上都是直接將畫板的顏色改為背景的顏色，那麼當背景的是一張圖片或者背景並不是單一顏色而是多種顏色時，擦除功能就會失效。本demo文章將解決這樣一個問題。按照國際慣例先上圖。

2103803-326720f6e78c0740.gif
1.gif

demo主要使用CGContextRef實現，擦除功能使用kCGBlendModeDestinationIn和clearColor聯合使用實現。
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;
/** 設定畫筆顏色 */
- (void)setStrokeColor:(UIColor *)lineColor;
/** 設定畫筆大小 */
- (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;
}

當使用者點選畫板儲存路徑的基本資訊，並畫起始點，根據使用擦除來設定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 系統自動呼叫- (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];
    }
}

清屏功能主要是移除陣列中所有的路徑並呼叫[self setNeedsDisplay]、設定_isEarse = NO
撤消功能主要是移除陣列中最後一個物件並呼叫[self setNeedsDisplay]、設定_isEarse = NO
擦除功能只需修改isEarse屬性為YES
畫筆功能修改lineColor屬性並設定_isEarse = NO
畫筆大小功能修改strokeWidth屬性並設定_isEarse = NO

/** 清屏 */
- (void)clearScreen {
    _isEarse = NO;
    [_stroks removeAllObjects];
    [self setNeedsDisplay];
}

/** 撤消操作 */
- (void)revokeScreen {
    _isEarse = NO;
    [_stroks removeLastObject];
    [self setNeedsDisplay];
}

/** 擦除 */
- (void)eraseSreen {
    self.isEarse = YES;
}
/** 設定畫筆顏色 */
- (void)setStrokeColor:(UIColor *)lineColor {
    _isEarse = NO;
    self.lineColor = lineColor;
//    [self setNeedsDisplay];
}
/** 設定畫筆大小 */
- (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

相關文章