A small demo written in the process of learning drawing by myself, record it:
Two methods are summarized to implement the demo function:
The first method: first use a small array to store all the points obtained by moving your finger, each small array is a line, then create a large array to store the small array, put all the line segments in the large array, and then traverse and draw Outgoing segment
First customize a view, inherit from UIView
#import "YJ_View.h" @interface YJ_View () /** * Define a large array (small arrays are stored in the large array, and each small array stores all the points of a line) */ @property (nonatomic, strong) NSMutableArray *totalPoints; @end @implementation YJ_View - (NSMutableArray *)totalPoints { if (_totalPoints == nil) { _totalPoints = [NSMutableArray array]; } return _totalPoints; } - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event { // NSLog(@"touchesBegan"); // 1. Get the UITouch object corresponding to the finger UITouch *touch = [touches anyObject]; // 2. Get the position of the finger touch through the UITouch object CGPoint startPoint = [touch locationInView:touch.view]; // 3. Create a small array to save all the points of the current path NSMutableArray *subPoints = [NSMutableArray array]; // 4. Store the starting point of the finger touch into a small array [subPoints addObject:[NSValue valueWithCGPoint:startPoint]]; // 5. Store the small array into the large array [self.totalPoints addObject:subPoints]; } - (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event { // 1. Get the UITouch object corresponding to the finger UITouch *touch = [touches anyObject]; // 2. Get the position of the finger touch through the UITouch object CGPoint movePoint = [touch locationInView:touch.view]; // 3. Take the small array corresponding to the current path from the large array NSMutableArray *subPoints = [self.totalPoints lastObject]; // 4. Store the points touched when the finger moves into a small array [subPoints addObject:[NSValue valueWithCGPoint:movePoint]]; // 5. Call the drawRect method to return to the view [self setNeedsDisplay]; } - (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event { // 1. Get the UITouch object corresponding to the finger UITouch *touch = [touches anyObject]; // 2. Get the position of the finger touch through the UITouch object CGPoint endPoint = [touch locationInView:touch.view]; // 3. Take the small array corresponding to the current path from the large array NSMutableArray *subPoints = [self.totalPoints lastObject]; // 4. Store the points touched when the finger moves into a small array [subPoints addObject:[NSValue valueWithCGPoint:endPoint]]; // 5. Call the drawRect method to redraw the view [self setNeedsDisplay]; } // draw line - (void)drawRect:(CGRect)rect { // 1. Get the context CGContextRef ctx = UIGraphicsGetCurrentContext(); // Traverse the large array and take out all the small arrays (each small array represents a line segment) for (NSMutableArray *subPointArray in self.totalPoints) { // Traverse the small array, take out all the points in the small array for (int index = 0; index < subPointArray.count; index++) { // 1. Take out each point in the small array CGPoint point = [subPointArray[index] CGPointValue]; // 2. Draw line segments if (0 == index) { // 2.1. Set the starting point of the line segment CGContextMoveToPoint(ctx, point.x, point.y); }else { // 2.2. Set the end point of the line segment CGContextAddLineToPoint(ctx, point.x, point.y); } } } CGContextSetLineCap(ctx, kCGLineCapRound); CGContextSetLineJoin(ctx, kCGLineJoinRound); CGContextSetLineWidth(ctx, 10); // 3. Render CGContextStrokePath(ctx); } - (void)clearView { [self.totalPoints removeAllObjects]; [self setNeedsDisplay]; } - (void)backView { [self.totalPoints removeLastObject]; [self setNeedsDisplay]; } @end
The second method: use path to draw line segments, each path is a line segment, then create an array to store all paths, and finally traverse and draw all line segments (this is the main method)
#import "YJ_View2.h" @interface YJ_View2 () @property (nonatomic, strong) NSMutableArray *paths; @end @implementation YJ_View2 - (NSMutableArray *)paths { if (_paths == nil) { _paths = [NSMutableArray array]; } return _paths; } // start touching - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event { // 1. Get the UITouch object corresponding to the finger UITouch *touch = [touches anyObject]; // 2. Get the position of the finger touch through the UITouch object CGPoint startPoint = [touch locationInView:touch.view]; // 3. Create a path when the user's finger is pressed UIBezierPath *path = [UIBezierPath bezierPath]; // 3.1 Set the relevant properties of the path [path setLineJoinStyle:kCGLineJoinRound]; [path setLineCapStyle:kCGLineCapRound]; [path setLineWidth:10]; // 4.设置当前路径的起点 [path moveToPoint:startPoint]; // 5.将路径添加到数组中 [self.paths addObject:path]; } // 移动 - (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event { // 1.获取手指对应UITouch对象 UITouch *touch = [touches anyObject]; // 2.通过UITouch对象获取手指触摸的位置 CGPoint movePoint = [touch locationInView:touch.view]; // 3.取出当前的path UIBezierPath *currentPaht = [self.paths lastObject]; // 4.设置当前路径的终点 [currentPaht addLineToPoint:movePoint]; // 6.调用drawRect方法重回视图 [self setNeedsDisplay]; } // 离开view(停止触摸) - (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event { [self touchesMoved:touches withEvent:event]; /* // 1.获取手指对应UITouch对象 UITouch *touch = [touches anyObject]; // 2.通过UITouch对象获取手指触摸的位置 CGPoint endPoint = [touch locationInView:touch.view]; // 3.取出当前的path UIBezierPath *currentPaht = [self.paths lastObject]; // 4.设置当前路径的终点 [currentPaht addLineToPoint:endPoint]; // 6.调用drawRect方法重回视图 [self setNeedsDisplay]; */ } // 画线 - (void)drawRect:(CGRect)rect { [[UIColor redColor] set]; // 边路数组绘制所有的线段 for (UIBezierPath *path in self.paths) { [path stroke]; } } - (void)clearView { [self.paths removeAllObjects]; [self setNeedsDisplay]; } - (void)backView { [self.paths removeLastObject]; [self setNeedsDisplay]; } @end
为图片实现打马赛克功能,博文地址:
http://mp.blog.csdn.net/mdeditor/79461592