图片拉伸:拉伸两边,保持中间不动

1.想要实现一个弹框,是对某项事务的说明,效果如下

图片拉伸:拉伸两边,保持中间不动_第1张图片

2.试过使用slicing

图片拉伸:拉伸两边,保持中间不动_第2张图片
Snip20160825_14.png
  • 不论你怎么调,中间的那个小尖尖都会变形或者是没有拉伸的效果,或者拉成很奇怪的东西

3.所以用代码来实现了

  • 思路 既然要保证中间不变拉伸两边,那我们先拉伸左边,然后得到的图片拿来再拉伸右边,保证两次拉伸的距离相同可以了

  • 思路图:有点丑,见谅

Snip20160825_15.png

需要拉伸的距离就是 X = (Z - Y) / 2

4.思路有了,上代码

- (UIImage *)dc_stretchLeftAndRightWithContainerSize:(CGSize)size
{
    CGSize imageSize = self.size;
    CGSize bgSize = size;
    
    //1.第一次拉伸右边 保护左边
    UIImage *image = [self stretchableImageWithLeftCapWidth:imageSize.width *0.8 topCapHeight:imageSize.height * 0.5];
    
    //第一次拉伸的距离之后图片总宽度
    CGFloat tempWidth = (bgSize.width)/2 + imageSize.width/2;
    
    UIGraphicsBeginImageContextWithOptions(CGSizeMake(tempWidth, imageSize.height), NO, [UIScreen mainScreen].scale);
    
    [image drawInRect:CGRectMake(0, 0, tempWidth, bgSize.height)];
    
    //拿到拉伸过的图片
    UIImage *firstStrechImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    
    //2.第二次拉伸左边 保护右边
    UIImage *secondStrechImage = [firstStrechImage stretchableImageWithLeftCapWidth:firstStrechImage.size.width *0.1 topCapHeight:firstStrechImage.size.height*0.5];
    
    return secondStrechImage;
}

5.PS:这被我弄成了一个图片的分类,方便使用

我是看了这篇文章有的思路,需要的同学可以看看,感谢他

http://www.jianshu.com/p/bb3300cf15c4

你可能感兴趣的:(图片拉伸:拉伸两边,保持中间不动)