I can't draw continuous lines on another image using PAN GESTURE - objective-c

Question

The code which I used to draw on images is as given below, I am using panGesture to find where the user touches. Now when I use this code the lines the user draws comes as points when i am moving my hands over the image very fast.
UIGraphicsBeginImageContextWithOptions((self.thatsMyImage.frame.size), NO, 0.0);
[self.selfieImage.image drawInRect:CGRectMake(0,0,self.thatsMyImage.frame.size.width, self.thatsMyImage.frame.size.height)];
[[UIColor whiteColor] set];
CGContextMoveToPoint(UIGraphicsGetCurrentContext(), from.x, from.y);
CGContextAddLineToPoint(UIGraphicsGetCurrentContext(), to.x , to.y);
CGContextSetLineWidth(UIGraphicsGetCurrentContext(), 10.0f);
CGContextStrokeEllipseInRect(UIGraphicsGetCurrentContext(), CGRectMake(to.x, to.y,10,10));
CGContextSetFillColor(UIGraphicsGetCurrentContext(), CGColorGetComponents([[UIColor blueColor] CGColor]));
CGContextFillPath(UIGraphicsGetCurrentContext());
CGContextStrokePath(UIGraphicsGetCurrentContext());
self.thatsMyImage.image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
This is the method which is being called when panGesture is detected.
-(void)freeFormDrawing:(UIPanGestureRecognizer *)gesture
{
if(gesture.state == UIGestureRecognizerStateChanged)
{
CGPoint p = [gesture locationInView:self.selfieImage];
CGPoint startPoint = lastPoint;
lastPoint = [gesture locationInView:self.selfieImage];
[self drawLineFrom:startPoint endPoint:p];
}
if(gesture.state == UIGestureRecognizerStateEnded)
{
// lastPoint = [gesture locationInView:self.selfieImage];
}
}
Can anybody please tell me how can i do free-form (Doodle) on images with smooth lines and curves? Thanks in advance and Happy Coding!

Answer 1

I had implemented the same what I had was that I was adding a transparent UIImageView above the UIImageView that had my UIImage I wanted to draw on.
UIImageView *drawableView = [[UIImageView alloc]initWithFrame:self.drawImageView.bounds];
drawableView.userInteractionEnabled = YES;
UIPanGestureRecognizer *panGesture = [[UIPanGestureRecognizer alloc] initWithTarget:self action:#selector(drawingViewDidPan:)];
[drawableView addGestureRecognizer:panGesture];
Then when the user panned on the UIImageView I would call this function
- (void)drawingViewDidPan:(UIPanGestureRecognizer*)sender
{
CGPoint currentDraggingPosition = [sender locationInView:drawableView];
if(sender.state == UIGestureRecognizerStateBegan) {
prevDraggingPosition = currentDraggingPosition;
}
if(sender.state != UIGestureRecognizerStateEnded){
[self drawLine:prevDraggingPosition to:currentDraggingPosition];
}
prevDraggingPosition = currentDraggingPosition;
}
Both prevDraggingPosition and currentDraggingPosition are CGPoint.
Then I used the following function to draw line from the prevDraggingPosition to currentDraggingPosition
-(void)drawLine:(CGPoint)from to:(CGPoint)to
{
#autoreleasepool {
CGSize size = drawableView.frame.size;
UIGraphicsBeginImageContextWithOptions(size, NO, 0.0);
CGContextRef context = UIGraphicsGetCurrentContext();
[drawableView.image drawAtPoint:CGPointZero];
CGFloat strokeWidth = 4.0;
strokeColor = colorChangeView.backgroundColor;
CGContextSetLineWidth(context, strokeWidth);
CGContextSetStrokeColorWithColor(context, strokeColor.CGColor);
CGContextSetLineCap(context, kCGLineCapRound);
CGContextMoveToPoint(context, from.x, from.y);
CGContextAddLineToPoint(context, to.x, to.y);
CGContextStrokePath(context);
drawableView.image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
}
}
Then finally to get the image with the drawing on it you can build the image by drawing the drawableView image onto your UIImageView that has your image like this.
- (UIImage*)buildImage
{
#autoreleasepool {
UIGraphicsBeginImageContextWithOptions(originalImageSize, NO, self.drawImageView.image.scale);
[self.drawImageView.image drawAtPoint:CGPointZero];
[drawableView.image drawInRect:CGRectMake(0,0, originalImageSize.width, originalImageSize.height)];
UIImage *tmp = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return tmp;
}
}
Where originalImageSize is the size of your image.
Hope this helps!