win2d 通過 CanvasActiveLayer 畫出透明度和裁剪
本文告訴大家如果在 UWP 的 win2d 通過 CanvasActiveLayer 建立一層，在這裡畫出的圖片有透明度或者裁剪
在 win2d 如果需要對某個元素裁剪，可以使用很多方法，本文只是告訴大家使用圖層的方法裁剪。如果熟悉 WPF 那麼對於這個裁剪將會比較簡單，當然沒有接觸過 WPF 的小夥伴也可以繼續看，如果有發現不懂的，歡迎在評論噴
首先建立一個 win2d 的控制元件，如何安裝 win2d 請看 win10 uwp win2d 入門 看這一篇就夠了
<xaml:CanvasVirtualControl x:Name="Canvas" RegionsInvalidated="Canvas_OnRegionsInvalidated"></xaml:CanvasVirtualControl>
本文建立的是 CanvasVirtualControl 關於這個控制元件請看 win10 uwp win2d CanvasVirtualControl 與 CanvasAnimatedControl
在後臺程式碼建立 Canvas_OnRegionsInvalidated 方法，然後就是開始本文的例子
private void Canvas_OnRegionsInvalidated(CanvasVirtualControl sender, CanvasRegionsInvalidatedEventArgs args)
{
}
在這個方法裡面建立一個矩形，然後畫出來
private void Canvas_OnRegionsInvalidated(CanvasVirtualControl sender, CanvasRegionsInvalidatedEventArgs args)
{
var rectangle = CanvasGeometry.CreateRectangle(sender, 10, 10, 100, 100);
using (var ds = sender.CreateDrawingSession(args.VisibleRegion))
{
ds.FillGeometry(rectangle, Color.FromArgb(128, 0, 0, 255));
}
}
現在執行程式碼可以看到顯示一個矩形，如果現在程式碼無法執行，那麼怎麼沒開光
然後再建立一個橢圓，畫出橢圓
private void Canvas_OnRegionsInvalidated(CanvasVirtualControl sender, CanvasRegionsInvalidatedEventArgs args)
{
var ellipse = CanvasGeometry.CreateEllipse(sender, 100, 100, 50, 50);
var rectangle = CanvasGeometry.CreateRectangle(sender, 10, 10, 100, 100);
using (var ds = sender.CreateDrawingSession(args.VisibleRegion))
{
ds.FillGeometry(ellipse, Colors.Black);
}
}
執行程式碼可以看到介面有一個橢圓
下面告訴大家如何使用 CanvasActiveLayer 的方法
建立 CanvasActiveLayer 方法
在 Canvas_OnRegionsInvalidated 方法可以通過 CreateDrawingSession 建立 CanvasDrawingSession 方法
在 CanvasDrawingSession 有 CreateLayer 方法，這裡面有很多過載，下面將會通過修改透明度的方法告訴大家如何使用 CanvasActiveLayer 方法
在 CreateLayer 拿到的返回值進行 using 在裡面寫的程式碼將會被新增到這一個 Layer 在外面寫的程式碼將不會新增到 Layer 裡面
using (var canvasActiveLayer = ds.CreateLayer(引數))
{
// 這裡面寫的程式碼會在這個 Layer 裡面
}
// 在外面寫的程式碼不會新增到這個 layer 裡面
透明度
首先建立 CanvasActiveLayer 方法
private void Canvas_OnRegionsInvalidated(CanvasVirtualControl sender, CanvasRegionsInvalidatedEventArgs args)
{
var ellipse = CanvasGeometry.CreateEllipse(sender, 100, 100, 100, 100);
var rectangle = CanvasGeometry.CreateRectangle(sender, 10, 10, 100, 100);
using (var ds = sender.CreateDrawingSession(args.VisibleRegion))
{
using (var canvasActiveLayer = ds.CreateLayer(0.6f))
{
// 在這裡寫的程式碼會新增 0.6 透明
}
// 在這裡寫的程式碼是普通的
}
}
這裡的 CreateLayer 有很多過載，現在使用的是一個傳入透明度的方法，這裡的透明度使用 [0,1] 的範圍
在 using 裡面畫出的內容就會加上了這裡設定的值，如我需要畫出 0.6 的圓形
using (var canvasActiveLayer = ds.CreateLayer(0.6f))
{
ds.FillGeometry(ellipse, Colors.Black);
}
從程式碼可以看到 CreateLayer 的設計是建立一個簡單的方法，在這個方法裡面可以快速設定畫出的介面，同時在這個方法外面將會和之前一樣
透明度圖片
除了直接設定透明度的值，還可以設定透明度的 Brush 方法，最簡單的是設定純色的 Brush 請看程式碼
using (var canvasActiveLayer = ds.CreateLayer(new CanvasSolidColorBrush(sender,Colors.Chocolate)))
{
ds.FillGeometry(ellipse, Colors.Black);
}
現在執行程式碼可以看到和之前沒有什麼不同的，因為這個透明度是不管使用什麼的 Brush 有用的是顏色的透明一個值
如我使用 Colors.Chocolate 和使用黑色是一樣的，但是如果我修改了透明如下面的程式碼
現在執行程式碼可以看到圓形是半透明的
在這裡使用純色的圖片是沒有什麼用的，因為無論什麼的顏色都是使用顏色的一個值，所以純色和直接設定透明的是一樣的，但是 Brush 可以是其他圖片或者漸變，請看程式碼
var canvasGradientStopList = new CanvasGradientStop[]
{
new CanvasGradientStop()
{
Color = Color.FromArgb(0, 0, 0, 0),
Position = 0
},
new CanvasGradientStop()
{
Color = Color.FromArgb(255, 0, 0, 0),
Position = 1
},
};
var canvasLinearGradientBrush =
new CanvasLinearGradientBrush(sender, canvasGradientStopList)
{
StartPoint = new Vector2(0, 60),
EndPoint = new Vector2(100, 60)
};
using (ds.CreateLayer(canvasLinearGradientBrush))
{
ds.FillGeometry(ellipse, Colors.Black);
}
上面使用了漸變顏色，更多關於漸變請看 win2d 漸變顏色
如果有一些圖片作為 Brush 也是可以，這裡就不在繼續說了
裁剪
除了設定透明度，還可以設定裁剪，為什麼剛才可以設定純色就是在這裡用到的，雖然純色只是使用透明但是可以在裁剪的時候，方便只是進行裁剪的方法。在只是進行裁剪的時候只需要傳入一個純色的 Brush 就可以。
最簡單的裁剪是矩形裁剪，剛才都是畫出一個圓，那麼對這個圓進行矩形裁剪
現在執行程式碼可以看到介面是一個矩形
但是如果只能進行矩形裁剪，那麼會覺得win2d不夠好用，除了矩形，還可以使用任何的 Geometry 裁剪，請看程式碼
var ellipse = CanvasGeometry.CreateEllipse(sender, 100, 100, 50, 50);
var rectangle = CanvasGeometry.CreateRectangle(sender, 10, 10, 100, 100);
using (CanvasDrawingSession ds = sender.CreateDrawingSession(args.VisibleRegion))
{
var canvasGradientStopList = new CanvasGradientStop[]
{
new CanvasGradientStop()
{
Color = Color.FromArgb(0, 0, 0, 0),
Position = 0
},
new CanvasGradientStop()
{
Color = Color.FromArgb(255, 0, 0, 0),
Position = 1
},
};
var canvasLinearGradientBrush =
new CanvasLinearGradientBrush(sender, canvasGradientStopList)
{
StartPoint = new Vector2(0, 60),
EndPoint = new Vector2(100, 60)
};
using (ds.CreateLayer(canvasLinearGradientBrush, rectangle))
{
ds.FillGeometry(ellipse, Colors.Black);
}
}
執行一下發現漸變的圓被矩形裁剪，這裡傳入的是矩形實際可以按照自己需要傳入任意的 Geometry 做出好看介面
關於如何做出一個 Geometry 和更多部落格請看
win2d 毛玻璃：win10 uwp 毛玻璃