CODEWITHSUNDEEP
ioscocoa-touchuiviewcalayeruibezierpath
Gavin Hope
Gavin Hope

Reputation: 2193

Create a UIBezierPath (or CGPath) with a Quarter-Circle Arc that's the 'Opposite' of a Rounded Corner

I've been using the following code to create views with rounded corners:

- (void)setMaskTo:(UIView*)view byRoundingCorners:(UIRectCorner)corners
{
    UIBezierPath* rounded = [UIBezierPath bezierPathWithRoundedRect:view.bounds
                                                  byRoundingCorners:corners
                                                        cornerRadii:CGSizeMake(_cornerRadius, _cornerRadius)];
    CAShapeLayer* shape = [[CAShapeLayer alloc] init];
    [shape setPath:rounded.CGPath];
    view.layer.mask = shape;
}

So I've been calling it with something like:

[self setMaskTo:someView byRoundingCorners:UIRectCornerAllCorners];

Or:

[self setMaskTo:someOtherView byRoundingCorners:UIRectCornerBottomRight];

I now want to create some views corresponding to one of the bits on the outside of a single rounded corner...

A good approach (think I) is to create the appropriate path so that I can create a CAShapeLayer and then use that as the mask for the view (similar to above).

I'm not sure what the best approach is, which methods etc., when using the UIBezierPath class (or CGPath).

Any suggestions?

Upvotes: 1

Views: 2041

Answers (1)

Gavin Hope
Gavin Hope

Reputation: 2193

Using UIViews and a mask layer, to get the shapes that I wanted, I just needed to play around creating paths with an arc...

I'm aware that the methods for working with a CGPath can be used, but I've worked with what is available with UIBezierPath.

I've used the following methods to create the paths that I need:

- (UIBezierPath*)oppositeArcOfPathForBottomRightCorner
{
    float width = _cornerRadius;
    UIBezierPath* path = [UIBezierPath new];
    [path moveToPoint:CGPointMake(0, width)];
    [path addLineToPoint:CGPointMake(width, width)];
    [path addLineToPoint:CGPointMake(width, 0)];
    [path addArcWithCenter:CGPointMake(0, 0) radius:width startAngle:0 endAngle:(M_PI / 2.0f) clockwise:YES];
    [path closePath];
    return path;
}

- (UIBezierPath*)oppositeArcOfPathForTopLeftCorner
{
    float width = _cornerRadius;
    UIBezierPath* path = [UIBezierPath new];
    [path moveToPoint:CGPointMake(0, width)];
    [path addArcWithCenter:CGPointMake(width, width) radius:width startAngle:M_PI endAngle:(M_PI * 1.5f) clockwise:YES];
    [path addLineToPoint:CGPointMake(0, 0)];
    [path closePath];
    return path;
}

And then something like this to use as a mask with a UIView:

- (void)setMaskTo:(UIView*)view fromPath:(UIBezierPath*)path
{
    CAShapeLayer* shape = [[CAShapeLayer alloc] init];
    [shape setPath:path.CGPath];
    view.layer.mask = shape;
}

Upvotes: 4

Related Questions