Question

I trying to build an app which combines a background image with text bubbles on top of it. I have text bubbles initialized as stretchable UIImages with leftCapWidth and topCapHeight defined. While displaying the text bubbles in the app itself everything works fine and the text bubbles are displayed normally without any lines drawn on top of them.

However when I try to export the images, I combine the background image with text bubbles on top using the UIGraphicsBeginImageContext() function I see that the text bubbles have a vertical line and a horizontal line drawn on them. They seem to be drawn at the point defined by the leftCapWidth and topCapHeight. Anyone faced such an issue before?

The only difference I see in rendering the image in my app and exporting it is that I use UIImageViews to hold the stretchable images while exporting I am just using UIImages.

Code for combining a bubble image to a background image:

UIGraphicsBeginImageContext(mainImage.size);

[fullSectionImage drawInRect:CGRectMake(0, 0, mainImage.size.width, mainImage.size.height) blendMode:kCGBlendModeNormal alpha:1.0 ];

UIImage *bubbleImage = [UIImage imageNamed:@"bubble1.png"];
stretchableImage = [bubbleImage stretchableImageWithLeftCapWidth:40 topCapHeight:15];
[stretchableImage drawInRect:CGRectMake(originX,originY,width,height) blendMode: kCGBlendModeNormal alpha:1.0 ];
UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();   
UIImageWriteToSavedPhotosAlbum(newImage, nil,nil,nil);

Code for displaying the same bubble with the background image in the app:

UIImageView *bubbleImageView;
UIImage *bubbleImage = [UIImage imageNamed:@"bubble1.png"];
stretchableImage = [bubbleImage stretchableImageWithLeftCapWidth:40 topCapHeight:15];
bubbleImageView = [[UIImageView alloc] initWithImage:stretchableImage];
[bubbleImageView setFrame:CGRectMake(0,0,width,height)];
bubbleImageView.autoresizingMask = YES;
[self addSubview:bubbleImageView];

Answer 1

In order to solve this issue the stretchableImage should use drawInRect method with all integer values as arguements.

[stretchableImage drawInRect:CGRectMake(originX,originY,width,height) blendMode: kCGBlendModeNormal alpha:1.0 ];

originX, originY, width, height need to be integer values in this case. This solved the issue for me.