Comme nous l'avons vu précédemment, Win2D est un projet de Microsoft pour bénéficier du rendu hardware de nos cartes graphiques.

Pour l'instant, c'est un projet à l'état "alpha", voir moins ;-) et il n'existe donc que peu d'exemple de son utilisation.

Ici, j'ai voulu simplement afficher une image.

CanvasControl

Win2D propose un nouveau contrôle, le CanvasControl pour effectuer le rendu (il est possible de faire autrement, mais c'est déconseillé pour l'instant).

Donc dans notre projet Universal App, dans le projet pour Windows 8, dans la page principale, je vais donc ajouter ce contrôle :

<Grid Background="Black">
    <canvas:canvascontrol x:name="Cv" >
<Grid/>

Comme dans l'exemple proposé dans le "SDK", pour dessiner sur cette surface, il suffit de le faire dans l'évènement Draw. En revanche, pour dessiner une image, on a besoin d'un ICanvasImage.

ICanvasImage

Pour l'instant, nous n'avons que 2 classes qui implémentent cette interface :

• CanvasImage pour une simple image Bitmap,
• GaussianBlurEffect pour une image avec un effet de flou Gaussien.

Pour créer une CanvasImage, nous allons la charger dans l'évènement de création des ressources de notre contrôle :

<Grid Background="Black">
    <canvas:canvascontrol x:name="Cv" Draw="OnDraw" CreateResources="OnCreateResources">
<Grid/>

private CanvasBitmap _canvasBitmap;
private async void OnCreateResources(CanvasControl sender, object args)
{
    _canvasBitmap = await CanvasBitmap.LoadAsync(Cv, "Assets/ferrari.jpg");
    Cv.Invalidate();
}

 Et maintenant, pour dessiner notre superbe Ferrari :

private void OnDraw(CanvasControl sender, CanvasDrawEventArgs args)
{
    args.DrawingSession.Clear(Colors.CornflowerBlue);

    if (_canvasBitmap != null)
    {
        args.DrawingSession.DrawImage(_canvasBitmap, 0, 0);
    }
    args.DrawingSession.DrawText("Ferrari", 100, 100, Colors.White);
}

Il ne nous reste plus maintenant que d'ajouter un petit effet de flou :

private void OnDraw(CanvasControl sender, CanvasDrawEventArgs args)
{
    args.DrawingSession.Clear(Colors.CornflowerBlue);

    if (_canvasBitmap != null)
    {
        args.DrawingSession.DrawImage(_canvasBitmap, 0, 0);

        using (var blurEffect = new GaussianBlurEffect
        {
              Source = _canvasBitmap,
              Optimization = EffectOptimization.Quality,
              StandardDeviation = 5f
       })
       {
           args.DrawingSession.DrawImage(blurEffect, 0, 338);
       }
       args.DrawingSession.DrawText("Ferrari floue", 100, 438, Colors.White);
   }
   args.DrawingSession.DrawText("Ferrari", 100, 100, Colors.White);
}