Keep button layout proportional to image resizing

Question

I am trying to create a Winforms application and on one of the screens, I have an image and some buttons generated at runtime. Now I want these buttons to always be proportional to the image.

for example, the Hand1 button should always stay where Image Hand1 is

This is my original image.

but when you resize the form, it becomes like

I want these buttons to not change their size and always remain proportional to the image.

ImageSizeMode images are StretchImage, and the buttons are not attached (otherwise they do not move and do not begin to stretch / contract.

How can I achieve this behavior.

Answer 1

, :

. , (). , , /, . , "" .

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

public partial class Form1 : Form
{
    // X, Y scaling variables for btn1
    private float _btn1xScale;
    private float _btn1yScale;

    public Form1()
    {
        InitializeComponent();

        // The scale is really the % of btn X & Y along image width and height:
        // Calculate X and Y scale from initial location and position in image
        // Has to happen AFTER InitializeComponent is called!
        _btn1xScale = btn1.Location.X / (float)pictureBox1.Width;
        _btn1yScale = btn1.Location.Y / (float)pictureBox1.Height;
    }

    private void pictureBoxResize(object sender, EventArgs e)
    {
        // adjust position based on 
        btn1.Location = new Point(
            (int)(pictureBox1.Width * _btn1xScale), 
            (int)(pictureBox1.Height * _btn1yScale));
    }
}

Fancier:

using System;
using System.Collections.Generic;
using System.Drawing;
using System.Windows.Forms;

public partial class Form1 : Form
{
    private List<ControlScaler> _buttonsToScale = new List<ControlScaler>();

    public Form1()
    {
        InitializeComponent();

        // Has to happen AFTER InitializeComponent is called!
        _buttonsToScale.Add(new ControlScaler(btn1, pictureBox1));
        _buttonsToScale.Add(new ControlScaler(btn2, pictureBox1));
    }

    private void pictureBoxResize(object sender, EventArgs e)
    {
        foreach (var control in _buttonsToScale)
            control.AdjustPositionToScale();
    }
}

public class ControlScaler
{
    // X, Y scaling variables
    private float _btn1xScale;
    private float _btn1yScale;

    private Control _scaledControl;
    private readonly Control _scaleTo;

    public ControlScaler(Control scaledControl, Control scaleTo)
    {
        _scaledControl = scaledControl;
        _scaleTo = scaleTo;

        _btn1xScale = scaledControl.Location.X / (float)scaleTo.Width;
        _btn1yScale = scaledControl.Location.Y / (float)scaleTo.Height;
    }

    public void AdjustPositionToScale()
    {
        var newLocation = new Point(
            (int)(_scaleTo.Width * _btn1xScale),
            (int)(_scaleTo.Height * _btn1yScale));

        _scaledControl.Location = newLocation;
    }
}

Answer 2

hand1. .

, c d . a, b, c, d :

double dblHand1X, dblHand1Y;

private void Form1_Load(object sender, EventArgs e)
    {
        dblHand1X= (double)b / (double)pictureBox1.Width;
        dblHand1Y= (double)a / (double)pictureBox1.Height;
    }

private void pictureBox1_SizeChanged(object sender, EventArgs e)
    {
        int x, y;

        x = (int)(dblHand1X* (double)pictureBox1.Width) + pictureBox1.Location.X;
        y = (int)(dblHand1Y* (double)pictureBox1.Height) + pictureBox1.Location.Y;

        x -= d;
        y -= c;
        Hand1.Location = new Point(x, y);
    }

Answer 3

You will need to manually move the buttons.

• Select a source for all buttons. For example, the start of the Hand 1 button is likely (button.Width / 2; button.Height), and the start of the Foot 2 button is (0; button.Height).

• Calculate and save the position of the origin of the buttons: (OriginalX; OriginalY).

• When the shape is resized, multiply the initial positions on a scale (OriginalX * ScaleX; OriginalY * ScaleY). Then set the position of the button based on the new position of origin: (OriginalX * ScaleX - OriginX; OriginalY * ScaleY - OriginY).

Buttons should be anchored at the top left.