利用 SwiftUI 的 blendMode 混合圖片

很多美術軟體都有混合圖片的酷炫功能，比方 Sketch & Photoshop App 有著多種混合圖片的 blend mode 任君挑選。

A Guide to Blending Modes in Sketch

Sketch: Blending Modes 101 (English version)

現在不需要花錢買美術軟體了，在 SwiftUI 只要呼叫 View 的 function blendMode(_:)，一行程式即可混合圖片。

func blendMode(_ blendMode: BlendMode) -> some View

blendMode(_:)

參數 blendMode 控制混合的效果，它的型別是個 enum，從以下連結可查詢它的各種 case。

BlendMode

不過這些 case 我們再看一千年也看不出它是什麼，接下來就讓我們親手試試這些效果，實驗混合帥氣鑿冰的彼得潘跟美麗沙漠的圖片吧。

struct ContentView: View {
   var body: some View {
      ZStack {
         Image("pattern")
            .resizable()
         Image("peter")
            .resizable()
            .blendMode(.screen)
      }
   }
}

說明

ZStack (Depth Stack) 可以顯示多個元件，它會將元件一層層疊上。我們利用 ZStack 容納 2 張圖片，然後在第二張圖片呼叫 .blendMode(.screen)，讓第 2 張圖 peter 和它下面的圖片 pattern 混合，比方下圖為 .screen 的合成效果。

讓我們再多試試幾個有趣的效果。

.blendMode(.colorBurn)

.blendMode(.colorDodge)

效果實在太多，其它就留給大家實驗玩玩了。關於各種 case 的效果，有興趣的也可參考 Apple 官方 CIBlendKernel 的說明，點選其中的 case 可看到它的圖片混合效果。

CIBlendKernel