Изображение сфокусировано по положению мыши

Question

Я пишу сценарий с Fabric.js для увеличения изображения в текущей позиции мыши. Я сделал некоторый прогресс, но где-то есть ошибка.

Дело 1: Держите мышь в одной точке и увеличивайте с помощью колеса мыши.

Результат: Работает отлично, масштабирование изображения в этом конкретном пикселе.

Корпус 2: Увеличьте немного места в одном положении (3-5 раз с помощью колеса мыши), затем переместите мышь в новое положение и увеличьте масштаб.

Результат: Прекрасно работает для первой точки, но после перехода к другой точке и масштабирования позиция изображения неверна.

Мой код находится в этой скрипкой:

https://jsfiddle.net/gauravsoni/y3w0yx2m/1/

Я подозреваю, что что-то не так с логикой позиционирования изображения:

imgInstance.set({top:imgInstance.getTop()-newMousY,left:imgInstance.getLeft()-newMousX}); 

Что происходит не так?

Answer 1

Ключом к решению этой головоломки является понимание того, как изображение увеличивается. Если мы используем коэффициент масштабирования 1,2, изображение становится на 20% больше. Зададим 1.2 переменной factor и сделайте следующее:

image.setScaleX(image.getScaleX() * factor); 
image.setScaleY(image.getScaleY() * factor); 

Верхний левый угол изображения остается в том же месте, в то время как изображение увеличивается. Теперь рассмотрим точку под курсором мыши. Каждый пиксель выше и слева от курсора становится на 20% больше. Это смещает точку под курсором на 20% вниз и вправо. Между тем, курсор находится в том же положении.

Чтобы компенсировать смещение точки под курсором, мы перемещаем изображение так, чтобы точка возвращалась под курсором. Точка двинулась вниз и вправо; мы перемещаем изображение вверх и оставляем на том же расстоянии.

Обратите внимание, что изображение могло быть перемещено в холсте перед операцией масштабирования, поэтому горизонтальное положение курсора на изображении равно currentMouseX - image.getLeft() перед масштабированием, а также для вертикальной позиции.

Это, как мы вычислить смещение после масштабирования:

var dx = (currentMouseX - image.getLeft()) * (factor - 1), 
    dy = (currentMouseY - image.getTop()) * (factor - 1); 

Наконец, мы компенсировать смещение, перемещая точку назад под курсором:

image.setLeft(image.getLeft() - dx); 
image.setTop(image.getTop() - dy); 

Я интегрирован этот расчет в ваш демонстрационной версии и сделал следующую скрипту:

https://jsfiddle.net/sbpag9fr/3/

Я также выполнил операцию уменьшения.