How to get rid of these “dots” between my lines when I draw?

Question

Is there an easy way not to draw these points in my lines?
I don’t know why these moments exist, because I never take my finger off the screen while drawing a line.

I got the code from a drawing example.

// draw a line - (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event { mouseSwiped = YES; UITouch *touch = [touches anyObject]; CGPoint currentPoint = [touch locationInView:self.view]; currentPoint.y -= 0; // 20 only for 'kCGLineCapRound' UIGraphicsBeginImageContext(self.view.frame.size); //Albert Renshaw - Apps4Life [drawImage.image drawInRect:CGRectMake(0, 0, drawImage.frame.size.width, drawImage.frame.size.height)]; //originally self.frame.size.width, self.frame.size.height)]; CGContextSetLineCap(UIGraphicsGetCurrentContext(), kCGLineCapRound); //kCGLineCapSquare, kCGLineCapButt, kCGLineCapRound CGContextSetLineWidth(UIGraphicsGetCurrentContext(), brushSize); // for size CGContextSetRGBStrokeColor(UIGraphicsGetCurrentContext(), r, g, b, alpha); //values for R, G, B, and Alpha CGContextBeginPath(UIGraphicsGetCurrentContext()); CGContextMoveToPoint(UIGraphicsGetCurrentContext(), lastPoint.x, lastPoint.y); CGContextAddLineToPoint(UIGraphicsGetCurrentContext(), currentPoint.x, currentPoint.y); CGContextStrokePath(UIGraphicsGetCurrentContext()); drawImage.image = UIGraphicsGetImageFromCurrentImageContext(); UIGraphicsEndImageContext(); lastPoint = currentPoint; mouseMoved++; if (mouseMoved == 10) { mouseMoved = 0; } } - (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event { //Draw a dot if(!mouseSwiped) { UIGraphicsBeginImageContext(self.view.frame.size); [drawImage.image drawInRect:CGRectMake(0, 0, drawImage.frame.size.width, drawImage.frame.size.height)]; //originally self.frame.size.width, self.frame.size.height)]; CGContextSetLineCap(UIGraphicsGetCurrentContext(), kCGLineCapRound); //kCGLineCapSquare, kCGLineCapButt, kCGLineCapRound CGContextSetLineWidth(UIGraphicsGetCurrentContext(), brushSize); CGContextSetRGBStrokeColor(UIGraphicsGetCurrentContext(), r, g, b, alpha); CGContextMoveToPoint(UIGraphicsGetCurrentContext(), lastPoint.x, lastPoint.y); CGContextAddLineToPoint(UIGraphicsGetCurrentContext(), lastPoint.x, lastPoint.y); CGContextStrokePath(UIGraphicsGetCurrentContext()); CGContextFlush(UIGraphicsGetCurrentContext()); drawImage.image = UIGraphicsGetImageFromCurrentImageContext(); UIGraphicsEndImageContext(); } } 

This is the final version with a unique alpha, color, brush for each line:

 - (void) updateDrawingBoard { UIGraphicsBeginImageContext(self.drawImage.bounds.size); for ( NSDictionary *dict in paths ) { UIBezierPath *p = (UIBezierPath*)[dict objectForKey:@"path"]; p.lineWidth = [[dict objectForKey:@"size"]floatValue]; [[UIColor colorWithRed:[[dict objectForKey:@"red"]floatValue] green:[[dict objectForKey:@"green"]floatValue] blue:[[dict objectForKey:@"blue"]floatValue] alpha:[[dict objectForKey:@"alpha"]floatValue]] setStroke]; [p stroke]; } [[UIColor colorWithRed:r green:g blue:b alpha:alpha] setStroke]; [path stroke]; self.drawImage.image = UIGraphicsGetImageFromCurrentImageContext(); UIGraphicsEndImageContext(); } - (void) touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event { CGPoint touchPoint = [[touches anyObject] locationInView:self.drawImage]; path = [[UIBezierPath bezierPath] retain]; path.lineCapStyle = kCGLineCapRound; path.lineJoinStyle = kCGLineJoinBevel; path.lineWidth = brushSize; [path moveToPoint:touchPoint]; [self updateDrawingBoard]; } - (void) touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event { CGPoint touchPoint = [[touches anyObject] locationInView:self.drawImage]; [path addLineToPoint:touchPoint]; NSDictionary *dict = [NSDictionary dictionaryWithObjectsAndKeys: path,@"path", [NSNumber numberWithFloat:r], @"red", [NSNumber numberWithFloat:g], @"green", [NSNumber numberWithFloat:b], @"blue", [NSNumber numberWithFloat:alpha], @"alpha", [NSNumber numberWithFloat:brushSize], @"size", nil]; [paths addObject:dict]; [path release]; path = nil; [self updateDrawingBoard]; } - (void) touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event { CGPoint touchPoint = [[touches anyObject] locationInView:self.drawImage]; [path addLineToPoint:touchPoint]; [self updateDrawingBoard]; } 

Answer 1

The problem is that you gradually accumulate a line, drawing in the image. If the old line and the new line overlap, you see “dots” from reinstalling.

The solution is to accumulate your points in the path and re-draw the image every time using this path. Since you will be drawing a single path, rather than multiple overlapping paths, you should not see dots.

Code Scheme:

• Create a CGMutablePathRef some time before you start drawing.
• When you get the new point you want to add to your line, use CGPathAddLineToPoint .
• When you need to draw a path, use CGContextAddPath to add a string to the context, then fill or stroke as desired. You can also use CGContextDrawPath .

Alternatively, you can use UIBezierPath instead of CGMutablePathRef , in which case the following steps:

• Create a UIBezierPath .
• Use -addLineToPoint: to add lines to the path.
• Use -stroke , -fill and similarly draw a path in context.

This will probably be easier if you are not used to working directly with CoreGraphics.

I would dump the intermediate image and move this code to the view class ( LineDrawView or CanvasView or something else), and not leave the code in the view controller. Instead of updating the image, the view can simply be drawn directly on screene. A view would have methods to clear the path, reverse the strokes and create an image of the path. Then, the view controller used them to clear the canvas, undo lines, and save the drawing. You can enrich this later with functionality to customize the line style.

Answer 2

I have been trying to overcome this problem for several days, trying to answer Jeremy W. Sherman, which is probably a very good idea, but not feasible for my implementation.

In my drawing application, I could not get the alpha curves to blend with each other, constantly displaying the path, although the dots disappeared. If you just want a clean, alpha-color path, this is probably the path.

But I found a solution that was much simpler; these adjustments create the perfect real-time alpha color path using blending (think of it as a flip spoil style):

 CGContextSetLineCap(UIGraphicsGetCurrentContext(), kCGLineCapButt); CGContextSetBlendMode(UIGraphicsGetCurrentContext(), kCGBlendModeMultiply); 

Hope this helps anyone who makes a simple CG picture on iOS.