Why my image corners aren't rounded off?


For my solution to the image shrinking challenge made ImageStore use some of the same set of methods used for the thumbnail image, with only a few modifications. This worked to achieve the goal of smoothing out the transition to ItemDetailViewController. I was also expecting a side effect of getting some nice rounded corners for my image in the detail view, but the corners are still square. Below is my code. Could someone please tell me why the corners aren’t getting rounded like the thumbnails? :unamused: Thanks! :smiley:

//  ImageStore.h

#import <UIKit/UIKit.h>

@interface ImageStore : NSObject
	NSMutableDictionary *dictionary;
+(ImageStore *)defaultImageStore;

 // Takes a percentage in the form of decimal from 0 - 1 and a UIImage and returns CGSize of the percentage of the image
+ (CGSize)imageSizePercentage:(float)percentage FromImage:(UIImage *)image;

-(void)setImage:(UIImage *)i forKey:(NSString *)s;
-(UIImage *)imageForKey:(NSString *)s;
-(void)deleteImageForKey:(NSString *)s;
-(UIImage *) scaleImage:(UIImage *)imageToScale; // returns the scaled down image

Here are the two methods


  • (CGSize)imageSizePercentage:(float)percentage FromImage:(UIImage *)image
    float w = image.size.width * percentage;
    float h = image.size.height * percentage;

    return CGSizeMake(w, h);
    -(UIImage *) scaleImage:(UIImage *)imageToScale
    CGSize origImageSize = [imageToScale size];

    CGRect newRect;
    newRect.origin = CGPointZero;
    newRect.size = [[self class] imageSizePercentage: .6

    // How do we scale the image
    float ratio = MAX(newRect.size.width/origImageSize.width,

    // Create a bitmap image context

    // Round the corners
    UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:newRect

    [path addClip];

    // into what rectangle shall i composite the image
    CGRect projectRect;
    projectRect.size.width = ratio * origImageSize.width;
    projectRect.size.height = ratio * origImageSize.height;
    projectRect.origin.x = (newRect.size.width - projectRect.size.width) / 2.0;
    projectRect.origin.y = (newRect.size.height - projectRect.size.height) / 2.0;

    // draw the image on it
    [imageToScale drawInRect:projectRect];

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

//////////////////////////////////////// don’t need this part as I’m not saving any thing here just returning the smaller image for the store to save
////////////////////////////////////////////////////////////////////////////////// [self setThumbnail:small];

//////////////////////////////////////////////////////////////////////////////// // get the image as png data
/////////////////////////////////////////////////////////////////////////////// NSData *data = UIImagePNGRepresentation(small);
///////////////////////////////////////////////////////////////////////////////// [self setThumbnailData:data];

// Cleanup Image context recourses we're done
return small;

Lastly in setImageForKey a few changes to shrink the image before adding it to the store.

-(void)setImage:(UIImage *)i forKey:(NSString *)s
// scale the image
UIImage *smallerPic = [self scaleImage:i];
// Put the image in the dictionary
[dictionary setObject:smallerPic forKey:s];

// create full path for the image
NSString *imagePath = pathInDocumentDirectory(s);

// turn the image into jpeg data
NSData *d = UIImageJPEGRepresentation(smallerPic, 0.5);

// Write it to the file path
[d writeToFile:imagePath atomically:YES];



Okay I got this. The corners were being rounded on the image but it wasn’t enough to really notice. First I just made the corner radius bigger then I realized there was a white triangle showing on the image. so to get rid of that I just added the rounded corners to imageView instead.

first I added the Quartz header to ItemDetailView.m

in viewWillAppear I did this.

[code] // set the imageFrame size
[imageView setFrame:[self getScaleForFrameFromImage:imageToDisplay]];

	// Use that image to put on the screen in imageView
	[imageView setImage:imageToDisplay];
	// Get the Layer of any view
	CALayer * l = [imageView layer];
	[l setMasksToBounds:YES];
	[l setCornerRadius:10.0];[/code]

I made getScaleForFrameFromImage: to control the size of the image in imageDetailView and get the size for the imageView frame

[code]- (CGRect)getScaleForFrameFromImage:(UIImage *)image
// get the bigger side of image to determine the shape then
// get the percentage we need to scale the image to and trim imageViewFrame
// so it fits image and sits in the space dedicated in main view for the image
float percentage;
float newWidth;
float newHeight;

float w = image.size.width;
float h = image.size.height;
if (w > h) {
	percentage  = 280 / w;
	newWidth = w * percentage;
	newHeight = h * percentage;;
else {
	percentage  = 208 / h;
	newWidth = w * percentage;
	newHeight = h * percentage;
int xOrigin = 20 + (280 - newWidth) / 2;
CGRect newFrame = CGRectMake(xOrigin, 160, newWidth, newHeight);
return newFrame;