UIImage 如何使用 capInsets 调整气泡图像的大小? [英] UIImage how to resize bubble image with capInsets?

问题描述

我有像气泡一样的图像，我需要动态调整大小.附上例子.我将有动态文本，我只需要调整气泡的直线部分的大小.在中间留下向下箭头我怎样才能做到这一点?谢谢

I have bubble like image, that I need to resize dynamically. Example attached. I will have dynamic text and I need to resize only straight parts of bubble. Leave down arrow on the middle How can I do this? Thanks

推荐答案

我认为 resizableImageWithCapInsets: 对你非常有用

I think that resizableImageWithCapInsets: will be pretty useful for you

示例:

UIImage *image = [[UIImage imageNamed:@"buttonImage"] resizableImageWithCapInsets:UIEdgeInsetsMake(5.0,10.0,5.0,10.0)];
[self.yourButton setBackgroundImage:image forState:UIControlStateNormal];

我用按钮写了例子，因为这是使用这种方法的常见情况.只是玩大写值.

I wrote example with button because it's a common case of using this method. Just play with caps values.

HTH！

想到了这个问题，写了个小例子.我知道 resizableImageWithCapInsets: 只能保存图像的角落，以防我们使用二维比例.

Thought about this problem and wrote small example. I understood that resizableImageWithCapInsets: can save only corners of image in case we use two dimension scale.

我认为有两种方式:

1. 使用两种控件:一种用于气球，一种用于带有适当图像的箭头
2. 从两个图像为这个控件渲染图像

我决定实现第二个.在此处传递 ballonView.frame 作为参数:

I decided to realize second one. Pass ballonView.frame as argument here:

- (UIImage *)balloonImageWithRect:(CGRect)rect{
    //create two images, ballon image with cap corners
    UIImage *ballonImage = [[UIImage imageNamed:@"balloon"] resizableImageWithCapInsets:UIEdgeInsetsMake(IMAGE_CAP_INSET_TOP, IMAGE_CAP_INSET_LEFT, IMAGE_CAP_INSET_BOTTOM, IMAGE_CAP_INSET_RIGHT) resizingMode:UIImageResizingModeStretch];
    UIImage *arrowImage = [UIImage imageNamed:@"arrow"];

    //drawing area
    CGSize newSize = rect.size;
    UIGraphicsBeginImageContext(newSize);

    //leave some space for arrow at the bottom
    [ballonImage drawInRect:CGRectMake(0, 0, newSize.width, newSize.height - arrowImage.size.height)];
    //draw arrow at the bottom
    [arrowImage drawInRect:CGRectMake((newSize.width - arrowImage.size.width)/2, newSize.height - arrowImage.size.height, arrowImage.size.width, arrowImage.size.height)];

    UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    return newImage;
}

然后我们只需将此图像设置为我们的 ballonView.

Then we just set this image to our ballonView.

此外，我还留下了该 ViewController 的完整代码以及该气球的随机大小的要点:https://gist.github.com/AlloyDev/7910637

Also I leave gist with full code of that ViewController with random sizes of that balloon: https://gist.github.com/AlloyDev/7910637

你也可以使用这两张图片:

Also you can use that two images:

这篇关于UIImage 如何使用 capInsets 调整气泡图像的大小?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！