✨.destinationOut

import SwiftUI

public struct TestBlendModesView: View {
    public init(){}
    public var body: some View {
        HStack {
            // ⭐ blend mode 會透到最底層❓
            ZStack {
                text
                myFrame
            }
            // ⭐ 套用 shadow 後 blend mode 效果消失❓
            myFrame
                .shadow(radius: 8)        // ⭐ 
            // ⭐ 套用 compositingGroup 可以防止 blend mode 透到底層
            ZStack {
                text
                myFrame
                    .compositingGroup()    // ⭐ 
                    .shadow(radius: 8)
            }
            // ⭐ Rectangle + stroke 也可以得到「邊框」的效果
            Rectangle()
                .strokeBorder(lineWidth: 16)    // ⭐ 
                .foregroundColor(.orange)
                .frame(width: 150, height: 150)
                .shadow(radius: 8)
        }
        .padding()
        .background(Color.gray)
    }
    
    var text: some View {
        Text("王")
            .font(.system(size: 60))
            .bold()
            .foregroundColor(.pink)
    }
    
    var myFrame: some View {
        VStack {
            Color.green.overlay {
                Color.orange.opacity(0.85)
                    .padding()
                    .blendMode(.destinationOut)    // ⭐ 挖洞
            }
        }
        .frame(width: 150, height: 150)
    }
}

source - pixels being applied with blend modes. (on top of destination)
destination - everything underneath source.

// R : result of blend operation
// D : destination pixel values
// Sa: source alpha

// destination out
R = D × (1 – Sa)

PreviousBlend Modes Nextcompositing group

Last updated 2 years ago