How To Use Quartz In iPhone?

Quartz 2D is an advanced, two-dimensional drawing engine available for iPhone application development and to all Mac OS X application environments outside of the kernel.

Step 1: In Xcode, create a new project using the view-based application template. Once it’s created ,single click the classes folder so we can add our classes. We’re going to be executing our custom drawing in a view, so we need to create a subclass of UIView. Create a new Cocoa Touch Classes file,and  select the UIView subclass template.

We are going to define some constants, constants are going to be needed by more than one class. And create a header file just for the constants,create a new file ,selecting the Empty File templete from the other heading and called it Constants.h. Single click Constants .h,and add the folowing code:

 

 

 

Step 2: We’ll get details of working with touches in this UIView method, touchesBegan:withEvent:,touchesMoved:withEvent:,touchesEnded:withEvent:, these threeUIView method can be overridden to find out where the use is touching the iphone’s screen.

 

 

 

Step 3: We are going to need an outlet to that top segmented controller, so we can hide it when it doesn’t serve a purpose. We also need two methods, one that will be called when a new color is selected and another that will be called when a new shape is selected.

 

 

 

Step 4: We mentioned here two methods, in changeColor:method, we look at which segment was selected and create a new color based on that selection. We set its currentColor property so that it knows what color to use when drawing, except when a random color is selected, in which case we just set the view’s useRandomColor property to YES. And the another method is, changeShape: method, here we don’t need to create an object, we can just set the view’s shapeType property to the segment index from sender.

 

 

 

Step 5: Before start drawing, we need to add the segmented control to our nib and then hook up the actions and outlets. Double click the .xib file to open the file in interface Builder. Then open the identity inspector. change the class from UIView to (your project name)xyxView. Next look for a Navigation Bar in the library . Place the Navigation Bar against the top of the view window.

Select Segmented Control in the library,and drag that right on top of the Navigation Bar.Bring up attributes inspector, and change the number of segment 2 to 5.and changing its name Red, Yellow,Green,and Random in that order.

Control drag from the File’s Owner icon to the segmented control, and select the colorControl outlet. And drag from the Value Changed event to File’s Owner, and select the changeColor:action

Do it once more time, look for a Toolbar in the library, and drag one of those over to the bottom of the window. Next select Segmented control in the library ,and drag it to Toolbar. Press and bring up attributes inspector , and change the number of segments from 2 to 4. Change the title of the four segments to be Line, Rect,Ellipse,and Image. Switch to the connections inspector,and connect Value Changed event to File’s Owner changeShape:action method. Save and close the nib, and go back to Xcode.

Figure 1:  The completed Navigation Bar.

Step 6: Let’s implement the code to draw the  line, Rectangle and the Ellipse at the same time. Quartz 2D implements both these objects in basically the same way. Make the following changes to your drawRect: method:

 

 

Step 7: At that point, you just compile and run, and you should able to draw Lines, Rect, Ellicpse just fine.(See Figure below)

Figure 2: The ellipse drawing is part of our application is now complete . In this image we are drawing using Red color.



You can downloaded SourceCodefrom here QuartzFun 2

Leave a Comment:

3 comments
Jessica says July 23, 2010

Hi,
Thanks for the tutorial
Just a random question — why don’t the images/lines/shapes stay on the screen after you’ve drawn them? What would be a possible way to make sure the drawings are kept?
Thanks-
Jessica

Reply
Jessica says July 23, 2010

Hi,
Thanks for the tutorial
Just a random question — why don’t the images/lines/shapes stay on the screen after you’ve drawn them? What would be a possible way to make sure the drawings are kept?
Thanks-
Jessica

Reply
Ayodele says August 23, 2010

I need the answer to the exact question above, why are the images/lines/shapes not retained onthe screen after they’re drawn, each new click cleans out the old one.

Reply
Add Your Reply