Avalonia中的線性漸變畫刷LinearGradientBrush

czwy發表於2024-05-22

在WPF中使用Shape實現複雜線條動畫後，嘗試在Avalonia中也實現同樣效果。儘管官方提供了從WPF到Avalonia的快速入門文件，但由於第一次使用Avalonia，體驗過程中並不是很順利，主要是卡線上性漸變畫刷LinearGradientBrush的使用上。Avalonia中的線性漸變畫刷與WPF中的略有差異，但相關文件並不多，故將此次經歷記錄下來並分享，希望能幫助大家少走彎路。

由於Avalonia在持續更新，本文所述內容僅針對Avalonia 11.0.10版本。

WPF中的LinearGradientBrush

首先回顧一下WPF中LinearGradientBrush的使用，LinearGradientBrush是沿著StartPoint和EndPoint定義的直線漸變，並透過GradientStops屬性設定畫刷漸變停止點。預設情況下是沿著繪製區域的對角線進行漸變，也就是起點StartPoint是(0,0)，即繪製區域的左上角，終點EndPoint是(1,1)，即繪製區域的右下角。生成的漸變色沿對角線進行插值填充。例如：

<LinearGradientBrush x:Key="defaultLinearBrush">
    <GradientStop Offset="0.0" Color="Yellow" />
    <GradientStop Offset="0.25" Color="Red" />
    <GradientStop Offset="0.75" Color="Blue" />
    <GradientStop Offset="1" Color="LimeGreen" />
</LinearGradientBrush>

image

如果StartPoint是(0,0)，終點EndPoint是(1,0)，則是沿著水平方向從左到右漸變。
如果StartPoint是(0,0)，終點EndPoint是(0.5,0)，漸變效果如下圖所示：
image

透過這個例子，可以看出StartPoint和EndPoint的值是相對於繪製區域的大小，漸變範圍是從繪製區域最左邊到1/2處，右側1/2使用最後一個GradientStop設定的顏色填充。需要注意的是，StartPoint和EndPoint的值既可以是相對值，也可以是絕對值。這是由LinearGradientBrush的MappingMode屬性決定的，MappingMode是列舉型別BrushMappingMode，列舉定義如下：

列舉 取值 說明
Absolute 0 座標系統與邊界框無關。值直接在本地空間中解釋。
RelativeToBoundingBox 1 預設值。座標系統是相對於邊界框的:0表示邊界框的0%，1表示邊界框的100%。例如，(0.5,0.5)描述邊界框中間的一個點，(1,1)描述邊界框右下角的一個點。

本例中繪製區域右側1/2部分超出漸變區域的填充規則預設是用漸變向量末端的顏色值填充了剩餘的空間，也可以使用 SpreadMethod屬性指定填充規則，該列舉型別定義如下：

列舉 取值 說明
Pad 0 預設值。用漸變向量末端的顏色值填充了剩餘的空間。
Reflect 1 在相反的方向重複這個漸變，直到空間被填滿。
Repeat 2 漸變沿著原方向重複，直到空間被填滿。

Avalonia中使用LinearGradientBrush走的彎路

檢視Avalonia的API發現LinearGradientBrush也有StartPoint、EndPoint和GradientStops屬性，便照搬了WPF中的程式碼。

<LinearGradientBrush x:Key="linearBrush" StartPoint="0 1" EndPoint="1 0">
    <GradientStop Offset="0.25" Color="#399953" />
    <GradientStop Offset="0.5" Color="#fbb300" />
    <GradientStop Offset="0.75" Color="#d53e33" />
    <GradientStop Offset="1" Color="#377af5" />
</LinearGradientBrush>
<Polygon Fill="{StaticResource linearBrush}" Points="240 19 240 40 220 19"/>

結果得到卻是填充色為#377af5的三角形，透過查詢資料得知在Avalonia中StartPoint、EndPoint要使用百分比的數值，即(0%，100%)。但是在修改為StartPoint="0% 100%" EndPoint="100% 0%"後依舊是填充色為#377af5的三角形。
我便懷疑是LinearGradientBrush寫法上依舊有問題或者Polygon使用上有問題，於是寫了一個矩形測試線性漸變色填充。

<Rectangle Width="20" Height="20" Fill="{StaticResource linearBrush}"/>

結果得到了線性漸變色填充的矩形。於是可以確定是Polygon的使用上不對，根據Polygon的填充色#377af5，我猜測跟Polygon的座標有關，調整Polygon的位置後填充色會發生變化，於是修改Polygon的座標，結果得到了想要的漸變色三角形。

<Polygon Fill="{StaticResource linearBrush}" Points="0 0 20 0 20 20" />

探索求證

經過剛才的一番嘗試，我初步推測最初得到的填充色為#377af5三角形可能是由於三角形最右側的點座標是（240，19），Avalonia繪製了一個邊長為240的漸變色正方形，而這個三角形所在的區域顏色剛好是#377af5。於是我繪製了一個6行6列共有36個40x40的正方形組成的大正方形。

<LinearGradientBrush x:Key="linearBrush" StartPoint="0% 100%" EndPoint="100% 0%">
    <GradientStop Offset="0.25" Color="#399953" />
    <GradientStop Offset="0.5" Color="#fbb300" />
    <GradientStop Offset="0.75" Color="#d53e33" />
    <GradientStop Offset="1" Color="#377af5" />
</LinearGradientBrush>

<Polygon Fill="{StaticResource linearBrush}" Points="0,0 40,0 40,40 0,40" />
<Polygon Fill="{StaticResource linearBrush}" Points="40,0 80,0 80,40 40,40" />
<Polygon Fill="{StaticResource linearBrush}" Points="80,0 120,0 120,40 80,40" />
<Polygon Fill="{StaticResource linearBrush}" Points="120,0 160,0 160,40 120,40" />
<Polygon Fill="{StaticResource linearBrush}" Points="160,0 200,0 200,40 160,40" />
<Polygon Fill="{StaticResource linearBrush}" Points="200,0 240,0 240,40 200,40" />

<Polygon Fill="{StaticResource linearBrush}" Points="0,40 40,40 40,80 0,80" />
<Polygon Fill="{StaticResource linearBrush}" Points="40,40 80,40 80,80 40,80" />
<Polygon Fill="{StaticResource linearBrush}" Points="80,40 120,40 120,80 80,80" />
<Polygon Fill="{StaticResource linearBrush}" Points="120,40 160,40 160,80 120,80" />
<Polygon Fill="{StaticResource linearBrush}" Points="160,40 200,40 200,80 160,80" />
<Polygon Fill="{StaticResource linearBrush}" Points="200,40 240,40 240,80 200,80" />

<Polygon Fill="{StaticResource linearBrush}" Points="0,80 40,80 40,120 0,120" />
<Polygon Fill="{StaticResource linearBrush}" Points="40,80 80,80 80,120 40,120" />
<Polygon Fill="{StaticResource linearBrush}" Points="80,80 120,80 120,120 80,120" />
<Polygon Fill="{StaticResource linearBrush}" Points="120,80 160,80 160,120 120,120" />
<Polygon Fill="{StaticResource linearBrush}" Points="160,80 200,80 200,120 160,120" />
<Polygon Fill="{StaticResource linearBrush}" Points="200,80 240,80 240,120 200,120" />

<Polygon Fill="{StaticResource linearBrush}" Points="0,120 40,120 40,160 0,160" />
<Polygon Fill="{StaticResource linearBrush}" Points="40,120 80,120 80,160 40,160" />
<Polygon Fill="{StaticResource linearBrush}" Points="80,120 120,120 120,160 80,160" />
<Polygon Fill="{StaticResource linearBrush}" Points="120,120 160,120 160,160 120,160" />
<Polygon Fill="{StaticResource linearBrush}" Points="160,120 200,120 200,160 160,160" />
<Polygon Fill="{StaticResource linearBrush}" Points="200,120 240,120 240,160 200,160" />

<Polygon Fill="{StaticResource linearBrush}" Points="0,160 40,160 40,200 0,200" />
<Polygon Fill="{StaticResource linearBrush}" Points="40,160 80,160 80,200 40,200" />
<Polygon Fill="{StaticResource linearBrush}" Points="80,160 120,160 120,200 80,200" />
<Polygon Fill="{StaticResource linearBrush}" Points="120,160 160,160 160,200 120,200" />
<Polygon Fill="{StaticResource linearBrush}" Points="160,160 200,160 200,200 160,200" />
<Polygon Fill="{StaticResource linearBrush}" Points="200,160 240,160 240,200 200,200" />

<Polygon Fill="{StaticResource linearBrush}" Points="0,200 40,200 40,240 0,240" />
<Polygon Fill="{StaticResource linearBrush}" Points="40,200 80,200 80,240 40,240" />
<Polygon Fill="{StaticResource linearBrush}" Points="80,200 120,200 120,240 80,240" />
<Polygon Fill="{StaticResource linearBrush}" Points="120,200 160,200 160,240 120,240" />
<Polygon Fill="{StaticResource linearBrush}" Points="160,200 200,200 200,240 160,240" />
<Polygon Fill="{StaticResource linearBrush}" Points="200,200 240,200 240,240 200,240" />

<Path
    Data="M0,40 L300,40 M0,80 L300,80 M0,120 L300,120 M0,160 L300,160 M0,200 L300,200 M0,240 L300,240 M40,0 L40,300 M80,0 L80,300 M120,0 L120,300 M160,0 L160,300 M200,0 L200,300 M240,0 L240,300"
    Stroke="#ddd"
    StrokeThickness="1" />

image

結果得到如上圖所示的效果，只是在有限的範圍內漸變，而非整個大正方形區域內漸變。儘管和預期的效果不太一樣，但依舊可以從中看出一些端倪：

  • 對角線上的小正方形中符合預期的漸變色
  • 漸變向量起點的顏色值填充了對角線左下方的空間，漸變向量末端的顏色值填充對角線右上方的空間
  • 最初得到的填充色為#377af5三角形相對於大正方形的區域顏色也是#377af5

根據這幾點現象結合已有的知識分析推測，線性漸變畫刷只作用於第0行0列的小正方形，對角線上的正方形及其兩側相鄰的正方形顏色是由於插值演算法補充的漸變色，對角線兩側的顏色是如同WPF中SpreadMethod.Pad的填充效果。

到了這裡不禁會想，Points="240 19 240 40 220 19"的Polygon真的沒法實現漸變效果嗎？Avalonia中StartPoint的百分比值能否超過100%？既然這個大正方形由六行六列的小正方形組成，那就把StartPoint的百分比值設為600%試試看，結果真的得到了預期的效果。下圖是36個40x40的小正方形組成的大正方形和一個240x240的正方形的漸變效果對比，透過取色器抽查，每個座標點顏色值一致。
image

到了這裡，基本明白了Avalonia中線性畫刷的機制，StartPoint設定相對值時需要用百分制的數值，與WPF中相對值模式不同的是，Avalonia中相對模式的百分比是基於繪製區域的尺寸，但座標系統不是基於繪製區域邊界，而是基於本地空間(local space)。這或許跟skiasharp的渲染機制有關。

由於相對模式的座標系統是基於本地空間，這樣並沒有解決Points="240 19 240 40 220 19"的Polygon實現漸變效果的需求，繼而需要尋求絕對值模式的解決方式。Avalonia中線性畫刷是否支援絕對值呢？查閱API，並沒有找到MappingMode屬性，難道真的不支援絕對值模式嗎？回想一下，最初StartPoint設定為(0,1)是並沒有報錯，只是結果不是預期的，那看一下36個40x40的小正方形的畫刷StartPoint設定為(0,1)是什麼效果。
image

預覽介面放大到800%後發現，漸變效果其實也是生效的，這裡設定的(0,1)不就是絕對值嘛。當StartPoint="0 240" EndPoint="240 0"時，36個小正方形組成的240x240的區域也實現了預期的漸變效果。StartPoint="220 40" EndPoint="240 19"時就滿足了Points="240 19 240 40 220 19"的Polygon實現漸變效果的需求。

總結

經過一番嘗試和分析，對於Avalonia中線性漸變畫刷有了基本瞭解。歸納了以下幾點內容：

  • Avalonia中線性漸變畫刷既支援相對模式，也支援絕對模式。
  • StartPoint和EndPoint的取值為百分比時使用的相對模式，取值為數值則是絕對模式。類似於WPF中設定MappingMode
  • 相對模式下StartPoint和EndPoint的百分比值是基於繪製區域的尺寸，但座標系統是基於本地空間(local space)，而非相對於繪製區域邊界。
  • Avalonia中線性漸變畫刷也支援設定漸變範圍以外區域的填充方式，和WPF中一樣，透過設定SpreadMethod屬性實現。

相關文章