【C#,WPF】円を描画(マウスドラッグで中心と半径の指定)

WPFで円を描画するときは、CanvasクラスとEllipseクラスを使用します。
今回はそれらのクラスを使用し、マウスで画面に円を描く方法をまとめました。
サンプルコードと合わせて、描画の流れを解説していきたいと思います。

円の描画手順

まず、サンプルアプリケーションで行う描画の一連動作を載せておきます。

  1. 画面内の円を描画したい場所をクリックします。
  2. そのままマウスをドラッグすると、クリックした場所を中心に円が描画されます。
  3. 中心からのドラッグ距離により円半径が変わるので、描画したいサイズでマウスを離します。
  4. マウスドロップにより円の描画が確定となり、画面に円が描画されたままになります。
  5. 再びマウスをクリックすると、新しい円の描画が開始されます。

これらの手順を踏まえて、次に紹介するサンプルをご覧ください。

円を描画するサンプルプロジェクト

GitHubに今回のサンプルプロジェクト一式をアップロードしています。
GitHub – Kuwayoshi/DrawEllipse
ソースコードを記事に載せると長くなってしまうので、上記ページからサンプルをダウンロードし、各ファイルのソースコードをご覧ください。

サンプルのソースコード解説

まずはサンプルの「MainWindow.xaml」から見ていきます。
XAML側では、円描画用のCanvasクラス「ellipseCanvas」を作成し、ウィンドウのマウスイベント「MouseLeftButtonDown, MouseMove, MouseLeftButtonUp」を追加しています。
「ellipseCanvas」のHeightとWidthはAutoのため、ウィンドウと同じ大きさになります。

次にサンプルの「MainWindow.xaml.cs」を見ます。
画面のクリック時に「StartDrawing」が呼ばれ、クリック座標を円の中心として保持しています。
その後のマウスドラッグ時は「UpdateDrawing」が呼ばれ、画面の円を更新しています。
更新処理では、中心座標と更新時マウス座標から、円の配置位置とサイズを計算し、Ellipseクラスによる描画を行います。
最後に、マウスを離したときは「EndDrawing」が呼ばれ、円描画の終了処理をしています。

まとめ:円の描画にはCanvasクラスやEllipseクラスを使う

マウスを使って円を描画する方法をまとめました。
今回は触れませんでしたが、Ellipseクラスでは描画の色や線の太さが設定可能です。
また描いた円を削除(Canvasのクリア)する機能を入れたりもできます。
そのあたりを調整し、様々な円を描画してみるのも面白いと思います。

Share

  • Twitter Shareボタン
  • Facebook Shareボタン
  • はてなブックマーク Shareボタン
  • LINE Shareボタン

コメントを残す

入力エリアすべてが必須項目です。メールアドレスが公開されることはありません。

内容をご確認の上、送信してください。