【C#,WPF】円を描画(マウスドラッグで中心と半径の指定)
WPFで円を描画するときは、CanvasクラスとEllipseクラスを使用します。
今回はそれらのクラスを使用し、マウスで画面に円を描く方法をまとめました。
サンプルコードと合わせて、描画の流れを解説していきたいと思います。
円の描画手順
まず、サンプルアプリケーションで行う描画の一連動作を載せておきます。
- 画面内の円を描画したい場所をクリックします。
- そのままマウスをドラッグすると、クリックした場所を中心に円が描画されます。
- 中心からのドラッグ距離により円半径が変わるので、描画したいサイズでマウスを離します。
- マウスドロップにより円の描画が確定となり、画面に円が描画されたままになります。
- 再びマウスをクリックすると、新しい円の描画が開始されます。
これらの手順を踏まえて、次に紹介するサンプルをご覧ください。
円を描画するサンプルプロジェクト
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のクリア)する機能を入れたりもできます。
そのあたりを調整し、様々な円を描画してみるのも面白いと思います。
コメントを残す