Наложенные друг на друга панели

@MConst · Регистрация: 16.04.2022

Студворк — интернет-сервис помощи студентам

Здравствуйте!

На форме есть две Panel, который накладываются друг на друга. Суть в следующем: для panel1 после каждого действия дорисовывает дополнительные фигуры, но не перерисовывает все имеющиеся. А для panel2, после каждого действия также дорисовывает дополнительные фигуры, но перерисовывает все имеющиеся. По действием подразумевается клик мышью.

Есть такой код

Кликните здесь для просмотра всего текста

C#
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
using System;
using System.Drawing;
using System.Windows.Forms;
 
namespace WindowsFormsTwoPanels
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }
 
        private void Form1_Load(object sender, EventArgs e)
        {
            Panel panel1;
            Panel panel2;
            int width = 800;
            int heigh = 500;
 
            panel1 = new Panel();
            panel1.Location = new Point(0, 0);
            panel1.Size = new Size(width, heigh);            
            panel1.Paint += new PaintEventHandler(panel1_Paint);
            //panel1.BackColor = Color.FromArgb(0, 0, 0, 0);
            panel1.BackColor = Color.Transparent;
 
            panel2 = new Panel();
            panel2.Size = new Size(width, heigh);
            panel2.Location = new Point(0, 0);          
            panel2.Paint += new PaintEventHandler(panel2_Paint);
            //panel2.BackColor = Color.FromArgb(0, 0, 0, 0);
            panel2.BackColor = Color.Transparent;
 
            this.Controls.Add(panel1);
            this.Controls.Add(panel2);           
            this.Width = width;
            this.Height = heigh;
        }
 
        private void panel1_Paint(object sender, PaintEventArgs e)
        {
            Graphics g = e.Graphics;
            g.FillEllipse(new SolidBrush(Color.Red), 50, 50, 10, 10);            
        }
 
        private void panel2_Paint(object sender, PaintEventArgs e)
        {
            Graphics g = e.Graphics;
            g.FillEllipse(new SolidBrush(Color.Blue), 150, 150, 10, 10);
        }        
    }
}

Специально для простоты здесь в коде отсутствует использования клика мышью.

По факту рисует красную точку, но синюю не рисует. Но процедура panel2_Paint вызывается.

Если написать в таком порядке:

C#
1
2
this.Controls.Add(panel2);
this.Controls.Add(panel1);

то наоборот: рисует синюю точку, но красную не рисует.

Скажите, как правильно написать, чтобы рисовались на двух наложенных Panel?

@Rius · 25.12.2022, 10:53

Рисуйте на одной. Вам не нужны наложенные панели.
Если нужны слои, рисуйте их в памяти, сводите и выводите на одну панель или picturebox.

@MConst · 25.12.2022, 11:27 **[ТС]**

Сообщение от Rius

Если нужны слои, рисуйте их в памяти, сводите и выводите на одну панель.

Если рисовать две панели в памяти, то как их правильно сводить?

@Rius · 25.12.2022, 11:30

Рисуете в 2 Bitmap'а.
Потом сводите вместе, например как в Поддержка слоев как в графических редакторах или Наложение полупрозрачного изображения .
Получившийся Bitmap выводите.

@nedel · 25.12.2022, 14:56

Сообщение от MConst

Суть в следующем: для panel1 после каждого действия дорисовывает дополнительные фигуры, но не перерисовывает все имеющиеся. А для panel2, после каждого действия также дорисовывает дополнительные фигуры, но перерисовывает все имеющиеся. По действием подразумевается клик мышью.

Ваши панели имеют одинаковые координаты и размеры, т.е. занимают ту же область на экране. Клик мышью в эту область - это в которую панель и почему именно в эту?

@MConst · 25.12.2022, 17:30 **[ТС]**

Сообщение от Rius

Рисуйте на одной. Вам не нужны наложенные панели.
Если нужны слои, рисуйте их в памяти, сводите и выводите на одну панель или picturebox.

Сообщение от Rius

Рисуете в 2 Bitmap'а.
Потом сводите вместе. Получившийся Bitmap выводите.

В общем, получилось так.

Кликните здесь для просмотра всего текста

C#
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
using System;
using System.Collections.Generic;
using System.Drawing;
using System.Linq;
using System.Windows.Forms;
 
namespace WindowsFormsTwoPanels
{
    public class CoordinatePoint
    {
        public int X;
        public int Y;
 
        public CoordinatePoint(int x, int y)
        {
            this.X = x;
            this.Y = y;
        }
    }
 
    public partial class Form1 : Form
    {
        int width = 800;
        int height = 500;
        Panel panel1;
        Bitmap myBitmap1;
        Bitmap myBitmap2;
        List<CoordinatePoint> Points;
 
        public Form1()
        {
            InitializeComponent();
        }
 
        private void Form1_Load(object sender, EventArgs e)
        {
            myBitmap1 = new Bitmap(width, height);
            myBitmap2 = new Bitmap(width, height);            
 
            panel1 = new Panel();
            panel1.Location = new Point(0, 0);
            panel1.Size = new Size(width, height);
            panel1.Paint += new PaintEventHandler(panel1_Paint);
            panel1.MouseDown += new MouseEventHandler(panel1_MouseDown);            
 
            this.Controls.Add(panel1);
            this.Width = width;
            this.Height = height;
 
            Points = new List<CoordinatePoint>();
        }
 
        private void panel1_Paint(object sender, PaintEventArgs e)
        {
            if (Points.Count > 0)
            {
                Graphics gr = e.Graphics;
 
                using (Graphics g = Graphics.FromImage(myBitmap1))
                {
                    g.FillEllipse(new SolidBrush(Color.Red), Points.Last().X - 5, Points.Last().Y - 5, 10, 10);
                    g.Dispose();
                }
 
                myBitmap2 = (Bitmap)myBitmap1.Clone();
 
                using (Graphics g = Graphics.FromImage(myBitmap2))
                {
                    g.DrawEllipse(new Pen(Brushes.Blue), Points.Last().X - 10, Points.Last().Y - 10, 20, 20);
                    g.Dispose();                   
                }
 
                gr.DrawImage(myBitmap2, 0, 0);
            }            
        }               
 
        private void panel1_MouseDown(object sender, MouseEventArgs e)
        {            
            Points.Add(new CoordinatePoint(e.X, e.Y));
            panel1.Invalidate();
        }
    }
}

Суть в следующем. Рисуются закрашенные кружочки красного цвета с помощью клика мыши. На последующих кликах - не удаляются предыдущие кружочки. Но после последней кружочки вокруг рисуется синий круг. Использую такой алгоритм, чтобы предыдущие кружочки не перерисовывались (даже в случае, если их много). Также используется массив (List Points) для дополнительного функционала - отменять ввод предыдущих точек и заново все перерисовывать (здесь в коде отсутствует такой функционал).

1. Код как бы работает. Но есть сомнение. Хотелось бы узнать Ваше экспертное мнение, в этом алгоритме есть то, что не учитывается или неправильно написано?

2. После каждого нажатия мерцает panel1. Возможно ли написать код так, чтобы не мерцал?

@Rius · 25.12.2022, 17:41

Сообщение от MConst

g.Dispose();

g диспозить не надо, это уже делает using.

Сообщение от MConst

даже в случае, если их много

Много это сколько? Вы проверяли производительность?
Возможно, проще добавлять точки в массив, удалять из него (функциональность отсутствует), и рисовать с нуля. Тогда можно будет и конкретную точку удалить, а не все сразу.

Сообщение от MConst

myBitmap2 = (Bitmap)myBitmap1.Clone();

Здесь содержимое не клонируется?
На первом битмапе надо только мелкие окружности рисовать (добавлять) , а на втором только большую, предварительно всё стерев (начисто).

@MConst · 25.12.2022, 18:11 **[ТС]**

Сообщение от Rius

На первом битмапе надо только мелкие окружности рисовать (добавлять) , а на втором только большую, предварительно всё стерев (начисто).

Если Вы имеете ввиду так

Кликните здесь для просмотра всего текста

C#
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
private void panel1_Paint(object sender, PaintEventArgs e)
        {
            if (Points.Count > 0)
            {
                Graphics gr = e.Graphics;
 
                using (Graphics g = Graphics.FromImage(myBitmap1))
                {
                    g.FillEllipse(new SolidBrush(Color.Red), Points.Last().X - 5, Points.Last().Y - 5, 10, 10);                   
                }
 
                //myBitmap2 = (Bitmap)myBitmap1.Clone();                
 
                using (Graphics g = Graphics.FromImage(myBitmap2))
                {
                    g.Clear(Color.Transparent);
                    g.DrawEllipse(new Pen(Brushes.Blue), Points.Last().X - 10, Points.Last().Y - 10, 20, 20);                    
                }
 
                gr.DrawImage(myBitmap2, 0, 0);
            }            
        }

то работает не так, как надо

@Rius · 25.12.2022, 18:19

В 12 строку поставить

C#
1
gr.DrawImage(myBitmap1, 0, 0);

@MConst · 25.12.2022, 18:29 **[ТС]**

Сообщение от Rius

В 12 строку поставить

C#
1
gr.DrawImage(myBitmap1, 0, 0);

Заработало

Добавлено через 3 минуты

Сообщение от nedel

Клик мышью в эту область - это в которую панель и почему именно в эту?

panel1.

C#
1
2
3
4
5
6
7
8
9
10
private void panel1_MouseDown(object sender, MouseEventArgs e)
        {            
            Points.Add(new CoordinatePoint(e.X, e.Y));
            panel1.Invalidate();
            
            Graphics g = CreateGraphics();
            Rectangle rec = new Rectangle();
            PaintEventArgs es = new PaintEventArgs(g, rec);
            panel2_Paint(sender, es);
        }

Но это не совсем правильный алгоритм, если делать через две панели.

@MConst · 27.12.2022, 09:07 **[ТС]**

Добавил функционал. Как обычно после клика рисуется дополнительная точка, но потом рисуется дополнительные расширяющие круги вокруг последней точки. То есть должна быть анимация: увеличиваеся расширяющий круг. А по факту рисуются все расширяющиеся круги.

Такой код

Кликните здесь для просмотра всего текста

C#
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
using System;
using System.Collections.Generic;
using System.Drawing;
using System.Linq;
using System.Windows.Forms;
 
namespace WindowsFormsTwoPanels
{
    public class CoordinatePoint
    {
        public int X;
        public int Y;
 
        public CoordinatePoint(int x, int y)
        {
            this.X = x;
            this.Y = y;
        }
    }
 
    public partial class Form1 : Form
    {
        int width = 800;
        int height = 500;
        Panel panel1;
        Bitmap myBitmap1;
        Bitmap myBitmap2;
        List<CoordinatePoint> Points;
 
        public Form1()
        {
            InitializeComponent();
        }
 
        private void Form1_Load(object sender, EventArgs e)
        {
            myBitmap1 = new Bitmap(width, height);
            myBitmap2 = new Bitmap(width, height);            
 
            panel1 = new Panel();
            panel1.Location = new Point(0, 0);
            panel1.Size = new Size(width, height);
            panel1.Paint += new PaintEventHandler(panel1_Paint);
            panel1.MouseDown += new MouseEventHandler(panel1_MouseDown);            
 
            this.Controls.Add(panel1);
            this.Width = width;
            this.Height = height;
 
            Points = new List<CoordinatePoint>();
        }
 
        private void panel1_Paint(object sender, PaintEventArgs e)
        {
            if (Points.Count > 0)
            {
                Graphics gr = e.Graphics;
 
                using (Graphics g = Graphics.FromImage(myBitmap1))
                {
                    g.FillEllipse(new SolidBrush(Color.Red), Points.Last().X - 5, Points.Last().Y - 5, 10, 10);                    
                }
                
                gr.DrawImage(myBitmap1, 0, 0);
 
                for (int i = 0; i < 5; i++)
                {
                    using (Graphics g = Graphics.FromImage(myBitmap2))
                    {
                        g.Clear(Color.Transparent);
                        var diameter = 10 + i * 5;
                        g.DrawEllipse(new Pen(Brushes.Blue), Points.Last().X - diameter / 2, Points.Last().Y - diameter / 2, diameter, diameter);
                    }
 
                    gr.DrawImage(myBitmap2, 0, 0);
                }                
            }            
        }               
 
        private void panel1_MouseDown(object sender, MouseEventArgs e)
        {            
            Points.Add(new CoordinatePoint(e.X, e.Y));
            panel1.Invalidate();
        }

Скажите, правильно понимаю, что для анимации цикл нужно создавать не в процедуре panel1_Paint, а в panel1_MouseDown?

@Rius · 27.12.2022, 09:11

Именно анимация должна производиться сама по себе. По таймеру, например.
MouseDown же вызывается лишь по нажатию мыши.

@MConst · 27.12.2022, 09:23 **[ТС]**

Сообщение от Rius

Именно анимация должна производиться сама по себе. По таймеру, например.
MouseDown же вызывается лишь по нажатию мыши.

Для данного случая таймер добавлять в panel1_Paint или создавать отдельную процедуру между panel1_MouseDown и panel1_Paint?

@Rius · 27.12.2022, 09:41

Просто добавить мало. Как создать анимацию на Windows Forms - это отдельный вопрос, для новой темы.

Уроки C# – Анимация в Windows Forms с амплитудой

@MConst · 27.12.2022, 11:47 **[ТС]**

Сообщение от Rius

Как создать анимацию на Windows Forms - это отдельный вопрос, для новой темы.

Согласен.

Сообщение от Rius

"Уроки C# – Анимация в Windows Forms с амплитудой"

Спасибо!

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Desktop (MinGW): Рисуем цветные прямоугольники с помощью рисовальщика SDL3 на Си и C++ 8Observer8 17.03.2026 Содержание блога Финальные проекты на Си и на C++: finish-rectangles-sdl3-c. zip finish-rectangles-sdl3-cpp. zip	Символические и жёсткие ссылки в Linux. algri14 15.03.2026 Существует два типа ссылок — символические и жёсткие. Ссылка в Linux — это запись в каталоге, которая может указывать либо на inode «файла-ИСТОЧНИКА», тогда это будет «жёсткая ссылка» (hard link),. . .	[Owen Logic] Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ФедосеевПавел 14.03.2026 Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ВВЕДЕНИЕ Выполняя задание на управление насосной группой заполнения резервуара,. . .	делаю науч статью по влиянию грибов на сукцессию anaschu 13.03.2026 прикрепляю статью
SDL3 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++ 8Observer8 10.03.2026 Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:	Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE 8Observer8 10.03.2026 Содержание блога MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений. Здесь описаны базовые шаги для старта программирования с помощью CMake и. . .	Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .	Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .

@Rius 13153 / 7711 / 1679 Регистрация: 25.05.2015 Сообщений: 23,500 Записей в блоге: 14
	25.12.2022, 10:53
	Рисуйте на одной. Вам не нужны наложенные панели. Если нужны слои, рисуйте их в памяти, сводите и выводите на одну панель или picturebox. 1

@Rius 13153 / 7711 / 1679 Регистрация: 25.05.2015 Сообщений: 23,500 Записей в блоге: 14
	25.12.2022, 11:30
	Рисуете в 2 Bitmap'а. Потом сводите вместе, например как в Поддержка слоев как в графических редакторах или Наложение полупрозрачного изображения . Получившийся Bitmap выводите. 1

@Rius 13153 / 7711 / 1679 Регистрация: 25.05.2015 Сообщений: 23,500 Записей в блоге: 14
	27.12.2022, 09:11
	Именно анимация должна производиться сама по себе. По таймеру, например. MouseDown же вызывается лишь по нажатию мыши. 1

@Rius 13153 / 7711 / 1679 Регистрация: 25.05.2015 Сообщений: 23,500 Записей в блоге: 14
	27.12.2022, 09:41
	Просто добавить мало. Как создать анимацию на Windows Forms - это отдельный вопрос, для новой темы. Уроки C# – Анимация в Windows Forms с амплитудой 1