So… lets discuss principle for a minute. I’m gonna get mathsy, so I perceive if you wish to skip this publish 
A field could be outlined by 2 factors. Particularly, in an internet browser when defining a field, you outline two factors in abstraction: the highest left nook (x,y), and the underside proper nook (x+width, y+peak). The browser can then extrapolate the remainder of the field’s sides from that info (x,y,w,h). Right here’s my demonstration field. It’s a sq., however it doesnt matter what rectangle it’s, the next holds true.
You outline side ratio as width/peak; I’m really going to outline is as peak/width; these are successfully equal statements: w/h = 1/(h/w) … you get a quantity both means round. So why have I outlined it peak/width?
In case you discovered maths in an american system, the subsequent bit ought to ring some bells: I’m going to name my peak the rise, and my width the run. I’m defining a slope of a line. And that is sensible, in our image. If i outline my line to undergo the highest left nook of the field, the slope of the road h/w corresponds to drawing a line from the highest left nook of the field, by way of the underside proper nook of the field:
Now right here’s the place resizing is available in. If you wish to keep your side ratio, what you might be saying is the slope of that line can’t change. You’re going to maneuver one nook of the field (for demonstration functions, shall we say you’re shifting the underside proper nook). We now have two methods of resizing the field, as a result of there’s really 3 well-defined factors on our line.
(“Three? the place’s the third?”)
If the road bisects the field, from high left to backside proper, the road should additionally cross by way of the precise heart of the field; the middle level could be discovered from the highest left nook by going half your peak and half your width. (That is the place utilizing Paint considerably fails me, as i’m… going to need to approximate the middle of the field. However you get the purpose.)
For the needs of concrete demonstration, I’m going to provide my field some numbers:
The highest left nook of my field is at 40,40. The underside proper nook of my field is at 100,100; my side ratio is 1/1 (a sq.), and so my midpoint have to be at 70,70.
Anchoring
If we’re moving the bottom-right corner of the box, we are redefining our box; the bottom-right corner must be part of the box. There are now two (commonly used) ways of redefining the box: Anchoring from the Middle, and Anchoring from the Top Left (or more generally speaking: Anchoring from the opposite corner from which you’re moving). Which you choose is up to you.
Anchoring from the Middle
You’ve probably seen this one in drawing applications; when you anchor in the middle, the middle of the box stays still. We’re moving the bottom right corner, and we want to keep the aspect ratio the same.
If I move my bottom right corner outwards along the line, in order for the middle point to stay fixed, the top left corner must move the same distance in the opposite direction; if my bottom-right corner goes from 100,100 to 120,120, then my top-left corner which started at 40,40 must move to 20,20, in order for the midpoint to remain at 70,70.
borrows GIF from the internet for demonstration. Demo does not retain aspect ratio, but it shows the anchoring from the middle.
Anchoring from Top Left (Opposite Corner)
You’ve definitely seen this one – resize your browser window, and you’ll see an example. If i move one corner of the box, the opposite corner is going to be my anchor; that point will not move. So if I move my bottom right corner to 120,120, the top left corner stays at 40,40, and the middle has to move; it’ll end up at 80,80. My aspect ratio is maintained, and the world’s happy.
(this doesnt show maintaining an aspect ratio either, but it demonstrates the anchoring type)
So step 1 will be figuring out which type of anchoring you want to do, as it changes the code and the maths you need to do. Then, we talk about something we’ve taken for granted…
Maintaining the Aspect Ratio
So we’ve so far just generally breezed over the statement “we’ll keep the aspect ratio”. If you go back to our paint drawing:
If we are moving the bottom right corner, as long as we put it down on the green line anywhere, we’re good.
But the mouse isnt limited to the green line. The mouse can go anywhere. How do we handle it when the user puts the mouse somewhere that ISNT on the green line? What if it’s somewhere over here?
Well, we cant put the corner there; it won’t have the right aspect ratio. So we’re going to have to change one or both of the dimensions to get it back on the green line.
There’s a couple of options here. Paul’s suggestion above would say “ignore the height. take the new width, put the corner on the green line so that the width is where the mouse pointer is; that’s your new box.” (That’s the black dot)
You can of course do the opposite; ignore the width and use the height; effectively the same code, but using the other two variables. (That’s the cyan dot.)
You can try and be clever; if the mouse is above the line, use the width; if it’s below the line, use the height; this is “using the longest dimension”. (In my example above, you would use the width, and put the point at the black dot)
You could also try and do some maths and figure out the closest point on the line to the cursor, but that feels a bit excessive. Or maybe it doesn’t. That’s up to you, again. (That’s the orange dot.)
So… the questions now return to you. Have a think about what you want the code to do; where you want to anchor, and where you want to end up when the mouse isnt on the aspect ratio line. We can help from there.
