美文网首页
图片拉伸边角不变形方法:resizableImage

图片拉伸边角不变形方法:resizableImage

作者: xu_chen | 来源:发表于2018-08-25 18:06 被阅读0次

    效果如下图所示

    图片.png

    一、简介

    日常开发中,可能需要使用 圆角图片 作为按钮的背景图,不需要设置按钮的圆角半径。但是当按钮的尺寸发生改变时,边角也会被拉伸,如上图
    为了解决上述问题,可使用 UIImageresizableImageWithCapInsetsstretchableImageWithLeftCapWidth 两种方法

    - (UIImage *)resizableImageWithCapInsets:(UIEdgeInsets)capInsets resizingMode:(UIImageResizingMode)resizingMode NS_AVAILABLE_IOS(6_0); // the interior is resized according to the resizingMode
    
    - (UIImage *)stretchableImageWithLeftCapWidth:(NSInteger)leftCapWidth topCapHeight:(NSInteger)topCapHeight __TVOS_PROHIBITED;
    

    二、 resizableImageWithCapInsets

    此方法是定义指定区域被拉伸,从 分别在图片上画一个矩形框,范围内的区域被拉伸,外部保持不变

    image = [image resizableImageWithCapInsets:UIEdgeInsetsMake(0,10,0,10) resizingMode:UIImageResizingModeStretch];
    

    UIEdgeInsetsMake(0,10,0,10) : 表示上左下右边距 10,不会被拉升,其余部分(被边距划出来的矩形区域)会被拉伸。 这里的 边距 10一般表示圆角半径
    UIImageResizingModeStretch: 通过拉伸 UIEdgeInsets 指定的的矩形区域来填充图片
    UIImageResizingModeTile: 通过重复显示 UIEdgeInsets 指定的矩形区域来填充图片

    三、stretchableImageWithLeftCapWidth

    此方法是通过设置 左边不拉伸区域宽度上面不拉伸区域的高度 来达到边角不拉伸的效果

    NSUInteger leftCapWidth = image.size.width*0.5;
    NSUInteger topCapHeight = 0;
    image = [image stretchableImageWithLeftCapWidth:leftCapWidth
                                       topCapHeight:topCapHeight];
    

    leftCapWidth:左边不拉伸区域的宽度
    topCapHeight:上面不拉伸区域的高度
    扩展:
    rightCapWidth = 图片宽度 - leftCapWidth - 1
    bottomCapHeight = 图片高度 - topCapHeight - 1
    而拉伸区域 capInset 实际上是(topCapHeight,leftCapWidth,bottomCapHeight,rightCapWidth)
    所以,一般 leftCapWidth 取 图片宽度 的 一半topCapHeight 取图片高度 的一半,来获取拉伸区域 1*1的矩阵来 复制填充(UIImageResizingModeTile),保持外围的区域不变

    四、 封装方法

    为了使用方便,将两个方法简单封装了一下

    // 拉伸图片,可解决气泡背景图,圆角按钮背景图,修改尺寸边角被拉伸变形的问题
    + (UIImage *)chx_resizableImage:(UIImage *)image {
        NSInteger leftCatpWidth = image.size.width * 0.5;
        NSInteger topCapHeight = image.size.height * 0.5;
        return [image stretchableImageWithLeftCapWidth:leftCatpWidth topCapHeight:topCapHeight];
    }
    
    // 指定 上、左、下、右 的区域拉伸图片,范围外不拉伸
    + (UIImage *)chx_resizableImageWithCapInsets:(UIEdgeInsets)capInsets
                                           image:(UIImage *)image {
        return  [image resizableImageWithCapInsets:capInsets resizingMode:UIImageResizingModeStretch];
    }
    

    相关文章

      网友评论

          本文标题:图片拉伸边角不变形方法:resizableImage

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