Je travaille sur une application de canevas et j'ai implémenté une fonction de zoom avant et arrière en utilisant scale() et translate(). Après avoir fait un zoom avant, ma toile est en fait plus grande qu'elle ne l'est sur l'écran, donc je veux implémenter une fonction glisser-déposer pour toute la toile.faire glisser une toile html mise à l'échelle
Comment puis-je le faire?
Faites glisser et déposez quoi exactement?
Vous voulez dire faire glisser toute la scène de toile autour? C'est ce qu'on appelle le panoramique de la souris.
En cas mousedown, commencer à mouvement horizontal et enregistrer la position de la souris
En cas mousemove, traduire le contexte (ctx.translate(x,y)) par la différence entre la position actuelle de la souris et la position d'origine, redessiner alors la scène.
Dans l'événement mouseup, arrêtez le panoramique.
(Il existe des moyens plus durs, par exemple, vous pourriez mettre en œuvre à l'intérieur ou à l'extérieur des barres de défilement de la toile)
je ne peux pas redessiner toute la scène chaque mouvement de la souris - il faut beaucoup de temps. –
Vous devriez être capable de le faire, mais vous devrez peut-être commencer à utiliser des optimisations. Par exemple, vous ne voulez que redessiner les objets que l'utilisateur peut actuellement voir avec le canevas et passer le dessin de n'importe quoi hors écran. –