質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.13%

C#_図形移動の件について

解決済

回答 1

投稿

  • 評価
  • クリップ 1
  • VIEW 5,277

seep0619

score 25

C#_図形移動の件について

・現状
青の図形のが無数に並列しており、マウスが図形に重複すると
図形が青→赤に変更するようになってます。

・質問
赤に変わった際マウスで移動させると赤の図形も移動するようにしたい。

・mouseup,mousedouwnを使用するのは把握しているのですが
以後が分かりません。そのあたりどのように展開していったらいいのか
ご教授頂けたら幸いです。宜しくお願い致します。

・現在のソースコード

namespace C
{
public partial class Form1 : Form

{
// 四角形の座標List
List<Rectangle> _rects = new List<Rectangle>();

// 赤枠になっている四角形の座標List
List<Rectangle> _prev = new List<Rectangle>();
bool _isDraging = false;

Point? _diffPoint = null;

public Form1()
{
InitializeComponent();

}

private void Form1_Load(object sender, EventArgs e)
{
Bitmap canvas = new Bitmap(pictureBox1.Width, pictureBox1.Height);

using (Graphics g = Graphics.FromImage(canvas))
using (Pen pen = new Pen(Color.Blue))
{

Random rnd = new Random();

for (int i = 0; i < 50; i++)
{
int x = rnd.Next(i, i);
int y = rnd.Next(i, i);
Rectangle r = new Rectangle(x, y, 100, 100);

g.DrawRectangle(pen, r);
_rects.Add(r);
}
}

pictureBox1.Image = canvas;
}

private void pictureBox1_Click(object sender, EventArgs e)
{

}

private void pictureBox1_MouseMove(object sender, MouseEventArgs e)
{
{
List<Rectangle> hitRects = _rects.AsEnumerable()
.Where(v =>
v.X <= e.X && v.Y <= e.Y &&
(v.X + v.Width) >= e.X && (v.Y + v.Height) >= e.Y)
.Select(v => v)
.ToList();

if (hitRects.Count > 0)
{
using (Graphics g = Graphics.FromImage(pictureBox1.Image))
{
if (_prev.Count() > 0)
{
using (Pen pen = new Pen(Color.Blue))
{
// 前回描画した赤枠を青枠に戻す
foreach (Rectangle r in _prev)
{
g.DrawRectangle(pen, r);
}
}
}

using (Pen pen = new Pen(Color.Red))
{
// 赤枠四角描画
foreach (Rectangle r in hitRects)
{
g.DrawRectangle(pen, r);
}
}

// 今回描画した赤枠座標を保存
_prev = hitRects;

// PictureBox更新
pictureBox1.Refresh();
}
}
}
}

private void pictureBox1_MouseDown(object sender, MouseEventArgs e)
{
if (e.Button != MouseButtons.Left)

{
return;
}

Cursor.Current = Cursors.Hand;

_isDraging = true;

_diffPoint = e.Location;

{
List<Rectangle> hitRects = _rects.AsEnumerable()
.Where(v =>
v.X <= e.X && v.Y <= e.Y &&
(v.X + v.Width) >= e.X && (v.Y + v.Height) >= e.Y)
.Select(v => v)
.ToList();

if (hitRects.Count > 0)
{
using (Graphics g = Graphics.FromImage(pictureBox1.Image))
{
using (Pen pen = new Pen(Color.Red))
{
// 赤枠四角描画
foreach (Rectangle r in hitRects)
{
g.DrawRectangle(pen, r);
g.TranslateTransform(120, 0);
}

}
}  // 今回描画した赤枠座標を保存
_prev = hitRects;

// PictureBox更新
pictureBox1.Refresh();
}
}
}

private void pictureBox1_MouseUp(object sender, MouseEventArgs e)
{
{
List<Rectangle> hitRects = _rects.AsEnumerable()
.Where(v =>
v.X <= e.X && v.Y <= e.Y &&
(v.X + v.Width) >= e.X && (v.Y + v.Height) >= e.Y)
.Select(v => v)
.ToList();

if (hitRects.Count > 0)
{
using (Graphics g = Graphics.FromImage(pictureBox1.Image))
{
if (_prev.Count() > 0)
{
using (Pen pen = new Pen(Color.Blue))
{
// 前回描画した赤枠を青枠に戻す
foreach (Rectangle r in _prev)
{
g.DrawRectangle(pen, r);
}
}
}

using (Pen pen = new Pen(Color.Red))
{
// 赤枠四角描画
foreach (Rectangle r in hitRects)
{
g.DrawRectangle(pen, r);
g.TranslateTransform(0, 120);

}
}

// 今回描画した赤枠座標を保存
_prev = hitRects;

// PictureBox更新
pictureBox1.Refresh();
}
}
}
}

private void pictureBox1_Paint(object sender, PaintEventArgs e)
{
}
}
}

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • MMashiro

    2016/10/07 21:53

    コードを張り付ける際は ``` を使用してください

    キャンセル

回答 1

checkベストアンサー

0

マウスドラッグによる移動は概ね以下のような方法になると思います。

  • PictureBox内でのMouseDown
    押された位置と異動対象の図形を覚える。このとき図形の色を赤に変える
  • PictureBox内でのMouseMove
    直前のマウス位置から現在のマウス位置の差分を移動距離とし、その分だけ各図形を移動。単にマウスを移動させた場合でもドラッグの場合でも両方このイベントが発生してしまうのでハンドラーの中でマウスボタンの状態をチェックしてドラッグであることの確認が必要のようですね(すみません自分も詳しくないので)
    なおもちろんこのイベントで通知されるマウス位置は時間のために覚えておきます。
  • PictureBox内でのMouseUp
    異動対象の図形の色を青に戻すなど必要な後始末をする。自分の場合は最後に起こったMoveMoveとMouseUpでマウスの位置が微妙に違うこともあるかもしれないと考えるので一応MouseUpでもMouseMoveと同様の移動処理もやっておきますが、そこまでは必要ないのかも知れません。

これらの処理に必要な情報は「直前のマウスの位置」「異動対象の図形がどれか」といったものになるのでフォームのフィールドとして用意しておけばよいと思います。

  • アニメーションの基本的な(やさしい)方法(既にご存知ならスルーしてください)
    描画する対象の図形の状態(位置や色)を変えたらその都度その図形を直接書き直すというのはややこしい処理になります。元の位置に書かれていた四角形を消して新たな場所に書くだけだと元の位置と重なる位置に他の四角形があった場合どうするか等々複雑なことを考えなければならないからです。こうした場合の一般的方法として位置や色などを必要な情報を更新したらPictureBox.Invalidate()を呼び出して、「もう一回書き直してね」といってやるのがよいと思います。

なお、図形の移動の実装には直接関係ないのですが、四角形に色々な操作を付け加えるためにオブジェクトとしてまとめた方がよいと思います。機能を追加していくにつれ必要な情報があちこちに散らばってきてわかりにくくなるので、「四角形」を単なるRectangleではなく「PictureBox上に存在するある位置・大きさ・色をもった操作可能な図形」と捉えそれをクラスとして定義すれば、そうしない場合に比べてわかりやすくなるでしょう。

やりたいことによってクラスの定義はいろいろ考えられますが素朴な例を以下に挙げてみます。なお、ドラッグの詳細な実装は含んでいません。また各メンバーのアクセス修飾子やイベントの設定は適宜ご自分で補ってください。

// あるPixcureBoxのImageの中に存在する、移動可能な四角形を表現するクラス
public class SquareShape {
  PictureBox Owner; // 描画する先のPictureBox
  Rectangle Bounds; // 位置と大きさ
  Color FillColor;  // 色

  // 初期位置や色を与えてインスタンスを作る。
  public SquareShape(PictureBox owner, int x, int y, Color fillColor) { ... }

  public bool Contains(Point p) { ... } // 点がこの四角形の内側にあるかテスト
  public void Draw(Graphics g) { ... } // 描画するpictureBox1_Paint用
  // 図形の状態を変えるメソッド群
  // 状態を変えるとPictureBoxの再描画が必要になるので各メソッドの中で
  // owner.Invalidated()を呼び出す。実際の描画は全てpictureBox1_Paintにまかせる
  public void Move(int dx, int dy) { // 現在の位置からdx,dyだけ移動
    bounds = new Rectangle(bounds.x + dx, bounds.y + dy, bounds.Width, bounds.Height);
    owner.Invalidate();
  }
  public void SetColor(Color color) { // 色を変える
    this.fillColor = color;
    owner.Invalidate();
  }
  ...
}
...
class Form1 ... {
  List<SquareShape> shapeList;

  void Form1_Load(...) {
    ...
    var rnd = new Random();
    shapeList = Enumerable.Range(0, 50)
      .Select(dummy => {
        // オリジナルコードでは図形位置がランダムになってないので若干変更してます
        var x = rnd.Next(0, pictureBox1.Width - 100); // 簡単のため100と直接書いてます
        var y = rnd.Next(0, picutreBox1.Height - 100);
        return new SquareShape(picuteBox1, x, y, Color.Blue);
      })
      .ToList();
    pictureBox1.Image = new Bitmap(pictureBox1.Width, pictureBox1.Height);
    pictureBox1.Invalidate(); // ここでは必要ないかも
  }

  Point lastMouseLocation; // 直前のMouseDown/MoveMoveでのマウス位置
  List<SquareShape> draggingShapes; // 異動対象の図形リスト

  void pictureBox1_MouseDown(...) {
    ... 全部の図形からマウス位置にあるものを探しそれを覚える。それらの色を赤に変える。
  }

  void pictureBox1_MouseMove(object sender, MouseEventArgs e) {
    if (e.Button == MouseButtons.Left) { // 左ボタンでドラッグするならこのように
      ... 異動対象の図形の位置をマウス位置に従い移動する(SquareShape.Moveで)
    }
  }

  void pictureBox1_MouseUp(...) {
    ... 移動対象の図形の色を青に戻すなどの後始末
  }

  // PictureBoxのInvalidateを呼び出すと適当なタイミングでこのハンドラーが呼ばれる
  // 複数の図形の状態を変更してInvalidateを複数回読んでもこのハンドラーは1回しか
  // 呼ばれませんので何度も何度も無駄に書き直すといったことになる心配はありません
  void pictureBox1_Paint(...) {
    Graphics g = Graphics.Graphics.FromImage(pictureBox1.Image);
    g.Clear(pictureBox1.BackColor);
    foreach (var sq in shapeList) {
      sq.Draw(g);
    }
  }
}

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/04/11 13:02

    遅くなり、申し訳ないです><ご丁寧に回答して頂いて感謝しております。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.13%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る