SwiftUI 生動有趣的圖片效果 modifier

SwiftUI 提供多種圖片效果的 modifier，讓我們不用花錢買昂貴的美術軟體，用一兩行程式就能做出常見的圖片效果。接下來就讓我們一一認識調整模糊，混合，亮度，顏色反轉，色彩增值，對比，灰階，色相旋轉，遮色片，飽和度的各式 modifier。

blur 模糊效果

原圖的 blur 為 0，數字愈大愈模糊。

struct ContentView: View {
    
    var body: some View {
        
        NavigationView {
            VStack {
                Image("peter")
                    .blur(radius: 30)
                Text("30")
                    .font(.largeTitle)
                Image("peter")
                    .blur(radius: 10)
                Text("10")
                    .font(.largeTitle)
            }
            .navigationBarTitle("blur")
        }
    }
}

SwiftUI 的 blur 模糊效果

blur(radius:opaque:)

調整亮度的 brightness

原圖的 brightness 為 0，範圍是 0~ 1，數字愈大高度愈亮。

struct ContentView: View {
    
    var body: some View {
        
        NavigationView {
            VStack {
                Image("peter")
                    .brightness(0.5)
                Text("0.5")
                    .font(.largeTitle)
                Image("peter")
                    .brightness(0.1)
                Text("0.1")
                    .font(.largeTitle)
            }
            .navigationBarTitle("brightness")
        }
    }
}

利用 SwiftUI 的 brightness 調整圖片亮度

brightness(_:)

顏色反轉的 colorInvert

struct ContentView: View {
    
    var body: some View {
        
        NavigationView {
            VStack {
                Image("peter")
                    .colorInvert()
            }
            .navigationBarTitle("colorInvert")
        }
    }
}

colorInvert()

色彩增值的 colorMultiply

將某個顏色套用到圖片上。

struct ContentView: View {
    
    var body: some View {
        
        NavigationView {
            VStack {
                Image("peter")
                    .colorMultiply(Color.green)
                Text("green")
                    .font(.largeTitle)
                Image("peter")
                    .colorMultiply(Color.red)
                Text("red")
                    .font(.largeTitle)
            }
            .navigationBarTitle("colorMultiply")
        }
    }
}

colorMultiply(_:)

調整顏色對比度的 contrast

原圖的 contrast 為 1，數字大於 1 時，圖片的亮度和彩度增加。數字小於 1 時，圖片的亮度和彩度降低。

struct ContentView: View {
    
    var body: some View {
        
        NavigationView {
            VStack {
                Image("peter")
                    .contrast(3)
                Text("3")
                    .font(.largeTitle)
                Image("peter")
                    .contrast(0.5)
                Text("0.5")
                    .font(.largeTitle)
            }
            .navigationBarTitle("contrast")
        }
    }
}

contrast(_:)

調整顏色灰階的 grayscale

原圖的 grayscale 為 0，範圍是 0~ 1，數字愈大灰階效果愈明顯。

struct ContentView: View {
    
    var body: some View {
        
        NavigationView {
            VStack {
                Image("peter")
                    .grayscale(0.9)
                Text("0.9")
                    .font(.largeTitle)
                Image("peter")
                    .grayscale(0.2)
                Text("0.2")
                    .font(.largeTitle)
            }
            .navigationBarTitle("grayscale")
        }
    }
}

grayscale(_:)

色相旋轉的 hueRotation

原圖的 hueRotation 旋轉 0 度，範圍是 0 ~ 360 度。

struct ContentView: View {
    
    var body: some View {
        
        NavigationView {
            VStack {
                Image("peter")
                    .hueRotation(Angle(degrees: 90))
                Text("90")
                    .font(.largeTitle)
                Image("peter")
                    .hueRotation(Angle(degrees: 180))
                Text("180")
                    .font(.largeTitle)
            }
            .navigationBarTitle("hueRotation")
        }
    }
}

hueRotation(_:)

遮色片效果的 luminanceToAlpha

struct ContentView: View {
    
    var body: some View {
        
        NavigationView {
            VStack {
                Image("peter")
                   .luminanceToAlpha()
               
            }
            .navigationBarTitle("luminanceToAlpha")
        }
    }
}

luminanceToAlpha()

調整顏色飽和度(彩度)的 saturation

原圖的飽和度為 1，數字大於 1 時顏色的鮮豔度增加，數字小於 1 時顏色的鮮豔度降低。

struct ContentView: View {
    
    var body: some View {
        
        NavigationView {
            VStack {
                Image("peter")
                    .saturation(5)
                Text("5")
                    .font(.largeTitle)
                Image("peter")
                    .saturation(0.3)
                Text("0.3")
                    .font(.largeTitle)
            }
            .navigationBarTitle("saturation")
        }
    }
}

混合圖片的 blendMode

混合 peter & sky 兩張照片，假設圖片一樣大。

struct ContentView: View {
    
    var body: some View {
        
        NavigationView {
            VStack {
                ZStack {
                    Image("peter")
                    Image("sky")
                        .blendMode(.colorBurn)
                }
                Text("colorBurn")
                    .font(.largeTitle)
                ZStack {
                    Image("peter")
                    Image("sky")
                        .blendMode(.darken)
                }
                Text("darken")
                    .font(.largeTitle)
            }
            .navigationBarTitle("blendMode")
        }
    }
}

可選擇各種 blend 效果。

利用 SwiftUI 的 blendMode 混合圖片

blendMode(_:)