【WPF】Imageに画像を表示して、画像の拡大縮小を行う

完全版を表示する

皆さんこんにちはこんばんは、まずここブログを運営してます「よーす」です。

 

前回【WPF】を使ってImageに画像を表示させ、座標を取るところまでの処理を作ったので

今日は表示させている画像の拡大・縮小を行いと思います。

使う言語は、C#です。

 

今回のコードは完成形ではなく、とりあえず動くものになります。

開発環境

開発環境

  • Windows 10
  • Visual Studio 2019
  • WPF（Windows Presentation Foundation）
  • 言語：C#

 

ボタンを押して画像を拡大する

マウスホイールでの拡大も考えていたんですが、

まずは、シンプルな機能を実装しましょう。

private void ZoomINBtn_Click(object sender, RoutedEventArgs e)
{
            var scale = 1.0;
　　　　　　　// mainImageBoxというのがImageコントロールになります。
            Matrix matrix = ((MatrixTransform)mainImageBox.RenderTransform).Matrix;

            // 拡大倍率25％
            scale = 1.25;

            // 拡大実施
            // 100は拡大する座標（ｘ、ｙ）の中心点になるので自由に値を変更してください。
            matrix.ScaleAt(scale, scale, 100, 100);
　　　　　　// 拡大実行
            mainImageBox.RenderTransform = new MatrixTransform(matrix);
}

ただ拡大するだけだったので、そんなに難しくないですね。

 

ボタンを押して画像を縮小する

こちらもシンプルに実装しましょう。

private void ZoomOutBtn_Click(object sender, RoutedEventArgs e)
{
            var scale = 1.0;
　　　　　　　// mainImageBoxというのがImageコントロールになります。
            Matrix matrix = ((MatrixTransform)mainImageBox.RenderTransform).Matrix;

            // 拡大倍率 -25％
            scale = 1 / 1.25;

            // 拡大実施
            // 100は拡大する座標（ｘ、ｙ）の中心点になるので自由に値を変更してください。
            matrix.ScaleAt(scale, scale, 100, 100);
　　　　　　// 拡大実行
            mainImageBox.RenderTransform = new MatrixTransform(matrix);
}

縮小は簡単、scaleの値を「1.25」から「1/1.25」に変更するだけ。

 

マウスホイールを回して画像を拡大縮小する

基本は、ボタンを押しての拡大縮小と同じ。

上の機能を少しまとめて、MouseWheelイベントにコーディングするだけ。

 

// mainImageBoxはImageコントロール
private void mainImageBox_MouseWheel(object sender, MouseWheelEventArgs e)
{
            var scale = 1.0;
　　　　　　　// mainImageBoxというのがImageコントロールになります。
            Matrix matrix = ((MatrixTransform)mainImageBox.RenderTransform).Matrix;

            // ホイール上に回す→拡大 / 下に回す→縮小
　　　　　　　if (e.Delta > 0) scale = 1.25;
　　　　　　　else scale = 1 / 1.25;

            // 拡大実施
            // 100は拡大する座標（ｘ、ｙ）の中心点になるので自由に値を変更してください。
            matrix.ScaleAt(scale, scale, 100, 100);
　　　　　　// 拡大実行
            mainImageBox.RenderTransform = new MatrixTransform(matrix);
}

加えたのは、

ポイント

if (e.Delta > 0) scale = 1.25;
else scale = 1 / 1.25;

この２行だけでマウスホイールでの拡大縮小ができます。

 

まとめ

あとは、マウスの位置をしっかり取得して

現在のマウスの位置を拡大するように改良すれば拡大縮小は完了ですかね。

 

最後まで読んで頂きありがとうございました。

 

前回の記事「【WPF】画像（Imageコントロール）上でクリックした座標を取得する方法について」で

画像の表示の仕方も記載しております。

https://mazuwakokokara.com/wpf-click-point-image/

  • B!