Масштабирование картинки с кнопками на ней

@Toll · Регистрация: 18.01.2012

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

Доброго дня Всем.
Пытаюсь реализовать задумку.
Есть изображение (большое) его я закинул в pictureBox который находится в Panel и кнопка (можно использовать и любой другой элемент, у которого есть событие по нажатию).
Реализовано на текущий момент:
- Перетягивание изображения при помощи мышки, также перетягивается и кнопка (сохраняет свое местоположение на изображении)
- Увеличение и уменьшение масштаба при помощи колесика мышки.
Но при этом кнопка изменяет свое местоположение относительно изображения (в примере она двигается по форме, а нужно что бы она была прикреплена к конкретному месту на изображении)

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

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
        public Form1()
        {
            InitializeComponent();
 
            this.panel1.MouseWheel += new System.Windows.Forms.MouseEventHandler(this.panel1_MouseWheel);
            widthZoom = pictureBox1.Width;
            heightZoom = pictureBox1.Height;
        }
 
        private void pictureBox1_MouseDown(object sender, MouseEventArgs e) //нажал на кнопку
        {
            if (e.Button == System.Windows.Forms.MouseButtons.Left)
            {
                flagmousebutton = true;
                mouseX = e.X;
                mouseY = e.Y;
                this.Cursor = Cursors.Hand;
            }
        }
 
        private void pictureBox1_MouseUp(object sender, MouseEventArgs e) //отпустил кнопку
        {
            if (flagmousebutton == true)
            {
                flagmousebutton = false;
                this.Cursor = Cursors.Default;
            }
        }
 
        private void pictureBox1_MouseMove_1(object sender, MouseEventArgs e) //навел мышку и нажал кнопку
        {
            //Получаем координаты курсора
            int CursorX = mouseX;
            int CursorY = mouseY;
            textBoxX.Text = CursorX.ToString();
            textBoxY.Text = CursorY.ToString();
 
            //перемещение изображения в новые координаты
            if (flagmousebutton == true)
            {
                int dx = e.X - mouseX;
                int dy = e.Y - mouseY;
                pictureBox1.Location = new Point(pictureBox1.Location.X + dx, pictureBox1.Location.Y + dy);
                button1.Location = new Point(button1.Location.X + dx, button1.Location.Y + dy);
            }
         }
 
        private void panel1_MouseWheel(object sender, MouseEventArgs e) //кручение колесиком
        {
            if (e.Delta < 0)
            {
                pictureBox1.Width = pictureBox1.Width + 50;
                pictureBox1.Height = pictureBox1.Height + 50;
                pictureBox1.Location = new Point(pictureBox1.Location.X - 50, pictureBox1.Location.Y - 50);
 
//Вот тут надо как то указать координаты местонахождения на поле pictureBox
                button1.Location = new Point(button1.Location.X + 25, button1.Location.Y + 25);
            }
            else
            {
                if (pictureBox1.Width > widthZoom)
                {
                    pictureBox1.Width = pictureBox1.Width - 50;
                    pictureBox1.Height = pictureBox1.Height - 50;
                    pictureBox1.Location = new Point(pictureBox1.Location.X + 50, pictureBox1.Location.Y + 50);
 
//Вот тут надо как то указать координаты местонахождения на поле pictureBox
                    button1.Location = new Point(button1.Location.X - 25, button1.Location.Y - 25);
                }
            }
        }
    }

@HectorPrima · 02.07.2018, 05:42

Вычитаешь у картинки 50 и прибавляешь 50... итого ты ее расширяешь на 100.
Соответственно кнопка должно сдвигаться на 50 а не на 25.
Ну и движение кнопки в panel1_MouseWheel инвертировать там где + написан писать мину с и т.д.

C#
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
        private void panel1_MouseWheel(object sender, MouseEventArgs e) //кручение колесиком
        {
            if (e.Delta < 0)
            {
                ...
                button1.Location = new Point(button1.Location.X - 50, button1.Location.Y - 50);
            }
            else
            {
                if (pictureBox1.Width > widthZoom)
                {
                    ...
                    button1.Location = new Point(button1.Location.X + 50, button1.Location.Y + 50);
                }
            }
        }

@Sanya_sa · 02.07.2018, 10:15

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

Но при этом кнопка изменяет свое местоположение относительно изображения (в примере она двигается по форме, а нужно что бы она была прикреплена к конкретному месту на изображении)

Что значит прикреплена? Как кнопка попадает в заданную область изображения?
Изображение и элемент управления разные вещи. Если Вы хотите что то делать по клику мыши на определенном участке изображения. Просто определите его (участок например прямоугольником).
Для того, чтобы сохранять пропорции при изменении изображения, можно использовать относительные координаты.

@Toll · 10.07.2018, 16:35 **[ТС]**

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

Просто определите его (участок например прямоугольником)

Извиняюсь за глупый вопрос. А как определить координаты и привязать к ним действие?

допустим у меня есть изображение, оригинальный размер которого допустим 5000х4000 пикселей.

@Sanya_sa · 10.07.2018, 16:46

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
public partial class Form1 : Form
{
 
    /// <summary>
    /// Наш прямоугольник
    /// </summary>
    Rectangle Rect;
 
    /// <summary>
    /// Координата верхнего левого Rect
    /// </summary>
    Point Pos = new Point(50, 50);
 
    /// <summary>
    /// Длина ширина Rect
    /// </summary>
    Size SzRect = new Size(100, 100);
 
    public Form1()
    {
        InitializeComponent();
 
        Rect = new Rectangle(Pos, SzRect);
    }
 
 
    /// <summary>
    /// Отрисовка
    /// </summary>
    /// <param name="e"></param>
    protected override void OnPaint(PaintEventArgs e)
    {
        var g = e.Graphics;
 
        g.DrawRectangle(Pens.Red, Rect);
    }
 
    /// <summary>
    /// Кнопка мыши вниз
    /// </summary>
    /// <param name="sender"></param>
    /// <param name="e"></param>
    private void Form1_MouseDown(object sender, MouseEventArgs e)
    {
        if (Rect.Contains(e.X, e.Y))
        {
            MessageBox.Show("Ok!");
        }
    }

@Toll · 11.07.2018, 08:14 **[ТС]**

Sanya_sa, это же вы рисуете квадрат в плоскости координат самой формы, и координаты можно считать от 0х0 начала формы.
А я пытаюсь сделать зацепку к определенной точке на картинке, при чем картинку можно двигать/зумировать в Panel.

Например как сделано это в Google Earth Pro.
Там я выделил область, какую-то местность, и куда бы я не двигал (вверх, вниз, влево, вправо) и не отдалял и не приближал, эта область всегда будет там где я ее отметил и будет изменять свои размеры.

Или в какую мне сторону капать, на этой форме должны еще будут находиться и еще другие элементы.

@Toll · 11.07.2018, 08:17 **[ТС]**

HectorPrima, Кнопка смещается относительно изображения.

@Sanya_sa · 11.07.2018, 09:06

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

А я пытаюсь сделать зацепку к определенной точке на картинке, при чем картинку можно двигать/зумировать в Panel.

Не вижу проблемы, пересчитывайте координаты относительно Ваше картинки а не формы.

@Sanya_sa · 11.07.2018, 09:58

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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
/// <summary>
/// Форма
/// </summary>
public partial class Form1 : Form
{
 
    /// <summary>
    /// Наш прямоугольник
    /// </summary>
    Rectangle Rect;
 
    /// <summary>
    /// Координата верхнего левого Rect
    /// </summary>
    Point Pos = new Point(50, 50);
 
    /// <summary>
    /// Длина ширина Rect
    /// </summary>
    Size SzRect = new Size(100, 100);
 
    /// <summary>
    /// Подложка
    /// </summary>
    Rectangle RectMap;
 
    /// <summary>
    /// Размер карты
    /// </summary>
    Size SzMap = new Size(100, 100);
 
    /// <summary>
    /// Флаг перемещения карты
    /// </summary>
    bool MoveMap = false;
 
    /// <summary>
    /// Координаты кнопки мыши вниз
    /// </summary>
    Point MD = new Point();
 
    /// <summary>
    /// 
    /// </summary>
    public Form1()
    {
        InitializeComponent();
 
        SzMap       = Res.map.Size;
        RectMap     = new Rectangle(new Point(), SzMap);
        Rect        = new Rectangle(Pos, SzRect);
    }
 
    //
    private void CalcRelPos()
    {
        Pos     = new Point(RectMap.X + 50, RectMap.Y +50);
        Rect    = new Rectangle(Pos, SzRect);
    }
 
    /// <summary>
    /// Кнопка мыши вниз
    /// </summary>
    /// <param name="sender"></param>
    /// <param name="e"></param>
    private void Form1_MouseDown(object sender, MouseEventArgs e)
        {
            if (Rect.Contains(e.X, e.Y))
            {
                MessageBox.Show("Ok!");
            }
            else
            {
                if (e.Button == MouseButtons.Right)
                {
                    MD      = new Point(e.X - RectMap.X, e.Y - RectMap.Y);
                    MoveMap = true;
                }
            }
        }
 
 
    /// <summary>
    /// 
    /// </summary>
    /// <param name="sender"></param>
    /// <param name="e"></param>
    private void Form1_MouseMove(object sender, MouseEventArgs e)
        {
            if (MoveMap && e.Button == MouseButtons.Right)
            {
                RectMap = new Rectangle(new Point(e.X - MD.X, e.Y - MD.Y), SzMap);
 
                CalcRelPos();
                Invalidate();
            }
        }
 
    /// <summary>
    /// 
    /// </summary>
    /// <param name="sender"></param>
    /// <param name="e"></param>
    private void Form1_MouseUp(object sender, MouseEventArgs e)
        {
            MoveMap = false;
        }
 
    /// <summary>
    /// Отрисовка
    /// </summary>
    /// <param name="e"></param>
    protected override void OnPaint(PaintEventArgs e)
        {
            var g = e.Graphics;
 
            g.DrawImage     (Res.map,   RectMap);
            g.DrawRectangle (Pens.Red,  Rect);
        }
}

Новые блоги и статьи Все статьи Все блоги /
моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .
Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь(не выше 3-го порядка) постоянного тока с элементами R, L, C, k(ключ), U, E, J. Программа находит переходные токи и напряжения на элементах схемы классическим методом(1 и 2 з-ны. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .

@Toll 0 / 0 / 0 Регистрация: 18.01.2012 Сообщений: 19
	11.07.2018, 08:17 [ТС]
	HectorPrima, Кнопка смещается относительно изображения. 0