doodle on UIView - ios development - ios

Question

Hello I am working on this project to allow user doodle on a UIView. My approach is creating an CGMutablePathRef path and adding new lines to it while TouchMoved.
The codes relevant are listed below, which are in class of UIView.
static CGMutablePathRef path; //create it as static value.
//I got this habit from java coding but actually not sure
//if it's a good way to do it in objective-c.
//draw the path
-(void)drawRect:(CGRect)rect{
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextBeginPath(context);
CGContextAddPath(context, path);
CGContextStrokePath(context);
CGPathRelease(path);
}
//touch began. create the path and add point.
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{
path = CGPathCreateMutable();
UITouch *touch = [touches anyObject];
CGPoint point = [touch locationInView:self];
CGPathMoveToPoint(path, NULL, point.x, point.y);
[self setNeedsDisplay];
}
//add points when touch moved
- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event{
UITouch *touch = [touches anyObject];
CGPoint point = [touch locationInView:self];
CGPathAddLineToPoint(path, NULL, point.x, point.y);
[self setNeedsDisplay];
}
//last points when touch ends
- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event{
UITouch *touch = [touches anyObject];
CGPoint point = [touch locationInView:self];
CGPathAddLineToPoint(path, NULL, point.x, point.y);
[self setNeedsDisplay];
}
However, I got errors and I didn't really understand them... I guess it's something with UIGestureRecognizer, which I saw from other doodle codes. Is it necessary to add UIGestureRecognizer to it? I haven't learned anything about it so I was trying to avoid using it. But if it's a must, I will give a try.
Another approach I am thinking of is to store all the point positions to an mutable array, because I have to store these point position values somewhere. However, I don't know if array is suitable because I haven't find a way to store floating values to the array. It will be greatly helpful if anyone can help me with this. Thank you!

Answer 1

Thanks to guys who offered me help. After looking thru a bunch of codes and approaches, luckily I found the effective way to solve this problem!
Generally, the imageView in my SketchView is updated dynamically when I am drawing. That is, every time I drew more pixel, one line will be added to that new pixel, change the UIImageView and then set it as the background image of UIView.
SketchView.h
#property (assign, nonatomic) CGPoint CurrentPoint;
#property (assign, nonatomic) CGPoint PreviousPoint;
#property (assign, nonatomic) CGPoint InitialPoint;
SketchView.m
#synthesize CurrentPoint;
#synthesize PreviousPoint;
#synthesize InitialPoint;
//begin the touch. store the initial point because I want to connect it to the last
//touch point
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{
UITouch *touch = [touches anyObject];
CGPoint point = [touch locationInView:image];
InitialPoint = point;
}
//When touch is moving, draw the image dynamically
- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event{
UITouch *touch = [touches anyObject];
PreviousPoint = [touch previousLocationInView:image];
CurrentPoint = [touch locationInView:image];
UIGraphicsBeginImageContext(image.frame.size);
CGContextRef ctx = UIGraphicsGetCurrentContext();
[image.image drawInRect:CGRectMake(0, 0, image.frame.size.width, image.frame.size.height)];
CGContextSetLineCap(ctx, kCGLineCapRound);
CGContextSetLineWidth(ctx, 5.0);
CGContextSetRGBStrokeColor(ctx, 1.0, 0.0, 0.0, 1.0);
CGContextBeginPath(ctx);
CGContextMoveToPoint(ctx, PreviousPoint.x, PreviousPoint.y);
CGContextAddLineToPoint(ctx, CurrentPoint.x, CurrentPoint.y);
CGContextStrokePath(ctx);
image.image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
}
- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event{
UITouch *touch = [touches anyObject];
PreviousPoint = [touch previousLocationInView:image];
CurrentPoint = [touch locationInView:image];
UIGraphicsBeginImageContext(image.frame.size);
CGContextRef ctx = UIGraphicsGetCurrentContext();
[image.image drawInRect:CGRectMake(0, 0, image.frame.size.width, image.frame.size.height)];
CGContextSetLineCap(ctx, kCGLineCapRound);
CGContextSetLineWidth(ctx, 5.0);
CGContextSetRGBStrokeColor(ctx, 1.0, 0.0, 0.0, 1.0);
CGContextBeginPath(ctx);
CGContextMoveToPoint(ctx, PreviousPoint.x, PreviousPoint.y);
CGContextAddLineToPoint(ctx, CurrentPoint.x, CurrentPoint.y);
//I connected the last point to initial point to make a closed region
CGContextMoveToPoint(ctx, CurrentPoint.x, CurrentPoint.y);
CGContextAddLineToPoint(ctx, InitialPoint.x, InitialPoint.y);
CGContextStrokePath(ctx);
image.image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
}
And it works!
p.s. I found
PreviousPoint = [touch previousLocationInView:image];
very helpful, though it's not mentioned much in the codes I found doing doodling... I hope this helps. :)