how to set image in imageview in different shape in IOS? [closed] - ios

Question

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 9 years ago.
Improve this question
I am developing an application in IOS in which I want to set an image on in the shape given in the attached image. How can I do that? Please suggest me.

Answer 1

One hours of hard working. Finally... I have added the green border too.
First of you, you just define the path that can clip the image.
- (CGPathRef) pathInRect:(CGRect)rect radius:(CGFloat)radius
{
CGMutablePathRef retPath = CGPathCreateMutable();
CGPathMoveToPoint(retPath, NULL, rect.origin.x + radius, rect.origin.y + 2 * radius);
CGPathAddLineToPoint(retPath, NULL, rect.origin.x, rect.origin.y + 2 * radius);
CGPathAddLineToPoint(retPath, NULL, rect.origin.x, rect.origin.y + radius);
CGPathAddArcToPoint(retPath, NULL, rect.origin.x, rect.origin.y, rect.origin.x + radius, rect.origin.y, radius);
CGPathAddArcToPoint(retPath, NULL, rect.origin.x + 2 * radius, rect.origin.y, rect.origin.x + radius * 2, rect.origin.y + radius, radius);
CGPathAddArcToPoint(retPath, NULL, rect.origin.x + 2 * radius, rect.origin.y + 2 * radius, rect.origin.x + radius, rect.origin.y + 2 * radius, radius);
CGPathCloseSubpath(retPath);
return retPath;
}
In my old project, I am using drawRect for UITableViewCell, so I reuse the code. The code firstly create a new clipped image based on the path, then draw the image. After that, a border with the same path is drawn too.
#define PHOTO_SIDE 40.f
-(void)drawRect:(CGRect)rect {
CGRect frame = CGRectMake(20, 20, PHOTO_SIDE, PHOTO_SIDE);
//Draw clipped image
UIImage *image = [Your Image];
UIGraphicsBeginImageContext(CGSizeMake(PHOTO_SIDE, PHOTO_SIDE));
CGPathRef path = [self pathInRect:frame radius:PHOTO_SIDE / 2];
CGContextAddPath(context, path);
CGContextClip(context);
[image drawInRect:CGRectMake(0, 0, PHOTO_SIDE, PHOTO_SIDE)];
UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
[newImage drawInRect:frame];
//Draw Border
CGContextSaveGState(context);
[[UIColor greenColor] setStroke];
CGContextSetLineWidth(context, 1.0f);
CGContextAddPath(context, path);
CGContextStrokePath(context);
CGContextRestoreGState(context);
}

Answer 2

You could for example:
Overlay your imageView with a mask image (which has transparent pixels where you want your actual image visibile - like square with hole inside)
Add maskLayer with the shape you want to the layer of your imageView.
Example of UIImage category to create round images to give you an idea:
+ (instancetype)maskedImageWithImage:(UIImage *)image {
if (!image)
return nil;
CGFloat dim = MIN(image.size.width, image.size.height);
CGSize size = CGSizeMake(dim, dim);
UIGraphicsBeginImageContextWithOptions(size, NO, .0);
UIBezierPath *bezierPath = [UIBezierPath bezierPathWithOvalInRect:(CGRect){ CGPointZero, size }];
[bezierPath fill];
[bezierPath addClip];
CGPoint offset = CGPointMake((dim - image.size.width) * 0.5, (dim - image.size.height) * 0.5);
[image drawInRect:(CGRect){ offset, image.size }];
UIImage *ret = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return ret;
}
Use it like:
UIImage *myImage = [UIImage imageNamed:#"image"];
myImageView.image = [UIImage maskedImageWithImage:myImage];
To achieve more complicated shape, you essentially need to modify the bezierPath which is effectively a clipping mask.