【iOS】resizableImageWithCapInsets简介

学习文章

用于mask遮罩效果的图片配合resizableImage使用

介绍

开发中,我们经常有这样的需求:需要对image的部分内容进行拉伸或扩展.比如App中用到时间线,时间线的图片,比如一个箭头,需要根据内容变长,但是箭头不能放大,又比如一个温度计App,温度计中显示当前温度的图片,也要随着温度的变化拉伸.

这时,我们会用到UIImage的一个API(或者说两个API):
resizableImageWithCapInsets(capInsets:UIEdgeInsets,resizingMode:UIImageResizingMode) -> UIImage
(或者说resizableImageWithCapInsets(capInsets: UIEdgeInsets) -> UIImage)

resizableImageWithCapInsets(capInsets:UIEdgeInsets,resizingMode:UIImageResizingMode) -> UIImage
和 resizableImageWithCapInsets(capInsets: UIEdgeInsets) -> UIImage 功能是一样的, 都是指定inset内的图片内容进行缩放,inset范围的内容不变. 只不过前者指定了缩放模式,其中UIImageResizingModeTile 是平铺,UIImageResizingModeStretch 是拉伸.

本文展示一个遮罩拉伸的例子.

效果

ResizeImage.gif

源码

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        
        super.viewDidLoad()

        let imageView: UIImageView = UIImageView(image: UIImage(named: "background"))
        imageView.frame = CGRect(x: 0, y: 0, width: imageView.bounds.width/3, height: imageView.bounds.height/3)
        imageView.center = view.center
        
        view.addSubview(imageView)
        
        let maskImage: UIImage = UIImage(named: "mask")!
        
        /*
        *  resizableImageWithCapInsets(capInsets: UIEdgeInsets, resizingMode: UIImageResizingMode) -> UIImage 和
        *   resizableImageWithCapInsets(capInsets: UIEdgeInsets) -> UIImage 功能是一样的,
        *  都是指定inset内的图片内容进行缩放,inset范围的内容不变.
        *  只不过前者指定了缩放模式,其中UIImageResizingModeTile 是平铺,UIImageResizingModeStretch 是拉伸
        */
        maskImage.resizableImageWithCapInsets(UIEdgeInsets(top: 12, left: 12, bottom: 12, right: 12), resizingMode: .Stretch)
        
        let maskImageView: UIImageView = UIImageView(frame: CGRect(x: 0, y: 0, width: 100, height: 100))
        maskImageView.image = maskImage
        
        view.addSubview(maskImageView)
        
        imageView.maskView = maskImageView
        
        UIView.animateWithDuration(3, delay: 0, options: .CurveEaseIn, animations: { () -> Void in
            
            maskImageView.frame = imageView.bounds
            
            }) { (Bool) -> Void in
                
        }
        
    }

}

下载源码

下载地址