With the help of Core Graphics Framework and touch methods of UIResponder we can easily draw on iphone screen.
There are two ways to do this : Either create a UIView subclass and draw directly on it, or use imageview from the View controller.
In order to draw directly on a view we will have to write the drawing code in the drawRect method of the UIView subclass. If we want to handle drawing from view controller we will have to get image from graphics context and set it on an image view.
Following points are explaining how to do it from view controller (Both the ways are quite similar though ) :
- Begin the image context using UIGraphicsBeginImageContext().
- Create a new empty path on graphics context using CGContextBeginPath()
- Get location of beginning and end points of the touch using [touch locationInView:]
- Draw a line between the two points using CGContextMoveToPoint() and CGContextAddLineToPoint() functions
- Set effects like size, color etc using CGContextSetLineWidth, CGContextSetRGBStrokeColor, CGContextSetBlendMode,etc
- Stroke on the path using CGContextStrokePath()
- Get image from current graphics using UIGraphicsGetImageFromCurrentImageContext()
- Draw the image on the view by calling drawInRect: method on the image object.
- End the graphics context UIGraphicsEndImageContext()
Following is the code that implements it :
-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
mouseSwiped = NO;
UITouch *touch = [touches anyObject];
lastPoint = [touch locationInView:self.view];
}
-(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {
mouseSwiped = YES;
UIGraphicsBeginImageContext(self.view.frame.size);
[imageView.image drawInRect:CGRectMake(0, 0, self.view.frame.size.width,self.view.frame.size.height )];
UITouch *touch = [touches anyObject];
CGPoint currentPoint = [touch locationInView:self.view];
CGContextBeginPath(UIGraphicsGetCurrentContext());
CGContextMoveToPoint(UIGraphicsGetCurrentContext(), lastPoint.x, lastPoint.y);
CGContextAddLineToPoint(UIGraphicsGetCurrentContext(), currentPoint.x, currentPoint.y);
CGContextSetLineCap(UIGraphicsGetCurrentContext(), kCGLineCapRound);
CGContextSetLineWidth(UIGraphicsGetCurrentContext(), brush);
CGContextSetRGBStrokeColor(UIGraphicsGetCurrentContext(), red, green, blue, 1.0);
CGContextSetBlendMode(UIGraphicsGetCurrentContext(), kCGBlendModeColor);
CGContextStrokePath(UIGraphicsGetCurrentContext());
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
[imageView setImage:image];
UIGraphicsEndImageContext();
lastPoint = currentPoint;
}
-(void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {
if (!mouseSwiped) {
UIGraphicsBeginImageContext(self.view.frame.size);
CGContextBeginPath(UIGraphicsGetCurrentContext());
CGContextSetLineCap(UIGraphicsGetCurrentContext(), kCGLineCapRound);
CGContextSetLineWidth(UIGraphicsGetCurrentContext(),brush);
CGContextSetBlendMode(UIGraphicsGetCurrentContext(), kCGBlendModeColor);
CGContextSetRGBStrokeColor(UIGraphicsGetCurrentContext(), red, green, blue, 1.0);
CGContextMoveToPoint(UIGraphicsGetCurrentContext(), lastPoint.x, lastPoint.y);
CGContextAddLineToPoint(UIGraphicsGetCurrentContext(), lastPoint.x, lastPoint.y);
CGContextFlush(UIGraphicsGetCurrentContext());
CGContextStrokePath(UIGraphicsGetCurrentContext());
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
[imageView setImage:image];
UIGraphicsEndImageContext();
}
}
In ViewDidLoad we can set the values of color, opacity, size
- (void)viewDidLoad
{
[super viewDidLoad];
red = 100.0/255.0;
green = 100.0/255.0;
blue = 1000.0/255.0;
brush = 15.0;
opacity = 1.0;
// Do any additional setup after loading the view, typically from a nib.
}
Here is a nice RayWenderlich tutorial for the same!
0 Comment(s)