Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Change the default shape of UIImageview shape rectangle

Now I m developing an project in that I need to show the image with border like below shape.

enter image description here

How can I do this? I have no idea to do this. Please any idea to solve.

like image 427
Seeker Avatar asked Nov 28 '13 08:11

Seeker


2 Answers

May be this code will help you...

 UIBezierPath *maskPath;
 maskPath = [UIBezierPath bezierPathWithRoundedRect:YourImageVIew.bounds byRoundingCorners:(UIRectCornerTopRight | UIRectCornerBottomRight) cornerRadii:CGSizeMake(50.0, 50.0)];

 CAShapeLayer *maskLayer = [[CAShapeLayer alloc] init];
 maskLayer.frame = YourImageVIew.bounds;
 maskLayer.path = maskPath.CGPath;
 YourImageVIew.layer.mask = maskLayer;
like image 135
Pradhyuman sinh Avatar answered Oct 19 '22 09:10

Pradhyuman sinh


Here is how you can create the path for masking:

- (UIBezierPath *)curvedRectWithFrame:(CGRect)frame radius:(CGFloat)radius
{
    double halfFrameHeight = ((double)frame.size.height / 2);

    // Check if the radius is too small.
    if (radius < halfFrameHeight) {
        radius = halfFrameHeight;
    }

    CGFloat arcAngle = asin(halfFrameHeight/radius);
    CGFloat centerX = frame.origin.x + (frame.size.width - radius);
    CGFloat centerY = frame.origin.y + halfFrameHeight;

    UIBezierPath *path = [UIBezierPath bezierPath];

    [path moveToPoint:frame.origin];
    [path addLineToPoint:CGPointMake(centerX + radius * cos(arcAngle), frame.origin.y)];
    [path addArcWithCenter:CGPointMake(centerX, centerY) radius:radius startAngle:-arcAngle endAngle:arcAngle clockwise:YES];
    [path addLineToPoint:CGPointMake(frame.origin.x, path.currentPoint.y)];
    [path closePath];

    return path;
}

Then you can apply the shape mask to your image:

const CGFloat kCurveRadius = 500.;

CAShapeLayer *maskLayer = [[CAShapeLayer alloc] init];
maskLayer.frame = yourImageView.bounds;
maskLayer.path = [self curvedRectWithFrame:maskLayer.bounds radius:kCurveRadius].CGPath;

yourImageView.layer.mask = maskLayer;
like image 43
yurish Avatar answered Oct 19 '22 11:10

yurish