C#で横スクロールバーをスクロールした時にGraphicsの描画が更新されるようにしたい

Question

こんにちは。

パネルをスクロールした時に描画の続きの部分が描画されるようにしたいのですが、現状では続きの部分が描画されず、途切れてしまいます

Panelの上にPictureBoxを置いてスクロールバーを表示させることには成功しましたが、やはりスクロールした時に途切れ、再描画がされません。

下記がコードです

        private void KeyBoard_Paint(object sender, PaintEventArgs e)
        {
            int octave_draw_size_y = PianoRoll.white_key_board_height_list.Sum();
            int measure_off_no, measure_count = 1;
            int new_measure_count = 1;
            int offset, measure_x_draw;
            measure_x_draw = measure_count * PianoRoll.MEASURE_WIDTH;
            measure_off_no = 0;
            offset = measure_off_no * PianoRoll.MEASURE_WIDTH;
            new_measure_count += measure_count;
            // 白鍵と黒鍵の描画
            SolidBrush white_keyboard_color = new SolidBrush(Color.FromArgb(255, 255, 255));
            Pen black_line_color = new Pen(Color.FromArgb(0, 0, 0), 1);
            black_line_color.Alignment = System.Drawing.Drawing2D.PenAlignment.Inset;
            SolidBrush black_keyboard_color = new SolidBrush(Color.FromArgb(10, 10, 10));
            // 白鍵の描画
            int white_start_y = 0;
            for (int i = 0; i < PianoRoll.octave_num; i++)
            {
                foreach (int height in PianoRoll.white_key_board_height_list)
                {
                    e.Graphics.FillRectangle(white_keyboard_color, 0, white_start_y, PianoRoll.WHITE_KEYBOARD_WIDTH, height);
                    e.Graphics.DrawRectangle(black_line_color, 0, white_start_y, PianoRoll.WHITE_KEYBOARD_WIDTH, height);
                    white_start_y += height;
                }
            }
            // 黒鍵の描画
            for (int i = 0; i < PianoRoll.octave_num; i++)
            {
                foreach (int black_key_board_start_y in PianoRoll.black_key_board_start_y_list)
                {
                    e.Graphics.FillRectangle(black_keyboard_color, 0, black_key_board_start_y + (octave_draw_size_y * i), PianoRoll.BLACK_KEYBOARD_WIDTH, PianoRoll.BLACK_KEYBOARD_HEIGHT);
                }

            }
        }

4時間ほど悩みましたが解決に至りません。どうしたらいいのでしょうか

Comments

[Zuishin]

PictureBox ではいけないんですか？

[kemomimi_sabal]

panelに直接描画したいのです

[Zuishin]

それはどういう利点がありますか？

[kemomimi_sabal]

歌声合成ソフトの開発をしているのですが、それにあたり音符などの更新を容易にするためです

[Zuishin]

それに Panel を使う利点の話です。

[kemomimi_sabal]

panelの上にpictureboxを置いてpanelのAutoScrollをtrueにしましたが期待した動作を得られなかったのでpanelの上に直接描画してhscrollとvscrollを個別に配置しています

[Zuishin]

特に利点が無いのであれば、スクロールされるたびに Invalidate を行うのではなく、パネルの上に PictureBox を置き、PictureBox を適当な大きさに変更してスクロールはその下のパネルに任せるのが一番楽ではないかと思います。

私であれば PictureBox の代わりに CustomControl を使いますが、当面どちらでも問題ないかと。

[Zuishin]

「期待した動作」が何かにもよりますが、どのみちそこを伏せていたのでは適切な回答はつきにくいので、「やってみたこと」としてその方法を書き、また期待する動作と実際の動作を書くのがいいのではないでしょうか。

[kemomimi_sabal]

パネルをスクロールした時に描画の続きの部分が描画されるようにしたいのです

[kemomimi_sabal]

ですが、現状では続きの部分が描画されず、途切れてしまいます

[Zuishin]

その方法で続きが途切れるのは多分画像に描いていないからです。なんとなくやりたいことはわかりました。

[kemomimi_sabal]

Panelの上にPictureBoxを置いてスクロールバーを表示させることには成功しましたが、やはり描画がされません。

下記がコードです

private void NoteEdit_Scroll(object sender, ScrollEventArgs e)
{
pictureBox1.Update();
}

[YAmaGNZ]

提示ソースは左側のキーボード部分の描画だと思いますが、これが右側のスクロールさせたい部分とどう関係があるのですか？

[Zuishin]

下記がコードですって言われても。私や YAmaGNZ さんのコードは動きましたか？ 動いたならそれを応用すればいいのではないですか？ もともとのコードがほぼ隠されている状態で、意図を丁寧に確認して十分なコードを出したつもりですが。

Answer 1

Zuishinさんの言っていることはこういうことかと

public partial class Form1 : Form
{
    private Panel pnlScore, pnlKey;
    private PictureBox picScore, picKeybord;

    public Form1()
    {
        InitializeComponent();

        //フォームの大きさ
        this.Size = new Size(800, 500);

        //表示領域のパネル
        this.pnlScore = new Panel() { Location = new Point(130, 10), Size = new Size(640, 370), AutoScroll = true };
        this.pnlKey = new Panel() { Location = new Point(10, 10), Size = new Size(120, 350) };
        this.Controls.Add(pnlKey);
        this.Controls.Add(pnlScore);

        //描画するPictureBox
        this.picKeybord = new PictureBox() { Location = new Point(0, 0), Size = new Size(120, 600) };
        this.picScore = new PictureBox() { Location = new Point(0, 0), Size = new Size(5000, 600) };
        pnlKey.Controls.Add(picKeybord);
        pnlScore.Controls.Add(picScore);

        this.picKeybord.Paint += new System.Windows.Forms.PaintEventHandler(this.picKeybord_Paint);
        this.picScore.Paint += new System.Windows.Forms.PaintEventHandler(this.picScore_Paint);
        this.pnlScore.Scroll += new System.Windows.Forms.ScrollEventHandler(this.pnlFumen_Scroll);

    }

    private void pnlFumen_Scroll(object sender, ScrollEventArgs e)
    {
        //譜面部分の縦スクロールにキーボード部分を連動させる
        if (e.ScrollOrientation == ScrollOrientation.VerticalScroll)
        {
            picKeybord.Top = -e.NewValue;
        }
    }

    private void picKeybord_Paint(object sender, PaintEventArgs e)
    {
        for (int y = 0; y < picKeybord.Height; y += 50)
        {
            e.Graphics.FillRectangle(Brushes.Black, 0, y, picKeybord.Width, 30);
        }
    }

    private void picScore_Paint(object sender, PaintEventArgs e)
    {
        for (int x = 0; x < picScore.Width; x += 50)
        {
            for (int y = 0; y < picScore.Height; y += 50)
            {
                if(x % 100 != 0 && y % 100 == 0)
                {
                    e.Graphics.FillRectangle(Brushes.Black, x, y, 50, 50);
                }
            }
        }
    }

}

PictureBoxをしっかり描画してやれば、スクロールの処理はPanelのAutoScrollに任せて、一切コードは書かなくても大丈夫のはずです。

Answer 2

PictureBox から Graphics を作るのではなく、PictureBox.Image から Graphics を作り、そこに描いてください。

Form1.cs

using System;
using System.Drawing;
using System.Windows.Forms;

namespace WindowsFormsApp1
{
	public partial class Form1 : Form
	{
		public Form1()
		{
			InitializeComponent();
		}

		private void PictureBox1_SizeChanged(object sender, EventArgs e)
		{
			var image = pictureBox1.Image;
			if (image != null && image.Height == pictureBox1.ClientSize.Height)
			{
				return;
			}
			if (pictureBox1.ClientSize.Height <= 0)
			{
				pictureBox1.Image = null;
				return;
			}
			image = new Bitmap(1000, pictureBox1.ClientSize.Height);
			using (var graphics = Graphics.FromImage(image))
			using (var brush = new SolidBrush(Color.Blue))
			{
				graphics.FillEllipse(brush, new Rectangle(new Point(0, 0), image.Size));
			}
			pictureBox1.ClientSize = image.Size;
			pictureBox1.Image = image;
		}
	}
}

Form1.Designer.cs

namespace WindowsFormsApp1
{
	partial class Form1
	{
		/// <summary>
		/// 必要なデザイナー変数です。
		/// </summary>
		private System.ComponentModel.IContainer components = null;

		/// <summary>
		/// 使用中のリソースをすべてクリーンアップします。
		/// </summary>
		/// <param name="disposing">マネージ リソースを破棄する場合は true を指定し、その他の場合は false を指定します。</param>
		protected override void Dispose(bool disposing)
		{
			if (disposing && (components != null))
			{
				components.Dispose();
			}
			base.Dispose(disposing);
		}

		#region Windows フォーム デザイナーで生成されたコード

		/// <summary>
		/// デザイナー サポートに必要なメソッドです。このメソッドの内容を
		/// コード エディターで変更しないでください。
		/// </summary>
		private void InitializeComponent()
		{
			this.pictureBox1 = new System.Windows.Forms.PictureBox();
			((System.ComponentModel.ISupportInitialize)(this.pictureBox1)).BeginInit();
			this.SuspendLayout();
			// 
			// pictureBox1
			// 
			this.pictureBox1.Dock = System.Windows.Forms.DockStyle.Left;
			this.pictureBox1.Location = new System.Drawing.Point(0, 0);
			this.pictureBox1.Name = "pictureBox1";
			this.pictureBox1.Size = new System.Drawing.Size(100, 253);
			this.pictureBox1.TabIndex = 0;
			this.pictureBox1.TabStop = false;
			this.pictureBox1.SizeChanged += new System.EventHandler(this.PictureBox1_SizeChanged);
			// 
			// Form1
			// 
			this.AutoScaleDimensions = new System.Drawing.SizeF(8F, 15F);
			this.AutoScaleMode = System.Windows.Forms.AutoScaleMode.Font;
			this.AutoScroll = true;
			this.ClientSize = new System.Drawing.Size(282, 253);
			this.Controls.Add(this.pictureBox1);
			this.Name = "Form1";
			this.Text = "Form1";
			((System.ComponentModel.ISupportInitialize)(this.pictureBox1)).EndInit();
			this.ResumeLayout(false);

		}

		#endregion

		private System.Windows.Forms.PictureBox pictureBox1;
	}
}

Comments

[退会済みユーザー]

Zuishin←コイツ
https://teratail.com/questions/192606
↑Zuishinの本性、発言内容。コイツが修正しない限り、コメントが残っている事だろう。修正しない限りは。
コイツは、「電話してやる、ビビってるのか？」などと私を煽り、ネットでしかイキがれないクズなのだが、いざ私が電話番号を教えてやったら、「書いたね。ご苦労さん。あとは好きなだけ吠えてろ」と、逃げる腐れ外道であり、精神疾患患者である。
こう言うゴミが生きてる事自体が許せない。皆さんもコイツには気をつけましょう。

[Q71]

> PictureBox.Image から Graphics を作り
PictureBox.Image に割り当てた Image オブジェクトから Graphics を作り、かなぁ。
描画のたびに新たに Image を作るのもひとつ。

[Zuishin]

そうですね。描画のたびにというのもパフォーマンスが悪くなりそうなので、私のコードではウィンドウのサイズ変更で画像を作っています。

Answer 3

ちらつきをなくすだけなら、フォームのプロパティにある、
DoubleBuffered を trueにするといいと思います

Comments

[kemomimi_sabal]

Panelの上にHscrollとVScrollを個別に置いています