SkiaSharp 混合模式
這些文章著重於 BlendMode
的 SKPaint
屬性。 屬性 BlendMode
的類型為 SKBlendMode
,列舉具有29個成員。
屬性 BlendMode
會決定當圖形物件(通常稱為 來源)呈現在現有圖形物件上時會發生什麼情況(稱為 目的地)。 一般而言,我們預期新的圖形化物件會遮蔽其下方的物件。 但這只會因為預設的混合模式是 SKBlendMode.SrcOver
,這表示來源會繪製 在目的地上 。 其他28個成員 SKBlendMode
造成其他影響。 在圖形程序設計中,以各種方式結合圖形物件的技巧稱為 組合。
SKBlendModes 列舉
SkiaSharp 混合模式會密切對應至 W3C Compositing 和 Blending Level 1 規格中所述的模式。 Skia SkBlendMode 概觀 也提供實用的背景資訊。 如需混合模式的一般簡介, 維琪百科的 Blend 模式 文章是不錯的起點。 Adobe Photoshop 支援混合模式,因此該內容中有關於混合模式的其他在線資訊。
列舉的 SKBlendMode
29 個成員可以分成三個類別:
Porter-Duff | 分離 | 不可分隔 |
---|---|---|
Clear |
Modulate |
Hue |
Src |
Screen |
Saturation |
Dst |
Overlay |
Color |
SrcOver |
Darken |
Luminosity |
DstOver |
Lighten |
|
SrcIn |
ColorDodge |
|
DstIn |
ColorBurn |
|
SrcOut |
HardLight |
|
DstOut |
SoftLight |
|
SrcATop |
Difference |
|
DstATop |
Exclusion |
|
Xor |
Multiply |
|
Plus |
這三個類別的名稱在後續討論中將具有更多意義。 此處所列成員的順序與 列舉定義 SKBlendMode
中的順序相同。 第一個數據行中的13個列舉成員具有0到12的整數值。 第二個數據行是對應至整數 13 到 24 的列舉成員,而第三個數據行中的成員值為 25 到 28。
這些混合模式在 W3C Compositing 和 Blending Level 1 檔中會以大致相同的順序討論,但有一些差異:模式Src
在 W3C 檔中稱為複製,稱為Plus
較輕。 W3C 檔案會定義未包含在 中的SKBlendModes
一般混合模式,因為它會與 SrcOver
相同。 Modulate
混合模式 (在第二欄的頂端) 不包含在 W3C 檔中,而模式的討論Multiply
在 Screen
之前。
Modulate
因為混合模式對 Skia 而言是獨一無二的,因此會討論為額外的 Porter-Duff 模式和可分隔模式。
透明度的重要性
從歷史上看,組合是與Alpha色板的概念一起開發的。 在物件和全色位圖等 SKCanvas
顯示介面中,每個圖元各包含 4 個字節:紅色、綠色和藍色元件各有 1 個字節,另外還有一個字節的透明度。 此 Alpha 元件是 0,用於完整透明度,0xFF完整不透明度,這些值之間具有不同層級的透明度。
許多混合模式都依賴透明度。 通常,當 SKCanvas
第一次在處理程式中 PaintSurface
取得 時,或在 建立 以繪製位圖時 SKCanvas
,第一個步驟是這個呼叫:
canvas.Clear();
此方法會將畫布的所有圖元取代為透明黑色圖元,相當於 new SKColor(0, 0, 0, 0)
或整數0x00000000。 所有像素的所有位元組都會初始化為零。
在處理程式中PaintSurface
取得的SKCanvas
繪圖表面可能會有白色背景,但這隻是因為SKCanvasView
本身具有透明背景,而頁面具有白色背景。 您可以將 的 SKCanvasView
屬性設定Xamarin.FormsBackgroundColor
為Xamarin.Forms色彩,向自己示範此事實:
canvasView.BackgroundColor = Color.Red;
或者,在衍生自 ContentPage
的類別中,您可以設定頁面背景色彩:
BackgroundColor = Color.Red;
您會在 SkiaSharp 圖形後面看到這個紅色背景,因為 SkiaSharp 畫布本身是透明的。
SkiaSharp Transparency 一文顯示一些基本技術,說明如何使用透明度在複合影像中排列多個圖形。 混合模式超出此範圍,但透明度對於混合模式而言仍然很重要。
SkiaSharp Porter-Duff 混合模式
使用 Porter-Duff 混合模式,根據來源和目的地影像來撰寫場景。
SkiaSharp 可分隔混合模式
使用可分隔的混合模式來改變紅色、綠色和藍色。
SkiaSharp 不可分隔的混合模式
使用不可分隔的混合模式來改變色調、飽和度或亮度。