visualstudioを用いたc#においての矩形の移動について

Question

###前提・実現したいこと

マウスで選択した箇所のみの矩形の移動

###発生している問題・エラーメッセージ

マウスを矩形の上に乗せると色が変わる仕様にしたのですが
その色が変わった部分の移動方法が分かりません。

###該当のソースコード

【Form.cs】

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;

namespace test20form02
{
    public partial class Form1 : Form
    {
        /// <summary>
        /// コンストラクター
        /// </summary>
        public Form1()
        {
            InitializeComponent();
            this.pen = new Pen(Color.Blue);
            this.spen = new Pen(Color.Red);
            this.recIter = new RecObjIterator();
        }

        //ペンオブジェクト
        Pen spen;
        Pen pen;

        //矩形オブジェクトのイテレータ(集合・グループ）クラス
        private RecObjIterator recIter;

        /// <summary>
        /// フォームイベントハンドラー
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void Form1_Load(object sender, EventArgs e)
        {
            //矩形オブジェクトを100個生成する
            this.recIter.init(100);
           
        }

        /// <summary>
        /// ボタンクリックイベントハンドラー
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void button1_Click(object sender, EventArgs e)
        {
            this.Close();
        }

        /// <summary>/
        /// ピクチャーボックス ペイントイベントハンドラー
        /// 矩形を表示する
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void pictureBox1_Paint(object sender, PaintEventArgs e)
        {
            //矩形を表示する
            this.recIter.Draw(e.Graphics, this.spen, this.pen);
        }

        /// <summary>
        /// ピクチャーボックス マウスムーブイベントハンドラー
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void pictureBox1_MouseMove(object sender, MouseEventArgs e)
        {
            //マウス座標を取得
            var mymouse = new Point(e.X, e.Y);
            //全矩形の選択状態を解除
            this.recIter.UnSelectObj();

            //マウス座標で矩形を選択する
            this.recIter.SelectByMouse(mymouse);

            //ピクチャーボックスの再表示を依頼する
            this.pictureBox1.Invalidate();
        }


    }//class
}//namespace


【RecObj.cs】

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Drawing;

namespace test20form02
{
    /// <summary>
    /// 矩形オブジェクトの管理クラス
    /// </summary>
    class RecObj
    {
        /// <summary>
        /// プロパティ
        /// 矩形オブジェクト
        /// </summary>
        public Rectangle Rec
        {
            set { this.rec = value; }
            get { return this.rec; }

        }

        /// <summary>
        /// プロパティ
        /// 選択されているかどうか
        /// </summary>
        public bool isSelect
        {
            set { this.isselect = value; }
            get { return this.isselect; }
        }
        /// <summary>
        /// コンストラクター
        /// </summary>
        public RecObj()
        {
            this.isselect = false;
            this.rec = new Rectangle();
        }

        //選択されているかどうか
        private bool isselect;
        //矩形オブジェクト
        private Rectangle rec;

        /// <summary>
        /// 選択フラグに設定する 
        /// </summary>
        public void SetisSelect(bool flg)
        {
            this.isselect = flg;
        }

        /// <summary>
        /// オブジェクトの移動 座標の書き換え
        /// </summary>
        /// <param name="from">前のマウス座標</param>
        /// <param name="to">今のマウス座標</param>
        public void Move(Point from, Point to)
        {
            var x = to.X - from.X;
            var y = to.Y - from.Y;

            rec.X = rec.X + x;
            rec.Y = rec.Y + y;
        }

        /// <summary>
        /// 指定されたグラフィックオブジェクトに矩形を描画する
        /// </summary>
        public void Draw(Graphics gra, Pen pen, Pen pen2)
        {
            Pen mypen = null;
            if (this.isSelect)
            {
                mypen = pen;
            }
            else
            {
                mypen = pen2;
            }
            gra.DrawRectangle(mypen, this.rec);
        }
    }
}


【RecObjIterator.cs】

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Drawing;

namespace test20form02
{
    /// <summary>
    /// 矩形オブジェクトの集合を処理するクラス
    /// </summary>
    class RecObjIterator
    {
        /// <summary>
        /// プロパティ
        /// 矩形オブジェクトリストを参照
        /// </summary>
        public List<RecObj> Recs
        { 
            get { return this.recs; }
        }

        /// <summary>
        /// コンストラクター
        /// </summary>
        public RecObjIterator()
        {
            this.recs = new List<RecObj>();
        }

        //矩形オブジェクトのグループ
        private List<RecObj> recs;


        /// <summary>
        /// 矩形オブジェクトを生成する
        /// </summary>
        /// <param name="num"></param>
        public void init(int num)
        {
            for (int i = 0; i < num; i++)
            {
                var myrec = new RecObj();
                myrec.Rec = new Rectangle(10 + (i * 2), 10 + (i * 2), 100, 100);
                this.recs.Add(myrec);
            }
        }

        /// <summary>
        /// 矩形オブジェクトを追加する
        /// </summary>
        /// <param name="rec"></param>
        public void Add(RecObj rec)
        {
            this.recs.Add(rec);
        }

        /// <summary>
        /// 矩形オブジェクトのリストの選択状態を解除
        /// </summary>
        public void UnSelectObj()
        {
            foreach (var myobj in this.recs)
            {
                myobj.isSelect = false;
            }
        }

        /// <summary>
        /// マウス座標で矩形オブジェクトのリストを選択
        /// </summary>
        /// <param name="mouse"></param>
        public void SelectByMouse(Point mouse)
        {
            foreach (var myobj in this.recs)
            {
                if (myobj.Rec.Contains(mouse) == true)
                {
                    myobj.isSelect = true;
                }
            }

        }

        /// <summary>
        /// 指定されたグラフィック（キャンバス）に指定のペンで矩形を表示する
        /// </summary>
        /// <param name="gra"></param>
        /// <param name="pen"></param>
        /// <param name="pen2"></param>
        public void Draw(Graphics gra, Pen pen, Pen pen2)
        {
            foreach (var myobj in this.recs)
            {
                myobj.Draw(gra, pen, pen2);
            }
        }
    }
}

###補足情報(言語/FW/ツール等のバージョンなど)
visualstudio2013

Comments

[Zuishin]

どのように移動させるんですか？ 色が変わった瞬間にランダムに動くのですか？

[退会済みユーザー]

矩形の上にマウスポインタを乗せるとマウスポインタが乗っている箇所が赤色に変化するのですが、その赤色に変化した箇所のみを好きな座標へ移動させたいと考えております.

[ozwk]

赤色の部分を好きな座標にどうやって移動させたいんですか?マウスドラッグ?予め座標何処かに書いておいてクリックした瞬間ワープ?

[退会済みユーザー]

ozwkさん 矩形の上にマウスポインタを合わせて赤色に変化した箇所をmousedownしているあいだピクチャーボックス内で好きな個所に移動させて、mouseupで好きな個所に置きたいです。座標はあらかじめ指定するわけではなく置きたい箇所に置けるようにしたいです。よろしくお願いします。

[Zuishin]

haru666 さんの回答がそのものずばりだと思いますが。

[退会済みユーザー]

zuishinさん そうなのですが、Moveの実装がなかなかうまくいかず困っている状態です。。

[Zuishin]

マウスダウンされた時点で、矩形とカーソル位置の座標を求めます。マウスが動いた時点でその位置関係が等しくなるように動かせばいいんじゃないですか？ 仮に矩形の左上が (100, 100) マウスが (110, 110) だったとすると、 マウスが (200, 200) に動いたときに矩形を (190, 190) に動かせばいいと思います。

[Zuishin]

えっ？ 退会？ 質問しておいて、完成品のコード貼ってもらえなかったら退会？

Answer 1

namespaceにtest20と書いてあるのでヒント形式で回答していきたいと思います。

色が変わった部分の移動方法が分かりません。

というのでは移動の開始方法が分からないので、前提としてマウスをクリックしてる間移動するという想定でお話します。

---

①RecObjIteratorにMoveを実装する
複数選択できるわけですから、纏めて移動できるように拡張しましょう。

以下のようなメソッドを追加してください。

void MoveSelected(Point from, Point to)
{
    // 選択されている矩形のMoveを呼び出す
}

---

②矩形の移動開始地点を取得する
矩形がどこから移動を始めたのか記憶しなければいけません。
マウスがクリックされた時から移動が始まるならクリック位置が始点になります。

マウスのクリックが開始されたのを知るにはOnMouseDownイベントを使います。
マウスの移動の検知にはOnMouseMoveイベントを使います。
マウスのクリックが終了したのを知るにはOnMouseUpイベントを使います。

フォームにマウスの座標を記憶するための変数を追加してください。

以下ができていれば良いですね。

OnMouseDown
 ->MouseEventArgsから最初の座標を得る
   矩形を移動する状態にする
OnMouseMove
 ->矩形を移動する状態なら、MouseEventArgsから現在の座標を得る
   1回前の座標と組み合わせて矩形を移動する（※RecObjIterator.MoveSelectedを使う）
   現在の座標を記憶する
OnMouseUp
 ->MouseEventArgsから現在の座標を得る
   1回前の座標と異なれば、矩形を移動する（※必要ならRecObjIterator.MoveSelectedを使う）
   矩形を移動する状態を終了する

※余談ですが、マウス移動時になめらかに矩形を移動させるにはPictureBoxコントロールのCaptureプロパティをtrueにします。OnMouseDownでtrueにし、OnMouseUpでfalseにすると良いのですが、これがどういう意味かは自分で調べてみてください。

---

③選択された矩形を維持する
今のままだとMouseMoveが呼ばれるたびに選択される図形が変わってしまいますね。
座標の移動時にもMouseMoveイベントを経由する必要があります。
マウスがクリックされている間は同じ図形を全て移動したいのですよね。
であれば、クリックされている間は今の処理が再度呼び出されないようにする必要があります。

private void pictureBox1_MouseMove(object sender, MouseEventArgs e)
{
    if (/* 矩形が移動中なら */)
    {
        // ここに移動用の処理を書く

        // 過去の処理で選択状態が作られているわけだから
        // 選択された矩形のMoveを呼び出せばよい
    }
    else {
        // 今までの処理...
        //マウス座標を取得
        var mymouse = new Point(e.X, e.Y);
        //全矩形の選択状態を解除
        this.recIter.UnSelectObj();

        //マウス座標で矩形を選択する
        this.recIter.SelectByMouse(mymouse);

        //ピクチャーボックスの再表示を依頼する
        this.pictureBox1.Invalidate();
    }
}