Resizing an image with stretchableImageWithLeftCapWidth

Question

I\'m trying to resize an image using stretchableImageWithLeftCapWidth: it works on the simulator, but on the device, vertical green bars appears.

I\'ve tried to use

Answer 1

Did you figure this out?

Seems like it might be a bug with UIGraphicsGetImageFromCurrentImageContext. If I draw an image that has transparency I get red/green artifacts. These only appear on the device (not in the sim). Also, if I remove transparency from the image, the artifacts go away.

Update: Some more weirdness. I was using PNGs before, so I tried using a transparent gif instead. Using a GIF, shows the artifact problem on the sim.

Victory! Found a solution:

Turn off 'Compress PNG Files' in the build settings for your project. Disabling this makes the PNG transparency work without any artifacts.

Answer 2

I've spent 5 hours debugging this last night, disabling PNG compression in xcode didn't do anything for me.

For anyone else meeting vertical, green, bars/lines/artifacts with stretchableImageWithLeftCapWidth (in UIImage API) - this post is for you.

I have a 21x30 for a custom barbutton background that I want to widen, but got the same green stripes as the OP. I found a PNG created with photoshop and that worked fine - mine are made with Gimp. Anyway, stripping ALL chunks from the files (except the three essential ones) made no difference. Neither did disabling PNG compression.

What did work for me was this:

1. Add ONE empty line above my image (which is now 21x31).
2. Set topCapHeight:0 when creating the scaled image.
3. When I use my scaled image, I draw into a CGContext, which is later used to make an UIImage. I use this to draw: [image drawInRect:CGRectMake(0,-2,width,32)];

This makes the problem go away (for me).

I assume that the bug/issue has to do with not scaling vertically when drawing, so I force scaling of the first source image line (into two lines), which are draw outside my composition.

I hope this helps someone save 5 hours.

/Krisb

Answer 3

It seems like you're writing a lot of unnecessary code, but perhaps that's just because it's out of context and there's more to it that I'm missing.

To get the image:

[[UIImage imageName: @"bottom_part.png"] stretchableImageWithLeftCapWidth: 27 topCapHeight: 9];

What part of your code are you displaying this image? i.e. in what method call are you drawing the images above?

Why not just use a UIImageView and put the image in there? Then you don't need to do any of the image context drawing etc.

Answer 4

I tried to disable PNG compression like Nate proposed, but this wouldn't work for me (iOS 3.1.3). I then tried using TIFF images instead of PNG, which works.

Answer 5

In my case I had an UIImageView which I stretched horizontally. I found a strange vertical white line in the stretched image.

The solutions above didn't work for me. However, the following did:

Cast the width value to an int value:

myNewViewFrame.size.width = (int)newWidth;
myView.frame = myNewViewFrame;

Hope it works for you guys as well...

Answer 6

I stopped using stretchableImageWithLeftCapWidth in favor of UIView's much more well-behaved contentStretch property. I've never seen the green bars you are describing, but in general I would recommend using contentStretch instead of stretchableImageWithLeftCapWidth.