How to draw Signature on UIView

Question

I am new in ios.And I need to create a textview or label in which i can sign.

Like this image.

Answer 1

You can draw signature on UIView for that first subclass UIView and your subclass of UIView should be something like,

SignatureView.h

 #import <UIKit/UIKit.h>

@interface SignatureView : UIView{

UIBezierPath *_path;
}
- (void)erase;
@end

SignatureView.m

 #import "SignatureView.h"

@implementation SignatureView


- (void)drawRect:(CGRect)rect {

_path.lineCapStyle = kCGLineCapRound;
[_path stroke];
}
- (id)initWithFrame:(CGRect)frame{

self = [super initWithFrame: frame];

if (self) {


    [self setMultipleTouchEnabled: NO];
    _path = [UIBezierPath bezierPath];
    [_path setLineWidth:2.0];


}
return self;
 }

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {



UITouch *mytouch=[[touches allObjects] objectAtIndex:0];
[_path moveToPoint:[mytouch locationInView:self]];
[_path addLineToPoint:[mytouch locationInView:self]];
[self setNeedsDisplay];


}

- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {



UITouch *mytouch=[[touches allObjects] objectAtIndex:0];
[_path addLineToPoint:[mytouch locationInView:self]];
[self setNeedsDisplay];



 }


 - (void)erase {

_path   = nil;  //Set current path nil

_path   = [UIBezierPath bezierPath]; //Create new path
[_path setLineWidth:2.0];
[self setNeedsDisplay];



  }

Then you can import SignatureView.h in any your view controller and can instantiate signature view something like,

   SignatureView *signView= [[ SignatureView alloc] initWithFrame: CGRectMake(10, 10, self.view.frame.size.width-40, 200)];
[signView setBackgroundColor:[UIColor whiteColor]];
signView.layer.borderColor = [[UIColor lightGrayColor]CGColor];
signView.layer.borderWidth = 1.0;
[self.view addSubview:signView];

And on that view you can draw your signature!

And you can call erase method to erase the signature!

Answer 2

This my solution.

First I created the SignatureDrawView class.In side the SignatureDrawView class I wrote the function for the draw the signature.

SignatureDrawView.h

#import <UIKit/UIKit.h>

@interface SignatureDrawView : UIView

@property (nonatomic, retain) UIGestureRecognizer *theSwipeGesture;
@property (nonatomic, retain) UIImageView *drawImage;
@property (nonatomic, assign) CGPoint lastPoint;
@property (nonatomic, assign) BOOL mouseSwiped;
@property (nonatomic, assign) NSInteger mouseMoved;

- (void)erase;
- (void)setSignature:(NSData *)theLastData;
- (BOOL)isSignatureWrite;

@end

SignatureDrawView.m

#import "SignatureDrawView.h"

@implementation SignatureDrawView

@synthesize theSwipeGesture;
@synthesize drawImage;
@synthesize lastPoint;
@synthesize mouseSwiped;
@synthesize mouseMoved;

#pragma mark - View lifecycle

- (id)initWithFrame:(CGRect)frame
{
   self = [super initWithFrame:frame];
   if (self) {
    // Initialization code
    }
   return self;
}

- (id)initWithCoder:(NSCoder*)coder 
{
    if ((self = [super initWithCoder:coder]))
    {
      drawImage = [[UIImageView alloc] initWithImage:nil];
      drawImage.frame = CGRectMake(0, 0, self.frame.size.width, self.frame.size.height);
      [self addSubview:drawImage];
      self.backgroundColor = [UIColor whiteColor];
      mouseMoved = 0;
    }
    return self;
 }

 #pragma mark touch handling

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
for (UITouch *touch in touches)
{
     NSArray *array = touch.gestureRecognizers;
     for (UIGestureRecognizer *gesture in array)
     {
        if (gesture.enabled & [gesture isMemberOfClass:[UISwipeGestureRecognizer class]])
        {
            gesture.enabled = NO;
            self.theSwipeGesture = gesture;
        }
      }
   }

   mouseSwiped = NO;
   UITouch *touch = [touches anyObject];

   lastPoint = [touch locationInView:self];
}

- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event 
{
   mouseSwiped = YES;

   UITouch *touch = [touches anyObject];
   CGPoint currentPoint = [touch locationInView:self];

   UIGraphicsBeginImageContext(self.frame.size);
   [drawImage.image drawInRect:CGRectMake(0, 0, self.frame.size.width, self.frame.size.height)];
   CGContextSetLineCap(UIGraphicsGetCurrentContext(), kCGLineCapRound);
   CGContextSetLineWidth(UIGraphicsGetCurrentContext(), 3.0);
   CGContextSetRGBStrokeColor(UIGraphicsGetCurrentContext(), 0.0, 0.0, 0.0, 1.0);
   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
{
   if(!mouseSwiped)
   {
      UIGraphicsBeginImageContext(self.frame.size);
      [drawImage.image drawInRect:CGRectMake(0, 0, self.frame.size.width, self.frame.size.height)];
      CGContextSetLineCap(UIGraphicsGetCurrentContext(), kCGLineCapRound);
      CGContextSetLineWidth(UIGraphicsGetCurrentContext(), 3.0);
      CGContextSetRGBStrokeColor(UIGraphicsGetCurrentContext(), 0.0, 0.0, 0.0, 1.0);
      CGContextMoveToPoint(UIGraphicsGetCurrentContext(), lastPoint.x, lastPoint.y);
      CGContextAddLineToPoint(UIGraphicsGetCurrentContext(), lastPoint.x, lastPoint.y);
      CGContextStrokePath(UIGraphicsGetCurrentContext());
      CGContextFlush(UIGraphicsGetCurrentContext());
      drawImage.image = UIGraphicsGetImageFromCurrentImageContext();
      UIGraphicsEndImageContext();
     }
    self.theSwipeGesture.enabled = YES;
    mouseSwiped = YES;
 }

#pragma mark Methods

- (void)erase
{
   mouseSwiped = NO;
   drawImage.image = nil;
}

- (void)setSignature:(NSData *)theLastData
{
    UIImage *image = [UIImage imageWithData:theLastData];
    if (image != nil) 
    {
      drawImage.image = [UIImage imageWithData:theLastData];
      mouseSwiped = YES;
    }
 }

 - (BOOL)isSignatureWrite
 {
   return mouseSwiped;
 }

 @end

Next in ViewController I created the UIImageView with UIView.

ViewController.h

#import <UIKit/UIKit.h>
#import "SignatureDrawView.h"

@interface ViewController : UIViewController
@property (strong, nonatomic) IBOutlet SignatureDrawView *drawSignView;

@end

ViewController.m

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

@synthesize drawSignView;

- (void)viewDidLoad 
{
  [super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
}

- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}

- (IBAction)actionSave:(id)sender 
{
   // code for save the signature
    UIGraphicsBeginImageContext(self.drawSignView.bounds.size); 
    [[self.drawSignView.layer presentationLayer] renderInContext:UIGraphicsGetCurrentContext()];
    UIImage *viewImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    NSData *postData = UIImageJPEGRepresentation(viewImage, 1.0);
    ....Then do your stuff to save this in DB or server
}

- (IBAction)actionCancel:(id)sender 
{
   //code for cancel the signature
   [self.drawSignView erase];
}

- (IBAction)actionClear:(id)sender 
{
    //code for clear the signature
    [self.drawSignView erase];
}
@end

NOTE:When you set the view in xib first identity inspector(it is left > side in utilities).Then click the drop down box of class(it is part of Custom Class).Select or choose SignatureDrawView.After that hook up the view from xib or storyboard to ViewController.h

Below is the output screenshots

Also