Showing UIBezierPath on view

Question

In one of my methods i have this code:

-(void)myMethod {   
   UIBezierPath *circle = [UIBezierPath
                       bezierPathWithOvalInRect:CGRectMake(75, 100, 200, 200)];  
}

How do i get it to show on the view?

I tried addSubview but it gave me an incompatible type error because its expecting a UIView.

I'm sure this must be simple.

Thanks

Answer 1

Drawing is the exclusive provision of views. Make a custom view, give it your path, and implement the view's drawRect: method to fill and/or stroke the path.

Answer 2

Just thought I'd add that you don't have to necessarily draw this in a UIView's "drawRect:" method. You can draw it anywhere you'd like to provided you do it inside of a UIGraphics image context. I do this all of the time when I don't want to create a subclass of UIView. Here's a working example:

UIBezierPath *circle = [UIBezierPath
                        bezierPathWithOvalInRect:CGRectMake(75, 100, 200, 200)];  

//you have to account for the x and y values of your UIBezierPath rect
//add the x to the width (75 + 200)
//add the y to the height (100 + 200)
UIGraphicsBeginImageContext(CGSizeMake(275, 300));

//this gets the graphic context
CGContextRef context = UIGraphicsGetCurrentContext();

//you can stroke and/or fill
CGContextSetStrokeColorWithColor(context, [UIColor blueColor].CGColor);
CGContextSetFillColorWithColor(context, [UIColor lightGrayColor].CGColor);
[circle fill];
[circle stroke];

//now get the image from the context
UIImage *bezierImage = UIGraphicsGetImageFromCurrentImageContext();

UIGraphicsEndImageContext();

UIImageView *bezierImageView = [[UIImageView alloc]initWithImage:bezierImage];

Now just add the UIImageView as a subview.

Also, you can use this for other drawing too. Again, after a little bit of setup, it works just like the drawRect: method.

//this is an arbitrary size for example
CGSize aSize = CGSizeMake(50.f, 50.f);

//this can take any CGSize
//it works like the frame.size would in the drawRect: method
//in the way that it represents the context's size
UIGraphicsBeginImageContext(aSize);

//this gets the graphic context
CGContextRef context = UIGraphicsGetCurrentContext();

//you can do drawing just like you would in the drawRect: method
//I am drawing a square just for an example to show you that you can do any sort of drawing in here
CGContextMoveToPoint(context, 0.f, 0.f);
CGContextAddLineToPoint(context, aSize.width, 0.f);
CGContextAddLineToPoint(context, aSize.width, aSize.height);
CGContextAddLineToPoint(context, 0.f, aSize.height);
CGContextClosePath(context);

//you can stroke and/or fill
CGContextSetStrokeColorWithColor(context, [UIColor blueColor].CGColor);
CGContextSetFillColorWithColor(context, [UIColor lightGrayColor].CGColor);
CGContextDrawPath(context, kCGPathFillStroke);

//now get the image from the context
UIImage *squareImage = UIGraphicsGetImageFromCurrentImageContext();

UIGraphicsEndImageContext();

UIImageView *squareImageView = [[UIImageView alloc]initWithImage:squareImage];

Edit: One thing I should add is that for any modern day drawing of this kind, you should be swapping out

UIGraphicsBeginImageContext(size);

for

UIGraphicsBeginImageContextWithOptions(size, opaque, scale);

This will draw your graphics correctly for retina and non retina displays.

FYI, UIGraphicsBeginImageContext(size) is equivalent to UIGraphicsBeginImageContextWithOptions(size, FALSE, 1.f) which is fine for none retina displays that may have some transparency.

However, if you don't need transparency, it is more optimized to pass in TRUE for the opaque argument.

The safest and recommended way of drawing is to pass in [[UIScreen mainScreen]scale] as the scale argument.

So for the example(s) above, you would use this instead:

UIGraphicsBeginImageContextWithOptions(aSize, FALSE, [[UIScreen mainScreen] scale]);

For more info, check out Apple's docs.

Answer 3

You can also add UIBezierPath to UIView without subclassing by using a CAShapeLayer.

For example, to add your path as a 3pt white line centered in a UIView:

UIBezierPath *mybezierpath = [UIBezierPath
                    bezierPathWithOvalInRect:CGRectMake(0, 0, 100, 100)];  

CAShapeLayer *lines = [CAShapeLayer layer];
lines.path = mybezierpath.CGPath;
lines.bounds = CGPathGetBoundingBox(lines.path);
lines.strokeColor = [UIColor whiteColor].CGColor;
lines.fillColor = [UIColor clearColor].CGColor; /*if you just want lines*/
lines.lineWidth = 3;
lines.position = CGPointMake(self.myview.frame.size.width/2.0, self.myview.frame.size.height/2.0);
lines.anchorPoint = CGPointMake(.5, .5);

[self.myview.layer addSublayer:lines];

Answer 4

In Swift 2.0:

let path = UIBezierPath()

let p1 = CGPointMake(0,self.view.frame.height/2)
let p3 = CGPointMake(self.view.frame.width,self.view.frame.height/2)

path.moveToPoint(p1)
path.addQuadCurveToPoint(p3, controlPoint: CGPoint(x: self.view.frame.width/2, y: 0))

let line = CAShapeLayer()
line.path = path.CGPath;
line.strokeColor = UIColor.blackColor().CGColor
line.fillColor = UIColor.redColor().CGColor
view.layer.addSublayer(line)

Answer 5

You can draw it using either fill or stroke methods for example in custom view's drawInRect: implementation:

- (void)drawRect:(CGRect)rect {
    // Drawing code
    UIBezierPath *circle = [UIBezierPath
                    bezierPathWithOvalInRect:CGRectMake(75, 100, 200, 200)];  
    [circle fill];
}