Apply image effect using Win2D
First, there is an official document of Win2D here. And the source code & example are hosted here.
For the fact that the example code are too much and maybe you can't find a good way to start. Now I show an simple example to apply a blur effect using Win2D.
XAML
Add the declaration below:
xmlns:canvas="using:Microsoft.Graphics.Canvas.UI.Xaml"
And then add the code below to anywhere you want it to be:
<canvas:CanvasControl x:Name="canvas" Margin="5"
Draw="Canvas_Draw"
CreateResources="Canvas_CreateResources"
/>
We use CanvasControl
, which provided by Win2D , to draw something like Text
,Image
or Shape
. The CreateResources
event is fired before Draw
is called.
The XAML part is quite simple.
Code behind
Yes, you have to do it in your code-behind.
Fist add some fields:
CanvasBitmap bitmapTiger;
ICanvasImage effect;
private void Canvas_CreateResources(CanvasControl sender, CanvasCreateResourcesEventArgs args)
{
args.TrackAsyncAction(Canvas_CreateResourcesAsync(sender).AsAsyncAction());
}
private async Task Canvas_CreateResourcesAsync(CanvasControl sender)
{
bitmapTiger = await CanvasBitmap.LoadAsync(sender, new Uri("ms-appx:///Assets/0.jpg"));
effect = CreateGaussianBlur();
}
private ICanvasImage CreateGaussianBlur()
{
var blurEffect = new GaussianBlurEffect
{
Source = bitmapTiger,
BorderMode = EffectBorderMode.Hard,
BlurAmount = 100,
};
return blurEffect;
}
The code above is showing what to do about Creating Resources: First Load an image from a Uri and then create a GaussianBlurEffect which has a hard border and the amount of it is 100.
Then it's time to draw this image using GaussianBlurEffect:
private void Canvas_Draw(CanvasControl sender, CanvasDrawEventArgs args)
{
var size = sender.Size;
var ds = args.DrawingSession;
ds.DrawImage(effect, new Rect(0,0,size.Width,size.Height),new Rect(0,0,1000,625));
}
This code ds.DrawImage(effect, new Rect(0,0,size.Width,size.Height),new Rect(0,0,1000,625));
shows applying the effect I created before and the destination rect is as large as the size of CanvasControl
. The third param is the rect of source image.
The DrawImage
method has plenty of Overloads and you should check these out in the official doc.
Subscribe to JuniperPhoton's Blog
Get the latest posts delivered right to your inbox