перетащите масштабированный холст HTML

Question

Я работаю над приложением canvas и реализовал функцию увеличения и уменьшения масштаба, используя scale () и translate (). После увеличения мой холст становится больше, чем на экране, поэтому я хочу реализовать функцию перетаскивания для всего холста.

Как я могу это сделать?

Answer 1

Что именно перетащить?

Ты имеешь в виду перетаскивать всю сцену холста? Это называется панорамированием мыши.

В случае mousedown начните панорамирование и сохраните положение мыши.

В событии mousemove переведите контекст (ctx.translate(x,y)) на разницу между текущей позицией мыши и исходной позицией, затем перерисовайте сцену.

При событии mouseup прекратите панорамирование.

(Есть более сложные способы, например, вы можете реализовать полосы прокрутки внутри или снаружи холста)