fuzionpro

Simple iOS Tutorial on FreeHand Drawing

Posted: 07 Dec 2013 07:21 AM PST

In an iOS applications development, the most important factor is to engage users in an interactive way.

Considering that in mind, we are going to see how to implement freehand drawing.

Download Source

Steps to implement Freehand Drawing

First : We have to subclass the UIView and create a Class named “SketchView.h” and “SketchView.m”

In the SketchView.h we have to declare

NSMutableArray *lineArray; ( To hold the points that we draw on the screen )
CGPoint start; ( To store the starting point where the touch has began )

Second : We have to create a model to hold the starting and ending points.
Name the class has “Line.h” and “Line.m”

CGPoint begin;
CGPoint end;

Third : Getting into the implementation of freehand drawing

Line.h

#import <Foundation/Foundation.h>    @interface Line : NSObject    //To hold the starting point while drawing   @property (nonatomic,assign) CGPoint begin;  //To hold the ending point while drawing   @property (nonatomic,assign) CGPoint end;  @end

Line.m

#import "Line.h"    @implementation Line  @synthesize begin,end;  @end

SketchView.h

#import <UIKit/UIKit.h>    @interface SketchView : UIView    //To hold the points in the array  @property(nonatomic,retain) NSMutableArray *lineArray;  //To store the starting point  @property(nonatomic,assign) CGPoint start;

SketchView.m

Since we are using UIView, all the initialising has to be done in the

-(id)initWithCoder:(NSCoder *)aDecoder ;

#import "sketchview.h"  #import "line.h"    @implementation sketchview  @synthesize start, lineArray;    -(id)initWithCoder:(NSCoder *)aDecoder  {	  	if((self =[super initWithCoder:aDecoder]))  	{                  // Initialise the Array to hold the values  		lineArray=[[NSMutableArray alloc] init];                  // Disable the multipleTouch to allow single touch  		self.multipleTouchEnabled = NO;		  	}  	return self;  }

Important to consider is that we are using touches delegates to perform the freehand drawing

-(void) touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event  {  	UITouch *t = [touches anyObject];         //Get the touch from the UIView and store it into self.start  	self.start = [t locationInView:self];    }

-(void) touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event  {  	UITouch *t = [touches anyObject];  	CGPoint end = [t locationInView:self];          //Initialise the Line Model to assign the begin and end point  	Line *newline = [[Line alloc] init];  	newline.begin = self.start;  	newline.end = end;  	self.start = end;	  	[lineArray addObject:newline];   //Don't forget to add this, because the UIView needs to be redrawn 	[self setNeedsDisplay];	  }

-(void) drawRect:(CGRect)rect  {  	CGContextRef mycontext= UIGraphicsGetCurrentContext();          //Set the width of the line.Here it is set to 4.0  	CGContextSetLineWidth(mycontext, 4.0);    	for(Line *line in lineArray)  	{  //For now I have added move and add to point functions.Explore more//by adding more functions         CGContextMoveToPoint(mycontext, line.begin.x, line.begin.y);         CGContextAddLineToPoint (mycontext, line.end.x, line.end.y);         CGContextStrokePath(mycontext);  	}  }

That’s it and final output is here.