共用方式為


SkiaSharp 混合模式

這些文章著重於 BlendModeSKPaint屬性。 屬性 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 檔中,而模式的討論MultiplyScreen之前。

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 不可分隔的混合模式

使用不可分隔的混合模式來改變色調、飽和度或亮度。