美文网首页00『 基础知识 』iOS学习动画设计学习
图片拉伸:拉伸两边,保持中间不动

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

作者: 程序员Wiseman | 来源:发表于2016-08-25 18:26 被阅读1484次

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

2.试过使用slicing

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

相关文章

网友评论

  • 孙金亮:多谢解决了我拉伸图片的问题
  • 28bb64fffadd:1.CGSize imageSize = self.size;想问下这里self.size是指的什么的size,image,还是iamgeview的呢?
    2.UIImage *image = [self stretchableImageWithLeftCapWidth:imageSize.width *0.8 topCapHeight:imageSize.height * 0.5]; 此处的self是不是应该指的是image?
  • 卟师:我能转载分享吗?我会标注上作者和出处的
  • haohua:感觉这样拉伸有个问题,第一次拉伸的时候会出现一根虚线,
    haohua:@CocoaH 把拉伸的图片宽高都设成偶数,这个可以喊UI帮你弄一下。
    CocoaH:我也是出现白色线了,请问你的问题解决了吗?

本文标题:图片拉伸:拉伸两边,保持中间不动

本文链接:https://www.haomeiwen.com/subject/gteasttx.html