Why my image corners aren't rounded off?


#1

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
@end

Here are the two methods

[code]

  • (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
    FromImage:imageToScale];

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

    // Create a bitmap image context
    UIGraphicsBeginImageContext(newRect.size);

    // Round the corners
    UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:newRect
    cornerRadius:5.0];

    [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
UIGraphicsEndImageContext();
return small;

}[/code]
Lastly in setImageForKey a few changes to shrink the image before adding it to the store.

[code]
-(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];

}[/code]


#2

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;

}[/code]