【C#,WPF】長方形の描画（マウスドラッグで四角を作成）
WPFでの長方形描画は、CanvasクラスとRectangleクラスを利用します。
今回はそれらのクラスを使い、マウスで長方形を描けるサンプルを作成しました。
以降で紹介するサンプルと合わせて、描画の流れを解説していきます。
長方形を描画するサンプルの動作概要
今回のサンプルアプリでは、以下の操作手順で長方形を描画します。
- 画面内の長方形を描画したい場所をクリックします。
- そのままマウスをドラッグすると、長方形の描画が開始されます。
- クリックした位置からドラッグした距離により長方形のサイズが変わるので、描画したい大きさでマウスを離します。
- マウスドロップにより描画が確定となり、画面に長方形が描画されたままになります。
- 再びマウスをクリックすると、新しい長方形の描画が開始されます。
上記の動作内容を踏まえ、次からサンプルプロジェクトを見ていきます。
サンプルプロジェクト
GitHubにサンプルコードのプロジェクト一式をアップロードしています。
GitHub – Kuwayoshi/DrawRectangle
記事にソースコードを載せると長くなってしまうので、上記でサンプルをダウンロードし、各コードをご覧ください。
ソースコード解説
まずはサンプルの「MainWindow.xaml」から見ていきます。
XAML側では、長方形描画用のCanvasクラス「drawCanvas」を作成し、マウスイベント「MouseDown, MouseMove, MouseUp」を追加しています。
次にサンプルの「MainWindow.xaml.cs」についてです。
画面のクリック時にマウス座標を保持し、Rectangleクラスによる描画を開始します。
上記のマウスクリックで描画開始がされていた場合は、マウスドラッグ時にクリック開始時の座標とドラッグ後の座標から長方形のサイズを計算し、Rectangleクラスの描画更新を行います。
最後に、マウスを離したときは描画の完了処理をしています。
まとめ：長方形の描画にはCanvasクラスやRectangleクラスを使う
マウスを使って長方形を描画する方法をまとめました。
今回はRectangleクラスによる四角を描きましたが、以前に円を描画する記事も紹介しています。
WPFで円を描画するときは、CanvasクラスとEllipseクラスを使用します。今回はそれらのクラスを使用し、マウスで画面に円を描く方法をまとめました。サンプルコードと合わせて
これら描画クラスの組み合わせで、色々な図形が作れて楽しいので、是非試してみてください。
Share
Kuwayoshi
- Follow me!
@Kuwayoshi28
Kuwayoshi
コメントを残す