SwiftUI 生動有趣的圖片效果 modifier

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

blur 模糊效果

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

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

SwiftUI 的 blur 模糊效果

blur(radius:opaque:) | Apple Developer Documentation

調整亮度的 brightness

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

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

利用 SwiftUI 的 brightness 調整圖片亮度

brightness(_:) | Apple Developer Documentation

顏色反轉的 colorInvert

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

colorInvert() | Apple Developer Documentation

色彩增值的 colorMultiply

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

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

colorMultiply(_:) | Apple Developer Documentation

調整顏色對比度的 contrast

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

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

contrast(_:) | Apple Developer Documentation

調整顏色灰階的 grayscale

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

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

grayscale(_:) | Apple Developer Documentation

色相旋轉的 hueRotation

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

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

hueRotation(_:) | Apple Developer Documentation

遮色片效果的 luminanceToAlpha

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

luminanceToAlpha() | Apple Developer Documentation

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

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

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

混合圖片的 blendMode

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

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

可選擇各種 blend 效果。

利用 SwiftUI 的 blendMode 混合圖片

blendMode(_:) | Apple Developer Documentation