Как правильно получить координаты и масштаб?

Question

[John Freeman]

У меня вопрос:
Я правильно получаю координаты x,y?
Как сделать если x,y равны (0.5, 0.5), то центр картинки будет размещаться в правом верхнем углу синей области?

Если scale = 1, картинка будет занимать всю поверхность синей области. если картинка квадратная и scale = 1, то картинка будет по высоте занимать всю синею область, а по ширине вылезать немного за пределы
соответственно уменьшая scale картинка будет уменьшаться на синей области, если scale = 0 значит картинку вообще не будет видно, а если 0.5 то картинка = половинка синей области!

Как такое сделать с масштабом???

Вот я набросал свой пример на котором я остановился, и больше ничего в голову не лезет:
Сам пример на codepen.io

Answer 1

[Kovalsky]

Не знаю правильно ли я понял задачу, но все же:

Вы для rel_top рассчитываете разницу между ui.position.top и начальным y вашего мувера, это значение будет отрицательно если вы уменьшаете ui.position.top. Поэтому чтобы в верхней части блока были положительные значения относительного расстояния по y, его расчет достаточно инвертировать.

Чтобы 0.5 для координат рассчитывалось на краях синего блока (то есть на 0.5 ширины/высоты зеленого блока), при расчете относительного расстояния надо использовать половину ширины зеленого блока или height/width_joystick умноженную на два (потому что вы зачем-то в этих переменных храните половину того значения, которое интуитивно понятно (нет) из названия переменной).

var rel_left = (ui.position.left - startLeft) / (width_joystick * 2); 
var rel_top = -(ui.position.top  - startTop) / (height_joystick * 2);

Имея все это, я думаю вы справитесь с расчетом scale)