iPhone image distortion

Question

Are there any reasons why the simulator will display UIImageViews properly, but incorrectly on the iPhone?

My Process: An image in a PNG file Start a UIGraphicsBeginImageContext() Draw the PNG in a CGrect Draw text in the CGRect Create an UIImage from the context Set the image of a UIImaveView to the UIImage Set the frame of the UIImageView to the size of the PNG Add as a subview

Outcome: The image does not display correctly. The rightmost 1-3 pixels of the image is just a vertical white line. This occurs only on the device and not on the simulator. I can fix the problem, but only by increasing the size of the UIImageView. If I increase the size.height of the UIImageView by 1 pixel, it displays the UIImage correctly. Of course, these leaves the iPhone to scale my image before drawing it on screen which is not desirable.

Any ideas why this occurs or any fixes for it? (I will post my code if needed)

Answer 1

Have you checked the scaling/resize options for the UIImageView?

Answer 2

Here is the code to take my PNG file, draw it with text, and save as a UIImage. This image is then set to the image property of a UIImageView, whose frame is the size of the image (25x25).

-(UIImage *) elementImageWithFrame: (CGRect) aFrame image: (NSString *) anImage{


        int smallFontSize=FONT_SMALL;
        int largeFontSize=FONT_LARGE;

        CGSize mySize = aFrame.size;

        UIGraphicsBeginImageContext(mySize);

        UIImage *backgroundImage = [UIImage imageNamed:anImage];
        CGRect elementSymbolRectangle = CGRectMake(0.0f ,0.0f, aFrame.size.width, aFrame.size.height);
        [backgroundImage drawInRect:elementSymbolRectangle];

        // draw the element name
        [[UIColor whiteColor] set];

        // draw the element number
        UIFont *font = [UIFont boldSystemFontOfSize:(smallFontSize)];
        CGPoint point = CGPointMake(2,1);
        [self.atomicNumber drawAtPoint:point withFont:font];

        // draw the element symbol

        font = [UIFont boldSystemFontOfSize:largeFontSize];
        CGSize stringSize = [self.symbol sizeWithFont:font];
        point = CGPointMake((elementSymbolRectangle.size.width-stringSize.width)/2,aFrame.size.height-(largeFontSize)-(largeFontSize/10));
        [self.symbol drawAtPoint:point withFont:font];

        //get image


        UIImage *theImage=UIGraphicsGetImageFromCurrentImageContext();

            UIGraphicsEndImageContext();

            return (theImage);
    }

Answer 3

Got IT!

Here is how I beat the SDK.

For some reason, A UIImageView does not like the image produced by the UIGraphicsBeginImageContext. So instead, I changed my class as a subclass of a standard UIView (not UIImageView). Then I implemented the drawRect method. Inside the drawRect method, i put the same code I had in the UIGraphicsBeginImageContext block.

For some reason, this code renders the image properly in the drawRect method, but not in the UIGraphicsBeginImageContext(may be a bug, may be me).

The code follows.

- (void)drawRect:(CGRect)rect {


    UIImage *backgroundImage = [UIImage imageNamed:imageFile];
    CGRect elementSymbolRectangle = CGRectMake(0.0f ,0.0f, backgroundImage.size.width, backgroundImage.size.height);
    [backgroundImage drawInRect:elementSymbolRectangle];

    // draw the element name
    [[UIColor whiteColor] set];

    // draw the element number
    UIFont *font = [UIFont boldSystemFontOfSize:(smallFontSize)];
    CGPoint point = CGPointMake(2,1);
    [self.atomicNumber drawAtPoint:point withFont:font];

    // draw the element symbol

    font = [UIFont boldSystemFontOfSize:largeFontSize];
    CGSize stringSize = [self.symbol sizeWithFont:font];
    point = CGPointMake((elementSymbolRectangle.size.width-stringSize.width)/2,self.frame.size.height-(largeFontSize)-(largeFontSize/10));
    [self.symbol drawAtPoint:point withFont:font];

}

(Also, this code can be found in the Apple Sample Code: theElements)

Answer 4

I had a similar issue with both drawInRect and CGContextDrawImage, rightmost 2 pixels become white or inverted in some way. Solution was to use PNG images which do not use the alpha channel.

Answer 5

I changed PNG to TIFF and artifacts disappeared.