iOS Swift处理点9图片

一、什么是点9图？

点9图是Android开发中用到的一种特殊格式的图片，后缀名是“.9.png”的图片。左上两条线控制可拉伸区域（未画线表示不可拉伸），右下两条线控制内容显示区（无文字内容不画）。

二、点9图的作用是什么？

简单来说，点9图的作用就是可以保证图片在不模糊变形的前提下做到自适应。

什么意思呢？我们来举个简单的例子说明吧。下图是我们常见的按钮背景，切图的时候如果没有用点9切图，开发想改变按钮的高度的时候，会直接整体拉伸，得到的结果就是圆角就变形了，如下图：

那么用点9图之后，会通过左、上两条横线定义图片可以拉伸的部分，问题就得到了解决啦，如下图：

三 iOS中如何处理图片局部拉伸

iOS中处理进行图片局部拉伸，相关API如下:

@available(iOS 5.0, *)
open func resizableImage(withCapInsets capInsets: UIEdgeInsets) -> UIImage
 
@available(iOS 6.0, *)
open func resizableImage(withCapInsets capInsets: UIEdgeInsets, resizingMode: UIImage.ResizingMode) -> UIImage

capInsets定义图片的不拉伸范围(这个范围是相对于源图片大小而言)，resizingMode定义了图片以拉伸/平铺的方式变换。

四 iOS中如何处理点9图片

iOS和安卓为了可以统一用一套UI，iOS需要显示点九图片，具体思路是获取到图片中上、左两条直线的像素颜色值，取得黑线距离两边的距离即为不可拉伸区域，得到上下左右不可拉伸区域之后，用iOS局部拉伸API处理。

func  ninePatchImage(_ scale: Int = 3) -> UIImage{
       guard let imageRef = self.cgImage else{
           return self
       }
 
       guard let rgbaImage :[[CGFloat]] = getRGBA() else{
           return self
       }
       let scale:CGFloat = CGFloat(scale)
        
       //最上边一行的各像素点数组
       var topBarRgba:[[CGFloat]] = []
       for i in 1..<imageRef.width - 1 {
           topBarRgba.append(rgbaImage[i])
       }
        
        
        
       //最左边一排像素点数组
       var leftBarRgba = [[CGFloat]]()
       for i in 0..<rgbaImage.count {
           if i % imageRef.width == 0{
               leftBarRgba.append(rgbaImage[i])
           }
       }
       leftBarRgba.removeFirst()
       leftBarRgba.removeLast()
 
 
       guard let edge = stretchEdge(topBarRgba: topBarRgba, leftBarRgba: leftBarRgba) else {
           return self
       }
        
       if let  cgImage = self.cgImage?.cropping(to: CGRect(x: 1, y: 1, width: self.size.width - 2, height: self.size.height - 2)){
         
           var cropImage = UIImage.init(cgImage: cgImage, scale: CGFloat(scale), orientation: .up)
           cropImage = cropImage.resizableImage(withCapInsets: UIEdgeInsets(top: edge.top/scale, left: edge.left/scale, bottom: edge.bottom/scale, right: edge.right/scale),resizingMode: .stretch)
           return cropImage
            
       }
        
 
       return self
   }

获取黑线距离各边的具体长度

private func stretchEdge(topBarRgba:[[CGFloat]],leftBarRgba:[[CGFloat]]) -> UIEdgeInsets?{
        var left = -1
        for i in 0..<topBarRgba.count {
            if topBarRgba[i][3] == 1 {
                left = i
                break
            }
        }
        if left == -1{
            return nil
        }
        var right = -1
        for i in (0..<topBarRgba.count).reversed() {
            if topBarRgba[i][3] == 1 {
                right = i
                break
            }
        }
        if right == -1{
            return nil
        }
         
        var top = -1
        for i in (0..<leftBarRgba.count) {
            if leftBarRgba[i][3] == 1 {
                top = i
                break
            }
        }
        if top == -1{
            return nil
        }
             
         
        var bottom = -1
        for i in (0..<leftBarRgba.count).reversed() {
            if leftBarRgba[i][3] == 1 {
                bottom = i
                break
            }
        }
        if bottom == -1{
            return nil
        }
        bottom = leftBarRgba.count - 1 - bottom
        right = topBarRgba.count - 1 - right
         
        return UIEdgeInsets(top: CGFloat(top), left: CGFloat(left), bottom: CGFloat(bottom), right: CGFloat(right))
    }