# blend mode

[SwiftUI](../..) ⟩ [view](..) ⟩ [drawing]() ⟩ blend mode

{% tabs %}
{% tab title="🔸 定義" %}
{% hint style="info" %}
* <mark style="color:red;">**source**</mark> - view that comes with the blending effect.
* <mark style="color:red;">**destination**</mark> - everything underneath that view.
{% endhint %}

```swift
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 (?)
```
{% endtab %}

{% tab title="💈範例" %}
* [.destinationout](blend-mode/.destinationout "mention") - 挖洞用的效果。
{% endtab %}

{% tab title="📗 參考" %}
* [ ] 5 Star ⟩ [SwiftUI Blend Modes](https://www.fivestars.blog/articles/swiftui-blend-modes/)
* [ ] Design+Code ⟩ [Shape, Stroke and Blend Mode](https://designcode.io/swiftui-ios15-shape-stroke-blend-mode)
* [ ] Erica Sadun ⟩ iOS Drawing
* [ ] 彼得潘 ⟩ [SwiftUI 生動有趣的圖片效果 modifier](https://medium.com/%E5%BD%BC%E5%BE%97%E6%BD%98%E7%9A%84-swift-ios-app-%E9%96%8B%E7%99%BC%E5%95%8F%E9%A1%8C%E8%A7%A3%E7%AD%94%E9%9B%86/swiftui-%E7%94%9F%E5%8B%95%E6%9C%89%E8%B6%A3%E7%9A%84%E5%9C%96%E7%89%87%E6%95%88%E6%9E%9C-modifier-80d275c3ec0f) - .colorMultiply() ...
* [ ] [The Science of All 27 Blend Modes in Photoshop](https://youtu.be/i1D9ijh3_-I) (YouTube)
{% endtab %}

{% tab title="📘 手冊" %}
* View ⟩ [Graphics and Rendering](https://developer.apple.com/documentation/swiftui/view-graphics-and-rendering)
  * [BlendMode](https://developer.apple.com/documentation/swiftui/blendmode) (<mark style="color:red;">**enum**</mark>)
  * [.blendMode(\_:)](https://developer.apple.com/documentation/swiftui/view/blendmode\(_:\))
  * [.compositingGroup()](https://developer.apple.com/documentation/swiftui/view/compositinggroup\(\))
  * [Appearance](https://developer.apple.com/documentation/swiftui/view-appearance)
    * [.overlay(alignment:content:)](https://developer.apple.com/documentation/swiftui/view/overlay\(alignment:content:\))
* [GraphicsContext](https://developer.apple.com/documentation/swiftui/graphicscontext) ⟩ [GraphicsContext.BlendMode](https://developer.apple.com/documentation/swiftui/graphicscontext/blendmode-swift.struct)  ⭐️
* [Core Image](https://developer.apple.com/documentation/coreimage) ⟩ [CIBlendKernel](https://developer.apple.com/documentation/coreimage/ciblendkernel) - ⭐️ 有每個混合模式的圖例 (但為何稱為 blend kernel❓)
* SwiftOnTap ⟩ View ⟩ [.colorMultiply(\_:)](https://swiftontap.com/view/colormultiply\(_:\))
{% endtab %}

{% tab title="👥 相關" %}
* [view.shadow](shadow/view.shadow "mention")
* [.inversemask](../../../custom/ext/view/.inversemask "mention")
* [mask](mask "mention")
{% endtab %}

{% tab title="🗣 討論" %}
* [How can I clip a Shape with another Shape in SwiftUI?](https://stackoverflow.com/a/67128123/5409815)
{% endtab %}
{% endtabs %}
