🔸blend mode

SwiftUI ⟩ view ⟩ drawing ⟩ blend mode

🔸 定義

• 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)

📘 手冊

• View ⟩ Graphics and Rendering

  • BlendMode (enum)
  • .blendMode(_:)
  • .compositingGroup()
  • Appearance

    • .overlay(alignment:content:)
• GraphicsContext ⟩ GraphicsContext.BlendMode ⭐️
• Core Image ⟩ CIBlendKernel - ⭐️ 有每個混合模式的圖例 (但為何稱為 blend kernel❓)
• SwiftOnTap ⟩ View ⟩ .colorMultiply(_:)

👥 相關

• view.shadow()

• view.inverseMask()

• mask

🗣 討論

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