【C#】PictureBoxでお絵かきしよう
前回、前々回に引き続いてPictureBoxについて学んでいきたいと思います。
heych.hatenablog.com
heych.hatenablog.com
プロジェクトの準備
そろそろ慣れてきたと思うので、プロジェクトの準備画像は省略して画像1個だけにします。
Form1にPictureBoxを配置し、AnchorプロパティをTop,Bottom,Left,Rightにしただけです。
プロジェクトのリソースに画像を追加し、PictureBoxに描画
まだリソースを使ったことがなかったので、紹介がてらやってみようと思います。
- ソリューションを右クリックしてプロパティを選択
- リソースを選択して、メニューからイメージを選択
- リソースの追加メニューから、既存のファイルの追加を選択
- Form1をダブルクリックしてコードを記述
Graphics gra; private void Form1_Load(object sender, EventArgs e) { pictureBox1.Image = new Bitmap(pictureBox1.Width, pictureBox1.Height); gra = Graphics.FromImage(pictureBox1.Image); gra.DrawImage(Properties.Resources.Sample, new Point(0, 0)); }
線や図形を描画してみよう
Graphics gra; Font f = new Font("MS UI Gothic", 12.0f); Pen p = new Pen(Brushes.Red); private void Form1_Load(object sender, EventArgs e) { pictureBox1.Image = new Bitmap(pictureBox1.Width, pictureBox1.Height); gra = Graphics.FromImage(pictureBox1.Image); //画像の描画 gra.DrawImage(Properties.Resources.Sample, new Point(0, 0)); //線の描画 gra.DrawLine(p, new Point(0, 0), new Point(100, 100)); //文字列の描画 gra.DrawString("テキストです", f, Brushes.Aqua, new PointF(50.0f, 0.0f)); //楕円の描画 gra.DrawEllipse(p, new RectangleF(50.0f, 50.0f, 100.0f, 50.0f)); //四角形の描画 gra.FillRectangle(Brushes.Gray, new Rectangle(10, 100, 30, 50)); }
マウスで自由に描画する
- PictureBoxにイベントを追加する
- コードを記述
Graphics gra; Pen p = new Pen(Brushes.Red); bool drag = false; int startX, startY; private void Form1_Load(object sender, EventArgs e) { pictureBox1.Image = new Bitmap(pictureBox1.Width, pictureBox1.Height); gra = Graphics.FromImage(pictureBox1.Image); } private void pictureBox1_MouseDown(object sender, MouseEventArgs e) { drag = true; startX = e.X; startY = e.Y; } private void pictureBox1_MouseUp(object sender, MouseEventArgs e) { drag = false; } private void pictureBox1_MouseMove(object sender, MouseEventArgs e) { if (!drag) return; gra.DrawLine(p, new Point(startX, startY), new Point(e.X, e.Y)); pictureBox1.Refresh(); startX = e.X; startY = e.Y; }