Recently, WHEN I was writing a project for my company, I met the requirement of dragging, stretching, rotating components and then changing their height and width. I originally thought that “dragging is so easy, but if you stretch, you can just change width and height”, because there are eight points in the direction of dragging and stretching, and all calculations will be solved one by one, but
Amazing phenomenon
At first, there is no problem in testing the drag stretching of eight directions without adding rotation Angle, and its implementation method is not difficult, for example, dragging is the center point at the top of the component and changing the top value and height value, but if the rotation Angle is added, it seems to become weird
The analysis reason
We know that the rotate Angle can be changed with the rotate value of CSS3’s transform property, and if the rotate value is not changed, the component’s center is by default. So if the rotate value is changed, the component’s entire coordinate system is also changed
The blue square in the picture is the component, whose coordinate system is the blue XY coordinate system, which becomes the orange XY coordinate system by adding the rotation Angle of 45 degrees
It’s not going to be right to use the blue frame of reference to calculate the drag and pull, and we’re going to use the rotation transformation formula of the frame, remember?
Sort out your requirements
Because when we stretch the top, we only calculate the top and height values, ignoring the left value, thinking that the top changes only two values, but in fact, this is an ideal situation, such as the point V in the figure above, when we rotate to 45 degrees, stretch the top to ensure that the position of the point V remains the same, pay attention! Just to keep V in the original blue coordinate system, you still have to calculate the left value, which I have sketched in the following figure
In order to calculate, I assume that the height of the component is 100, after he was stretching height is 200, then stretching to 200 when the coordinate system for dark grey ` ` Y X, the answer is obvious, V abscissa point to dark grey origin of coordinates distance equals V point of the origin of coordinates to orange horizontal distance Combined with origin of coordinates of horizontal distance between the two
I ended up sketching a picture
So we have to make sure that when we drag and pull, E ‘F’ is equal to EF + OO ‘so one we have the Angle rotate and two we have the distance between the two coordinates OO’, So we’re going to be able to keep V in the horizontal position, and we’re just doing the x-coordinate, and the y-coordinate works the same way
