Draw on iPhone/iPad screen using Bezier paths | Core Graphics - iOS App Development

UIBezierpath class can be used to draw line segments, rectangles, polygons, arcs, curves, oval shapes and a lot more using vector based method.

Note: We will be viewing all our drawings in an UIImageView object.

1) Let's create a rectangle by drawing line segments using Bezier paths.

Add/Modify highlighted part of code in your app.

ViewController.h

#import
@interface ViewController : UIViewController
{
UIImageView *drawpad;
}
@property (retain, nonatomic) IBOutlet UIImageView *drawpad;
@end

ViewController.m

@implementation ViewController
@synthesize drawpad;
- (void)viewDidLoad
{
UIBezierPath *path = [[UIBezierPath alloc] init];
[path moveToPoint:CGPointMake(50.0f, 50.0f)];
[path addLineToPoint:CGPointMake(270.0f, 50.0f)];
[path addLineToPoint:CGPointMake(270.0f, 500.0f)];
[path addLineToPoint:CGPointMake(50.0f, 500.0f)];
[path closePath];
UIGraphicsBeginImageContext(self.view.frame.size);
path.lineCapStyle = kCGLineCapRound;
path.lineWidth = 10.0f;
[[UIColor blackColor] setStroke];
[[UIColor redColor] setFill];
[path stroke];
[path fill];
self.drawpad.image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
}

Note: I have placed an UIImageView object in XIB and connected it to the drawpad outlet. The object's size is same as of view.

Run the app and you will see a rectangle drawn on your screen.

2) Let's see how to create an arc on screen

Modify the code in viewDidLoad function as

UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(150, 150)
radius:30
startAngle:0
endAngle:(22.0f/7.0f)
clockwise:YES];
UIGraphicsBeginImageContext(self.view.frame.size);
path.lineCapStyle = kCGLineCapRound;
path.lineWidth = 10.0f;
[[UIColor blackColor] setStroke];
[path stroke];
self.drawpad.image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

Run the app. An arc, part of circle with radius 30 and centre at (150,150), will be drawn with starting angle as 0 radian and ending angle as (22.0f/7.0f) radian.

For more info visit