Измените размер изображения с помощью мыши и сохраняйте пропорции

Question

У меня есть настраиваемый элемент управления, который отображает изображение. Изображение имеет вокруг него раму с 4-мя размерами в каждом углу. Если пользователь перемещает курсор в ручку размера, он должен иметь возможность изменять размер изображения, сохраняя соотношение сторон.

У меня уже есть метод изменения размера, который работает:

public void Resize(float value) 
{ 
    if (value == 0f) 
     value = 0.05f; 

    //Resize by the same value to keep aspect ratio 
    var width = (int)(frame.Width * value); 
    var height = (int)(frame.Height * value); 

    //Image resizing removed... 
} 

Resize метод сам по себе работает, потому что я могу передать любое значение для него, и соотношение сторон сохраняется. И width, и height и изменены на то же значение.

Проблема в том, что изменение размера путем перемещения одного из ручек размера не работает должным образом. Кроме того, изображение теряет соотношение сторон. В MouseMove случае у меня есть:

if (e.Button == MouseButtons.Left) 
{ 
    //Get mouse position delta 
    var x = mousePosition.X - e.Location.X; 
    var y = mousePosition.Y - e.Location.Y; 

    if (x == 0 && y == 0) 
     return; 

    bool doY = false; 
    var diff = x; 

    if (x == 0 && y != 0) 
    { 
     diff = y; 
     doY = true; 
    } 

    float width = frame.Width + diff; 
    float amount = frame.Width/width; 

    if (doY) 
    { 
     float height = frame.Height + diff; 
     amount = frame.Height/height; 
    } 

    Resize(amount); 
} 

При попытке изменения размера, перемещая курсор мыши, соотношение сторон не соблюдается. В приведенном выше коде я определяю, было ли изменение в x или y, и, в зависимости от того, какое значение изменилось, я определяю значение изменения размера.

Есть ли лучший способ получить правильные x и y дельтами, и, в зависимости от того, какая рукоятка перемещается, измените размер изображения, сохраняя соотношение сторон?

Answer 1

Вы, кажется, чрезмерно усложняете рутину. Подход для этого должно быть что-то просто, как:

Store the initial size of your control on load.

On resize, compare the new size of the control and choose the most significant dimension change - width or height - base on some logic, e.g. the biggest one.

Calculate the ratio by which the dimension is changed, by comparing its new amount to the stored one.

Then apply this ratio by changing the other dimension in code.

Finally store the new size for future reference.

Это должно сделать это. Нет Mouse_Move необходим мониторинг.

Answer 2

Попробуйте следующий подход. Создайте собственный элемент управления с большим стилем.

class SizeablePictureBox : PictureBox 
{ 
    protected override CreateParams CreateParams 
    { 
     get 
     { 
      const int WS_SIZEBOX = 0x40000; 

      var cp = base.CreateParams; 
      cp.Style |= WS_SIZEBOX; 

      return cp; 
     } 
    } 
} 

Поместите его на форму, установите свойство макета. Если установлено значение Zoom, соотношение сторон останется неизменным.

var pictureBox = new SizeablePictureBox { Parent = this, Width = 500, Height = 500 }; 
pictureBox.BackgroundImageLayout = ImageLayout.Zoom; 
pictureBox.BackgroundImage = Image.FromFile("pic.jpg"); 

Готов! Пользователь может изменить размер элемента управления с помощью мыши. Размеры изображения будут меняться автоматически.