Swift-技巧(一)縮放並填充圖片

語言: CN / TW / HK

小知識,大挑戰!本文正在參與“程式設計師必備小知識”創作活動

摘要

直接操作圖片來實現它的縮放或者填充多餘空間,首選 UIGraphicsBeginImageContext 函式來實現,它就相當於一個畫布,你甚至可以用它來塗鴉。

最近有一個需求,就是將圖片先等比例縮放到指定大小,然後將空餘出來空間填充為黑色,返回指定大小的圖片。

這種直接操作圖片的需求,就要考慮使用UIGraphicsBeginImageContext 函式實現。它可以理解為一個畫布,我們只需要把圖片放在畫布的對應位置,把畫布的多餘地方全部塗成黑色就完成。

實現

先看程式碼,然後在分析:

``` func rescaleAndPading(_ image: UIImage, targetSize: CGSize) -> UIImage? {        let max = max(image.width, image.height)        let ratio = Float(targetSize.width) / Float(max)                let (newWidth, newHeight) = (

Int(Float(image.width) * ratio),            Int(Float(image.height) * ratio)        )                let (tarWidth, tarHeight) = (                        Int(targetSize.width),            Int(targetSize.height)        )                let deltaW = tarWidth - newWidth        let deltaH = tarHeight - newHeight                let (y, x) = (                        deltaH / 2,            deltaW / 2        )                // 建立繪圖上下文環境        UIGraphicsBeginImageContext(targetSize)        let context = UIGraphicsGetCurrentContext()        // 黃色背景        context?.setFillColor(UIColor.yellow.cgColor)        context?.fill(CGRect(x: 0, y: 0, width: tarWidth, height: tarHeight))        image.draw(in: CGRect(x: x, y: y, width: newWidth, height: newHeight))        // 獲取上下文裡的內容,將檢視寫入到新的影象物件        let newImage = UIGraphicsGetImageFromCurrentImageContext()        UIGraphicsEndImageContext()        return newImage    } ```

看程式碼,總結出邏輯很簡單,就是首先根據目標的 size 來計算出需要縮放的比例(按照最大邊來處理),計算出圖片在畫布中的對應位置和縮放後的寬高。

最後就是重頭戲,呼叫 UIGraphicsBeginImageContext 來繪畫。這裡要留意幾個引數的設定:

  • UIGraphicsBeginImageContext(targetSize) 中的 targetSize 是設定畫布的大小。
  • image.draw(in:) 是圖片在畫布中的 rect 。
  • context 是畫布的物件
  • context?.setFillColor(_) 是設定畫布的顏色,若不設定,預設為 black(黑色)
  • context?.fill()是設定畫布填充的 rect。

重點

如果是前面留意邏輯時,會發現邏輯中是先放置圖片,然後填充空餘空間,但是程式碼中是先填充全部空間,然後再放置圖片,這是為什麼?

經過測試後發現,後繪製的區域會覆蓋掉先前已經繪製的區域,所以程式碼中的處理就是防止填充區域覆蓋圖片區域。

題外話

時間倉促,說的的東西可能不全面,在你實現過程中遇到什麼問題,評論區給我留言,我會盡快回復

\ \