✨.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)               

📘 手冊

• View ⟩

  • Graphics and Rendering

    • BlendMode (enum)

    • .blendMode(_:)

    • .compositingGroup()

👥 相關

• view.shadow()

• view.inverseMask()

• mask

• even-odd fill mode 也可以用來繪製有洞的圖形。

🗣 討論

• How can I clip a Shape with another Shape in SwiftUI?