I have a question:
Am I getting x, y coordinates correctly?
How to do if x, y are equal (0.5, 0.5), then the center of the picture will be placed in the upper right corner of the blue area?

If scale = 1, the picture will occupy the entire surface of the blue area.
If the picture is square and scale = 1, then the picture will occupy the height of the entire blue area, and the width will crawl out a bit. Accordingly, reducing the scale of the picture will decrease on the blue area, if scale = 0 then the image will not be visible at all, and if 0.5 then the picture = half of the blue area!

How to do this with scale?

So I sketched my example on which I stopped, and nothing else comes to mind:

<body> <div id="coords">&nbsp;</div> <div id="scale">&nbsp;</div> <div id="block"> <div id="joystick"> <div id="mover" style=" background: url(http://img.youtube.com/vi/JMJXvsCLu6s/mqdefault.jpg) 100% 100% no-repeat; background-size:100% 100%;"></div> </div> </div> </body>

Link to codepen.io

Thank!

  • I think I understand you :) Do you want the upper left to remain in the same position with the scale of the lower right corner and to keep the proportions with the scale? - user220409 4:08 pm
  • @OlmerDale See, I have a scale value in the example. First question: Did I find it correctly ??, Second question: how to do this if the center of the picture is in the upper right corner, is the value x, y = 0.5,0.5? - John Freeman

1 answer 1

Scale - scale , this is just the ratio of the coefficient to the side length.

If we assume that the original side is exactly 360 , and the current one is 90 , then we can find the scale as follows:

 90 / 360 = 0.25

Conversely, if the current dimensions of the side are known, let it be 90 and the scale of .25 , then the initial values ​​can be found -

 90 / .25 = 360 // исходный размер стороны

I hope clearly explained to cope with the scale on their own.

Well, then everything is just as simple. Find the center of the handle, the size of which is 360x360 and the center of the figure, the size of which is 720х720 , in which this handle should be inscribed. In the starting state, the scale of the handle will be 1х1 , and the length between the centers will be 0 .

Now imagine that you moved the handle to the center in the upper right corner and thus the scale should be 0.5х0.5 . Therefore, you need to find the length between two points, it will also be the maximum distance from the center, let this length be 500 . This means that by moving the handle from its original position to 500px its size will change from 360x360 to 180x180 , that is, its scale will be halved. We find it so -

 0.5 * 500 = 0.001 // это коэффициент масштаба к длине 500

Now all that is left for us is to find the length between its center and the center of the figure in which it is inscribed with a dred, multiply it by 0.001 and subtract 1 from it, since we move away from the center and the resulting value will be the scale value of the handle.

  • side is the width and height? - John Freeman
  • yes, width and height . you want to do dzhostik? - user220409
  • I want to do this: if the scale #mover = 1, then it must close the joystick (#joystick) in order to become like a joystick, and if the scale is 2 then twice as large - John Freeman