Blend Modes

🔸 定義

• source - view that comes with the blending effect.

• destination - everything underneath that view.

source     : pixels being applied (blend modes)
destination: pixels already stored to the context

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

// blend modes:
R = S × Sa + D × (1 – Sa)      // normal
R = S × Da                     // source in
R = S × (1 – Da)               // source out
R = S × Da + D × (1 – Sa)      // source atop (?)
R = S × (1 – Da) + D           // destination over
R = D × Sa                     // destination in
R = D × (1 – Sa)               // destination out
R = S × Da + D × (1 – Sa)      // destination atop (?)

💈範例

• .destinationOut - 挖洞用的效果。

📗 參考

• 5 Star ⟩ SwiftUI Blend Modes

• Design+Code ⟩ Shape, Stroke and Blend Mode

• Erica Sadun ⟩ iOS Drawing

• 彼得潘 ⟩ SwiftUI 生動有趣的圖片效果 modifier - .colorMultiply() ...

• The Science of All 27 Blend Modes in Photoshop (YouTube)

📘 手冊

• GraphicsContext ⟩ GraphicsContext.BlendMode ⭐️

• Core Image ⟩ CIBlendKernel - ⭐️ 有每個混合模式的圖例 (但為何稱為 blend kernel❓)

• SwiftOnTap ⟩ View ⟩ .colorMultiply(_:)

• View ⟩

  • Graphics and Rendering

    • BlendMode (enum)

    • .blendMode(_:)

    • .compositingGroup()

  • Appearance

    • .overlay(alignment:content:)

👥 相關

• Shadow

• .inverseMask() 🌀

• Mask

🗣 討論

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