本文告訴大家如何在 win2d 使用漸變顏色
線條漸變
在 UWP 的 Win2d 使用漸變顏色需要 CanvasLinearGradientBrush 做顏色，本文告訴大家如何在 win2d 使用 CanvasLinearGradientBrush 做漸變。
漸變的顏色可以嘗試打開任意一個控件，查看屬性，就可以知道漸變的效果
漸變效果是漸變開始點，漸變結束點作為線性的漸變，也就是從點的開始到點的結束漸變。
中間在偏移多少的點，設置為中間顏色，這樣兩個顏色之間就會出現漸變的效果。如上面的圖，只有第一個點和第二個點，兩個點的顏色不相同，所以中間就會出現漸變的顏色。
在 win2d 漸變相對的是整個畫布的顏色，也就是設置漸變的開始點不是相對于使用漸變的元素，而是畫布的坐標。
請看圖，使用的漸變是從(100,10)到(1000,1000)，元素是從(300,100)開始畫，元素的寬度是 300 高度是 200 ，所以實際上元素使用的漸變不是從開始的漸變開始算，而是拿到漸變的對應元素所在顏色
使用 CanvasLinearGradientBrush 需要 CanvasGradientStop 做中間的顏色，表示在相對于第一個點到最后一個點的多少顏色。
如使用下面代碼，就是第一個點是白色，最后一個點是黑色。注意 Position 的范圍是 0-1 ，也就是 0 就是第一個點，而 1 就是最后一個點
var canvasGradientStop = new CanvasGradientStop[2];
canvasGradientStop[0] = new CanvasGradientStop
{
Position = 0,
Color = Colors.White
};
canvasGradientStop[1] = new CanvasGradientStop()
{
Position = 1,
Color = Colors.Black
};
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
創建 CanvasLinearGradientBrush 需要 CanvasResourceCreator ，建議使用 win2d 的畫板作為輸入。
private void CanvasControl_OnDraw(CanvasControl sender, CanvasDrawEventArgs args)
// 忽略代碼 var canvasGradientStop = new CanvasGradientStop[2];
canvasGradientStop[0] = new CanvasGradientStop
{
Position = 0,
Color = Colors.White
};
canvasGradientStop[1] = new CanvasGradientStop()
{
Position = 1,
Color = Colors.Black
}; var canvasLinearGradientBrush = new CanvasLinearGradientBrush(sender, canvasGradientStop)
{
StartPoint = new Vector2(0, 0),
EndPoint = new Vector2(0, 1000)
};
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
-
13
-
14
-
15
-
16
-
17
-
18
-
19
-
20
-
21
這里開始的點和結束的點都是相對于畫布的坐標，而不是相對于使用顏色的元素。
這時創建一個矩形使用顏色，先設置他的坐標是 200，200，在點擊按鈕的時候移動矩形，可以看到矩形在移動的時候顏色在變化
args.DrawingSession.FillRectangle(new Rect(X, Y, 300, 300), canvasLinearGradientBrush)
如果需要在元素內做元素漸變，就需要修改 CanvasLinearGradientBrush 的 StartPoint 和 EndPoint，讓 StartPoint 為元素的左上角加上的值。
也就是在原先的開始和最后的點都加上元素才可以進行元素的變化。
例如矩形是已知的，想要讓矩形從上到下是漸變，就可以使用下面代碼
var rect = new Rect(X, Y, 300, 300); var canvasLinearGradientBrush = new CanvasLinearGradientBrush(sender, canvasGradientStop)
{
StartPoint = new Vector2(X, Y),
EndPoint = new Vector2(X, (float) (Y+rect.Height))
};
args.DrawingSession.FillRectangle(rect, canvasLinearGradientBrush);
從上面代碼可以知道畫出來的漸變需要開始的點和結束的點都是從 rect 計算，這樣才可以做元素內的漸變
全部代碼
xaml
xmlns:win2d="using:Microsoft.Graphics.Canvas.UI.Xaml" 忽略的代碼
<win2d:CanvasControl Draw="CanvasControl_OnDraw"></
相信大家都可以創建一個 win2d 的控件，如果還不知道如何創建，請看win10 uwp win2d 入門 看這一篇就夠了
在后臺代碼
private void CanvasControl_OnDraw(CanvasControl sender, CanvasDrawEventArgs args)
{ var canvasGradientStop = new CanvasGradientStop[2];
canvasGradientStop[0] = new CanvasGradientStop()
{
Position = 0,
Color = Colors.White
};
canvasGradientStop[1] = new CanvasGradientStop()
{
Position = 1,
Color = Colors.Black
}; var rect = new Rect(X, Y, 300, 300); var canvasLinearGradientBrush = new CanvasLinearGradientBrush(sender, canvasGradientStop)
{
StartPoint = new Vector2(X, Y),
EndPoint = new Vector2(X, (float) (Y + rect.Height))
};
args.DrawingSession.FillRectangle(rect, canvasLinearGradientBrush);
} private float X { set; get; } = 200; private float Y { set; get; } = 200;
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
-
13
-
14
-
15
-
16
-
17
-
18
-
19
-
20
-
21
-
22
-
23
-
24
-
25
-
26
-
27
-
28
-
29
-
30
-
31
圓圈漸變
從上面的線條漸變可以知道使用的坐標都是畫布，在圓圈也是，下面給大家看一下圓圈做出來的圖片
使用這個顏色需要使用 CanvasRadialGradientBrush ，在創建的使用需要傳入 CanvasResourceCreator 因為在 win2d 控件的畫函數，所以使用下面代碼
var canvasRadialGradientBrush = new CanvasRadialGradientBrush(sender, canvasGradientStop);
這里的 canvasGradientStop 還是上面的 canvasGradientStop ，但是需要知道這里的 Position 對應的是從圓心到最外面。
var canvasGradientStop = new CanvasGradientStop[2];
canvasGradientStop[0] = new CanvasGradientStop
{
Position = 0,
Color = Color.FromArgb(255, 210, 200, 162)
};
canvasGradientStop[1] = new CanvasGradientStop()
{
Position = 1,
Color = Colors.Black
};
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
所以我設置了圓心為 #D2C8A2 顏色，把最外面寫為黑色，這樣就可以做出上面看到的顏色
在圓圈需要設置圓心所在的坐標，這個坐標就是相對畫布的，所以不是相對元素
為了讓矩形的中心設置的顏色，我需要修改代碼
var canvasRadialGradientBrush = new CanvasRadialGradientBrush(sender, canvasGradientStop)
{
Center = new Vector2((float) (rect.X + rect.Width / 2), (float) (rect.Y + rect.Height / 2)),
RadiusX = 300,
RadiusY = 300 };
本站文章版權歸原作者及原出處所有 。內容為作者個人觀點， 并不代表本站贊同其觀點和對其真實性負責，本站只提供參考并不構成任何投資及應用建議。本站是一個個人學習交流的平臺，網站上部分文章為轉載，并不用于任何商業目的，我們已經盡可能的對作者和來源進行了通告，但是能力有限或疏忽，造成漏登，請及時聯系我們，我們將根據著作權人的要求，立即更正或者刪除有關內容。本站擁有對此聲明的最終解釋權。
