今回はマウス操作で画像に
・四角を描画する方法
・四角で囲った画像を切り取り表示する方法
をご紹介したいと思います！
「ココナラ」でC#、OpenCvSharpを使った画像処理アプリの作成を行っています。
もし、作成依頼やお困りごとがあればお気軽にご相談ください！
前準備
Visual Studio 2019のインストール
下記にインストール方法をまとめたので参考にしてください。
OpenCvSharpのインストール
下記にインストール方法をまとめたので参考にしてください。前準備にインストール方法が記載してあります。
ソースコードと解説
処理内容
①画像読込み
②マウスドラッグによる四角の描画
③四角で囲った部分の画像を切り取り、表示
ソースコード
まずは全体のソースコードを載せていきます。
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;
using OpenCvSharp;
using OpenCvSharp.Extensions;
using System.IO;
namespace ImageProcessing
{
public partial class Form1 : Form
{
private Mat _resizeImage;
private bool _isDrawing;
private OpenCvSharp.Point _mouseDwonPoint;
private OpenCvSharp.Point _leftPoint;
private OpenCvSharp.Point _rightPoint;
private Rect _rect;
public Form1()
{
InitializeComponent();
}
private void button1_Click(object sender, EventArgs e)
{
//画像の読込み
var image = Cv2.ImRead(@"C:\Users\uchiy\Desktop\沖縄.jpeg");
_resizeImage = new Mat();
Cv2.Resize(image, _resizeImage, new OpenCvSharp.Size(640, 480));
pictureBox1.Image = BitmapConverter.ToBitmap(_resizeImage);
}
private void button2_Click(object sender, EventArgs e)
{
//画像を切り取る
var cutMat = _resizeImage.Clone(new Rect(_leftPoint.X, _leftPoint.Y, _rect.Width, _rect.Height));
pictureBox2.Image = BitmapConverter.ToBitmap(cutMat);
}
private void pictureBox1_MouseDown(object sender, MouseEventArgs e)
{
//左クリックじゃなければ処理をしない
if (e.Button != MouseButtons.Left)
{
return;
}
_isDrawing = true;
_mouseDwonPoint.X = e.X;
_mouseDwonPoint.Y = e.Y;
}
private void pictureBox1_MouseMove(object sender, MouseEventArgs e)
{
if (!_isDrawing)
{
return;
}
DrawRect(e.X, e.Y);
}
private void pictureBox1_MouseUp(object sender, MouseEventArgs e)
{
if (!_isDrawing)
{
return;
}
DrawRect(e.X, e.Y);
_isDrawing = false;
}
//矩形の描画
private void DrawRect(int x ,int y)
{
if(_mouseDwonPoint.X <= x)
{
_leftPoint.X = _mouseDwonPoint.X;
_rightPoint.X = x;
}
else
{
_leftPoint.X = x;
_rightPoint.X = _mouseDwonPoint.X;
}
if(_mouseDwonPoint.Y <= y)
{
_leftPoint.Y = _mouseDwonPoint.Y;
_rightPoint.Y = y;
}
else
{
_leftPoint.Y = y;
_rightPoint.Y = _mouseDwonPoint.Y;
}
_rect = new Rect(_leftPoint, new OpenCvSharp.Size(_rightPoint.X - _leftPoint.X, _rightPoint.Y - _leftPoint.Y));
var clone = _resizeImage.Clone();
Cv2.Rectangle(clone, _rect, Scalar.Red);
pictureBox1.Image = BitmapConverter.ToBitmap(clone);
}
}
}次に詳細の解説をしていきます。
マウスドラッグによる四角の描画
描画する際は、PictureBoxイベントを3つ使用します。
・MouseDown(マウスを押した際の情報)
・MouseMove(マウスが移動した際の情報)
・MouseUp(マウスを離した際の情報)
この3つを使って位置(座標)情報を取得し、四角の描画に活用します。
MouseDownで描画モードをおOnにし、スタート位置を決めます。
次にマウスが移動した際にリアルタイムで四角が描画(追従して表示)されるよう、
MouseMoveで位置情報を取得しつつ、描画メソッドに飛ばし、描画をさせ続けています。
四角が書き終わったらMouseUpにて描画モードをOffにします。
その時の四角を描画して残す形になります。
private void pictureBox1_MouseDown(object sender, MouseEventArgs e)
{
//左クリックじゃなければ処理をしない
if (e.Button != MouseButtons.Left)
{
return;
}
_isDrawing = true;
_mouseDwonPoint.X = e.X;
_mouseDwonPoint.Y = e.Y;
}
private void pictureBox1_MouseMove(object sender, MouseEventArgs e)
{
if (!_isDrawing)
{
return;
}
DrawRect(e.X, e.Y);
}
private void pictureBox1_MouseUp(object sender, MouseEventArgs e)
{
if (!_isDrawing)
{
return;
}
DrawRect(e.X, e.Y);
_isDrawing = false;
}
//矩形の描画
private void DrawRect(int x ,int y)
{
if(_mouseDwonPoint.X <= x)
{
_leftPoint.X = _mouseDwonPoint.X;
_rightPoint.X = x;
}
else
{
_leftPoint.X = x;
_rightPoint.X = _mouseDwonPoint.X;
}
if(_mouseDwonPoint.Y <= y)
{
_leftPoint.Y = _mouseDwonPoint.Y;
_rightPoint.Y = y;
}
else
{
_leftPoint.Y = y;
_rightPoint.Y = _mouseDwonPoint.Y;
}
_rect = new Rect(_leftPoint, new OpenCvSharp.Size(_rightPoint.X - _leftPoint.X, _rightPoint.Y - _leftPoint.Y));
var clone = _resizeImage.Clone();
Cv2.Rectangle(clone, _rect, Scalar.Red);
pictureBox1.Image = BitmapConverter.ToBitmap(clone);
}四角で囲った画像を切り取り表示する
Clone関数を使用し、複製する際に四角で囲った位置(座標)とサイズを指定することにより
四角で囲った部分のみの画像を作り出すことができます。
private void button2_Click(object sender, EventArgs e)
{
//画像を切り取る
var cutMat = _resizeImage.Clone(new Rect(_leftPoint.X, _leftPoint.Y, _rect.Width, _rect.Height));
pictureBox2.Image = BitmapConverter.ToBitmap(cutMat);
}まとめ
以上がマウスドラッグによる四角の描画と、囲った部分の画像を切り抜く方法となります。
今回は四角で囲った部分の切り抜きを行いましたが、
Webカメラを使って撮影をする際などに、四角で囲った位置情報を使って、その部分を常時監視するなどといったことも可能となります。
今後、そういったプログラムも載せていこうと思います。
最後までご覧いただきありがとうございました！
C#で画像処理を学ぶためのおススメの書籍
C#でOpenCvを扱う方法などを詳しく解説してくれています。
C#で画像処理を解説してくれている本がほとんどない中、こちらの書籍はいろいろなメソッドの使い方等を事例を交えて解説してくれているため、非常に参考になります。
私はこちらの書籍を参考に画像処理を実装しました。
是非参考にしてみてください。
C#の基本が学習したいという方におススメのスクール：侍エンジニア塾のエキスパートコース
