How to animate a line draw ?

If you want to draw a line pixel by pixel.
You will have to use combination of UIBezierPath, CAShapeLayer, CABasicAnimation. You can download the code here. The piece of code given below  animates a simple line drawn pixel by pixel from point (50.0,0.0) to point (120.0, 600.0).

    UIBezierPath *path = [UIBezierPath bezierPath];

    [path moveToPoint:CGPointMake(50.0,0.0)];

    [path addLineToPoint:CGPointMake(120.0, 600.0)];

    CAShapeLayer *pathLayer = [CAShapeLayer layer];

    pathLayer.frame = self.view.bounds;

    pathLayer.path = path.CGPath;

    pathLayer.strokeColor = [[UIColor redColor] CGColor];

    pathLayer.fillColor = nil;

    pathLayer.lineWidth = 2.0f;

    pathLayer.lineJoin = kCALineJoinBevel;

    [self.view.layer addSublayer:pathLayer];

    CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];

    pathAnimation.duration = 2.0;

    pathAnimation.fromValue = [NSNumber numberWithFloat:0.0f];

    pathAnimation.toValue = [NSNumber numberWithFloat:1.0f];

    [pathLayer addAnimation:pathAnimation forKey:@"strokeEnd"];

Redo Undo in Paint feature !!

Finally, here is the most awaited code of the current request queues.
Well. I have implemented a very basic example of how to implement Redo- Undo using UIBezierPath.



MyLineDrawingView  is the drawing class (UIView subclass) where UIBezierPath are drawn.

DrawingController is the UIViewController subclass on which I have added redo-undo buttons along with the  MyLineDrawingView.

UI looks very crude and ugly .. I apologize but  I wanted to get the feature done to get the developers an idea.

Well I just want to stick some icons here so that this ugly posting may look little cute !

Download the code here

UIBezierPath tutorial for iPhone SDK 4.0 - Part 1

I was going through how to use UIBezierPath and what are its possible uses.. and I must say it is one hell of a convenient tool ! Ofcourse you can draw normal drawing with it as shown below and use your app as sketching pad in addition to that it adds so much convenience with the undo and redo action(will write that tutorial too next) that I fell in love with the use of UIBezierPath. You can have simple drawing as well as pattern based brush tip.   It is sooo easy to use this as pencil too that I don't even have words !

You can init the UIBezierPath as following

        UIBezierPath *myPath=[[UIBezierPath alloc]init];

        myPath.lineWidth=10;

        brushPattern=[UIColor redColor]; //This is the color of my stroke

        

Then you have Touch methods which handle and track the coordinates of your touch. When your touch begins on the screen, you ask UIBezierPath to move to  that touch  point

    UITouch *mytouch=[[touches allObjects] objectAtInd

    [myPath moveToPoint:[mytouch locationInView:self]];

As you move your finger around, you keep adding those points in your BezierPath in TouchMoved method by following

    UITouch *mytouch=[[touches allObjects] objectAtIndex:0];

    [myPath addLineToPoint:[mytouch locationInView:self]];

As we need constant refreshing of the screen, so that as soon as we draw it appears on the screen, we refresh the UIView subclass by calling following method in TouchMethod so that as soon as there any change in the BezierPath, it is reflected on the screen.

[self setNeedsDisplay];

Talking about drawRect Method which does all the drawing for you, you need to set the color of your stroke(stroke color means the color with which painting will be done on screen.) on screen and also  the blend mode. You can try different blend mode and see the result.

- (void)drawRect:(CGRect)rect

{

    [brushPattern setStroke];

    [myPath strokeWithBlendMode:kCGBlendModeNormal alpha:1.0];

}

Pattern brush.. doesn't exactly work the way it is in Photoshop , because once you fill the whole screen with your drawing, the screen looks completely like a screen full of tiles of your pattern which is not what I would want but ... thats what we have so far in terms of pattern brush. I am trying to implement the brush with opengl lets see if I succeed then I will post it here !

myPath.lineWidth=10;//This can help you in setting width of your stroke/brush 

brushPattern=[[UIColor alloc]initWithPatternImage:[UIImage imageNamed:@"pattern.jpg"]]; //You can set pattern in your color of your brush so that the strokes will appear with pattern of your image.

You can download the code HERE

Update:
Thanks to Sonia for pointing it out , wanted to know about smoothing of edges of bezier path, so that it doesn't look distorted . You can change the  capStyle of line for that. I have changed it and updated the code at above link.

Well.. Finally implemented and uploaded code implementing Undo-Redo.
POSTED HERE