how to create curve for lines when handwriting

Question

I'm creating an app, and in one part, I'm trying to implement hand-writing. I've used an imageView to write on, which will be saved and sent to a server as a pdf. I have implemented touch begin, move and end, and using contextAddLineToPoint, I can create the lines as user writes the stuff. However. The writing is a bit pointy, and I'm trying to create curves when user changes the direction of the writing, i.e. when a letter is written. I don't really want to implement hand-writing recognition, but just to smoothen the line being drawn.

I've created a "buffer", made up of an array, which holds two intermediate points when user moves the touch. as follow:

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

UITouch *touch = [touches anyObject];

lastPoint = [touch locationInView:drawImage];
NSLog(@"first touch:%@",[NSValue valueWithCGPoint:lastPoint]);

}

drawImage is the imageView I'm using to write on btw. Then goes to touch moved:

- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {
UITouch *touch = [touches anyObject];   
currentPoint = [touch locationInView:drawImage];

if (movementCount<2) {
    [pointHolderArray addObject:[NSValue valueWithCGPoint:currentPoint]];
    movementCount ++;
    NSLog(@"pointHolderArray: %@",pointHolderArray);
}else
{      
    NSLog(@"buffer full");
    UIGraphicsBeginImageContext(drawImage.frame.size);
    [drawImage.image drawInRect:drawImage.frame];
    CGContextSetLineCap(UIGraphicsGetCurrentContext(), kCGLineCapRound);
    CGContextSetAllowsAntialiasing(UIGraphicsGetCurrentContext(), YES);
    CGContextSetLineWidth(UIGraphicsGetCurrentContext(), 3.0);
    CGContextSetRGBStrokeColor(UIGraphicsGetCurrentContext(), 0.3, 0.5, 0.2, 1.0);
    CGContextBeginPath(UIGraphicsGetCurrentContext());
    CGContextMoveToPoint(UIGraphicsGetCurrentContext(), lastPoint.x, lastPoint.y);
    CGContextAddLineToPoint(UIGraphicsGetCurrentContext(),[[pointHolderArray objectAtIndex:0]CGPointValue].x,[[pointHolderArray objectAtIndex:0]CGPointValue].y);
    CGContextMoveToPoint(UIGraphicsGetCurrentContext(), [[pointHolderArray objectAtIndex:0]CGPointValue].x,[[pointHolderArray objectAtIndex:0]CGPointValue].y); 
    CGContextAddLineToPoint(UIGraphicsGetCurrentContext(), [[pointHolderArray objectAtIndex:1]CGPointValue].x,[[pointHolderArray objectAtIndex:1]CGPointValue].y);
    CGContextMoveToPoint(UIGraphicsGetCurrentContext(), [[pointHolderArray objectAtIndex:1]CGPointValue].x,[[pointHolderArray objectAtIndex:1]CGPointValue].y); 
    CGContextAddLineToPoint(UIGraphicsGetCurrentContext(), currentPoint.x, currentPoint.y);
    CGContextStrokePath(UIGraphicsGetCurrentContext());
    drawImage.image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    lastPoint = [touch previousLocationInView:drawImage];
    [pointHolderArray removeAllObjects];
    movementCount=0;
}

}

As you can see, every time two points have been stored, I then draw the line between them. This has made the drawing slightly harder, and the line is even more ragged.

Can anyone help with the problem, I'm very new to graphics in iOS, and not sure if I'm even using the right API, and if I should even be using an imageView.

Thanks alot in advance

score 1 · Accepted Answer · answered Apr 13 '12 at 00:24

How about using Pan Gesture Recognizer and GLPaint. You set something like this in viewDidLoad:

- (void)viewDidLoad
{
    [super viewDidLoad];

    UIPanGestureRecognizer *g = [[UIPanGestureRecognizer alloc]initWithTarget:self action:@selector(viewPanned:)];

..

Then, capture the pan movement:

-(void) viewPanned:(UIPanGestureRecognizer *)g 
{

    CGPoint point = [g locationInView:paintView];
    // invert y for OpenGL
    point.y = paintView.bounds.size.height - point.y ;

    switch (g.state) {
        case UIGestureRecognizerStateBegan:
            prevPoint = point ;
            break ;
        case UIGestureRecognizerStateChanged:
            [paintView renderLineFromPoint:prevPoint toPoint:point] ;
            prevPoint = point ;
            break ;
        case UIGestureRecognizerStateEnded:
            prevPoint = point ;
            break ;
    }
}

The 'paintView' shown here is the instance of PaintView which you can find in GLPaint example in Apple sample code. The example does not show how to change the pen size, but you can do it by setting various glPointSize.

- (void)setBrushSize:(CGFloat)size 
{ 
  if( size <= 1.0 ) {
        glPointSize(10);
    }
    else if ( size <= 2.0 ) {
        glPointSize(20);
    }
    else if ( size <= 3.0 ) {
        glPointSize(30);
    }    
    else if ( size <= 4.0 ) {
        glPointSize(40);
    }    
    ..

Hope this helps..

Dude thanks a lot for the tip about using pangesture recognisers!! I would never thought of mixing those two together!! Haven't tried it yet, but sure looks like it'll work:) — Septronic, Jul 22 '12 at 02:05
Yeah I tried it and the curve came out like the curve of a watermelon!!:) Thank you — Septronic, Aug 30 '12 at 00:47

how to create curve for lines when handwriting

1 Answers1