Win2D その5 画像読み込みとエフェクト

エフェクト処理

Win2Dでは組み込みのエフェクトがあり、例えば、ぼかし、エッジ処理、エンボス加工などを簡単に行うためことができるようになってます。
今回はガウシアンブラーの組み込みエフェクトを使って選択した範囲にぼかしを加える処理を行っていきます。

準備

xamlに以下を追加します。

<canvas:CanvasControl
    x:Name="canvas"
+   CreateResources="Canvas_CreateResources"
    Draw="Canvas_Draw"
    PointerMoved="Canvas_PointerMoved"
    PointerPressed="Canvas_PointerPressed"
    PointerReleased="Canvas_PointerReleased"
    />

画像を読み込む際CreateResourcesイベントから読み込むため追加します。

画像取り込み

ぼかすための元となる画像を取り込む処理です。
MainWindow.xaml.csに記述していきます。

 // 元となるBitMapのフィールド
 CanvasBitmap bitmap;
 
 // xamlで指定したイベントCreateResourcesから呼び出す
 private void Canvas_CreateResources(CanvasControl sender, CanvasCreateResourcesEventArgs args)
 {
     // 非同期処理で下の処理を呼び出すようにラップしている
     args.TrackAsyncAction(CanvasCreateResourceAsync(sender).AsAsyncAction());
 }

 // 画像をファイルから読み込むので非同期処理
 async Task CanvasCreateResourceAsync(CanvasControl sender)
 {
    // Windows.ApplicationModel.Package.Current.InstalledPathでこのプロジェクトのパスを取得し、Asset内のファイルを呼び出している
    bitmap = await CanvasBitmap.LoadAsync(sender, Windows.ApplicationModel.Package.Current.InstalledPath + "/Assets/microsoft365_vision.jpg");
 }

BitmapはCanvasBitmapクラスで保持します。これはWin2D用のBitmapを扱うクラスです。
xamlに登録されたCreateResourcesイベントからLoadAsyncでBitmapを非同期で取得しています。
プロジェクトのパスの取得はWinUI3のお約束的なものとなります。
※画像のプロパティで「出力ディレクトリにコピー」を「常にコピー」または「新しい場合はコピー」に変更しておくこと

ガウシアンブラーエフェクト

ガウシアンブラーは以下のような形で簡単に追加できます。

// ブラーされた画像を保持する
ICanvasImage effectImage;

// 描画する際、この関数を呼び出すこととする。
private void CreateEffect()
{
    effectImage = CreateGaussianBlur();
}

// ガウシアンブラーされたイメージを作成する。
private ICanvasImage CreateGaussianBlur()
{
    // マウスのドラッグからブラーする範囲を取得
    var rect = new Rect(pointerDrag.StartLocation, pointerDrag.CurrentLocation);
    // 組み込みのブラーエフェクトクラス
    var blurEffect = new GaussianBlurEffect
    {
        // Sourceには元となる画像を入れる。
        // 指定した範囲をクロップすることで選択した範囲のみがブラーされることとする
        Source = new CropEffect
        {
            // 元のBitmap
            Source = bitmap,
            // クロップする範囲
            SourceRectangle = rect,
        }
        // ブラーの強さ
        BlurAmount = 5.0f
    };

    return blurEffect;
}

マウスのドラッグを離したときにブラーする範囲が確定されるので、その時にCreateEffect()を呼び出せば、範囲が指定されたぼかし画像を作成できます。

 private void Canvas_PointerReleased(object sender, Microsoft.UI.Xaml.Input.PointerRoutedEventArgs e)
 {
     if (mouseDown == false)
         return;
+    CreateEffect();
     mouseDown = false;
     canvas.Invalidate();
 }

描画処理

描画処理は以下になります。

 private void Canvas_Draw(CanvasControl sender, CanvasDrawEventArgs args)
 {
     var ds = args.DrawingSession;
     // 元のBitmapを描画
     ds.DrawImage(bitmap);
     if (effectImage != null)
     {
         // その上に範囲指定されたブラー画像が上書きされるイメージ
         ds.DrawImage(effectImage);
     }     
 }

描画は元の画像を表示した上にクロップしたブラー画像を重ねるイメージになっています。
これで気に入らないやつの顔をぼかしまくってください。

その他エフェクト

Win2Dにはぼかし以外に様々なエフェクトを組み込んでいます。
以下のページを参考にしていろいろなエフェクトを試してみてください。
Win2Dエフェクト