This blog talks about iOS,Android,Mac,Cocoa,use of social networks, tips and tricks which can be used by you.

Wednesday, May 18, 2011

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=[[UIBezierPathalloc]init];

myPath.lineWidth=10;

brushPattern=[UIColorredColor]; //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

[myPathmoveToPoint:[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];

[myPathaddLineToPoint:[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.

[selfsetNeedsDisplay];

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

{

[brushPatternsetStroke];

[myPathstrokeWithBlendMode:kCGBlendModeNormalalpha: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=[[UIColoralloc]initWithPatternImage:[UIImageimageNamed:@"pattern.jpg"]]; //You can set pattern in your color of your brush so that the strokes will appear with pattern of your image.

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.

Reetu, I am having a devil of a time merging the undo/redo code with the line drawing code. The difficulty is that I have segmented controls for brushes, colors and background pictures. I have posted a question on StackOverflow here: http://stackoverflow.com/questions/10142404/xcode-undo-a-bezier-path, but no answers so far. Would you be willing to have a look at the offending methods? I would really appreciate that.

Hi reetu, hope u are fine...great tutorial once again.I only want to draw straight lines, start it when the user double tap on the screen & end it when the user again double tap on the screen.How can do it with UIBezierPath?

Thank you mam for your code.Mam I am developing a book app in ipad where user can write notes. For that i need a pen like structure through which user can make note and save it and will see it again when he came to same page or where ever i list him notes. So how to implement them and save them so that user can see his notes same as he wrote. I never work on drawing before in iphone/ipad. I will be obliged for any guidance and help.

Hello mam,Mam I want to create a notebook like app like bamboo app, neu notepad etcI have started reading coregraphics for thatBut not getting right approach what should be read and from where.because in my previous app I just started working on it without knowing cons and prons of the library i used and hence results into disaster. This time i dont want to repeat that. An app in which one can write, draw , erase, color change etc. (the functionality required by a notebook.) Can you suggest me some tutorial or site from where I can read and able to develop such App by my own

@Sonia, You can easily use UIBezierPath for all the needs you mentioned above - write/draw/erase/color change of pen.This is just an introductory tutorial, you can read more about it on Apple's website. to learn more deeply about it.I think you have just started in this application.I wish you best of luck, I am sure this reply is good enough to guide you in the right direction.

I just wanted to confirm is bezier curve is enough for writing and sketching so that i can proceed in that. From your reply i got it. As with the code you provided not able to draw smoothly and not able to put simple dots so i was little bit confused but now I started working on it. Thank You mam for your reply.

Thanks for your nice tutorial.I integrate it in my app but in my app there is extra feature i.e. to erase the path which we draw using an eraser.User has an option to change the size of eraser.I googled it & fount the solution that use pattern image similar to the background but I dont want this.If you have any option the please help me.Thanks.

Thank you very much for this. It was a great starting point. Is there anyway to validate the drawing?For example, lets say there are dots on the screen and we use your code to draw the line. Any way to check the final drawn image is correct?

But what is happening here is , if I first draw a red line and later by selecting color options , I try to draw a blue line, my previous red line also becomes blue, I know that because I am using the same array, its turning blue, but how to slove this issue, whether I should use different arrays, but that will not be a optimal solution. so I need your help. waiting for your reply

Everytime you add a line on your screeen, it gets added to pathArray as a bezier path.As you can see in for(UIBezierPath *_path in pathArray), it runs loop on all those lines here without setting stroke color [[UIColor redColor] setStroke];. If you want to make different bezier paths of differnt color, you will have to keep a color array too. Or Another wise way way will be to make a custom class(say MyColoredBezier) with 2 members UIBezierPath and UIColor, then everytime you add a new line or new color, a new object of MyColoredBezier is created, later on you run the loop with setStroke & strokeWithBlendMode as for (MyColoredBezier *obj in coloredpathArray). Hope this answers your query.

I'd like to find a way to be able to draw on UIImageView AND ZOOM on itand draw.

It is weird because I don't have idea to implement this. Why I say weird is because I manage to create a zoom system for UIImageView, using the UIScrollView. But how to be able to do the drawing on the imageview after zooming in? because when you touch and move your finger on the image to draw, then it becomes to pan function for the image. Or, if I put a button to toggle between Pan & draw, would that be acceptable to you (as user point of view)?can u help me out?

Hi reetu, I am following your approach for a drawing project, everything works fine, but as we are using an array to store bezeirpaths, after some drawing, their is a lag in the line drawn, I have implemented an erase function, if I erase the line I draw and then again I try to draw a line, I get serious performance issues, I googled about this issue, and the solution is to use CGLayers, Can you throw some light on this? It would be very helpful for me. I am confused on how to use CgLayers.

The overseas designer for the devoted iPhone development should be able to provide you the appropriate programs with the highest skills with the extremely innovative technological innovation like Cocoa/Objective C as well as Xcode / Interface Designer with excellent skills, which can be possible when they have excellent encounter and information in this technological innovation.

There is a lot of competition in outsourcing software development, as there are many firms across the globe catering to clients looking for outsourcing their work. What is good is that the takers can choose the best from the lot.

Live Feed

My Tweets

Goal to Open Source

I believe in open knowledge, hence I want to make this technology open source whatever I can on my blog. You can ask me to write about any particular mobile topic if you want. You can follow me on Twitter as well.