Javascript «перетаскивание» изображения через холст

Question

Существует много вопросов об этом, где предлагается решение - просто установить значения изображения top left и top down в положение мыши/касания, однако то, что я хочу сделать должен иметь фактическое движение перетаскивания. Независимо от того, где на холсте я нажимаю, если я перетаскиваю палец в правые пиксели x, я хочу, чтобы изображение перемещалось вправо x пикселей. То же самое происходит с левым, вверх и вниз.

У меня полная потеря относительно того, где можно начать с этого. Я буду обрабатывать мобильные события касания, поэтому мне кажется, что использование canvas.addEventListener('touchmove') будет лучшим вариантом, но я не уверен.

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

Answer 1

Получить точку начала взаимодействия (touchstart) и использовать ее для расчета того, сколько пальцев перемещено на экране (в обратном вызове touchmove) и добавить его в положение изображения (также в касании).

PS: Также я рекомендую использовать что-то вроде PIXI JS для материала canvas/WebGL ... если вам не требуется специальное решение.