Discussion :

[philoo91]

Bonjour Toutes & Tous,

Je code en JS alors je poste ici.

Une div container de la largeur de l'écran et d'une hauteur de par exemple 1/3 de celle du navigateur fait office de zone de visualisation de l'aire de travail. (Nommée divCtr)
Ce qui nous donnerais par exemple une div de 1200px(Width) X 400px(Height).
Elle est affichée avec la propriété style CSS overflow à auto
De sorte qu'a l'intérieur de celle ci une seconde div (Nommée divWA) faisant office de zone de travail elle aussi container mais bien plus large et haute "exprès" exemple 5000px(width) X 5000px(Height) puisse être scrollée par les ascenseurs vertical et horizontal mais aussi par un principe de cliqué déplacer.

Cette seconde div (divWA) contient un carré positionné de sorte qu'a l'affichage il est au centre de l'écran et donc au centre de la div de visualisation (divCtr).
Mais ce carré n'est en aucune façon centré dans la div zone de travail div interne (divWA)
Un facteur de grossissement/réduction va influer sur la hauteur et la largeur de la div interne (divWA) et de fait agir sur la taille du carré.

Jusque là tout a été codé.
La div divWA grossie/diminue le carré grandi/rapetisse.

Le problème exposé :
Mais il faut trouver la formule pour recalibrer la valeur de la propriété scrollLeft et la valeur de la propriété scrollTop de la div divCtr à la suite d'un zoom ou d'un dé zoom de sorte que le carré agrandi ou rapetissé soit toujours au centre de la div de visualisation (divCTR)
Le but final obtenir un zoom/dé zoom centré.

Je précise une chose : Ne vous donnez pas du mal à me répondre d'utiliser la propriété CSS style transform avec la fonction scale(x,y..(z)).
En effet, : cela grossi tout le contenu de la div. Dont l'épaisseur des traits ou le texte (entre autre). Je veux pouvoir choisir ce que je grossi ou réduit.

Bonne chance !

Merci si vous avez compris mon problème

Pour vous y aider je vous place des captures (sciemment épurées) de mon écran durant deux exemples de zooms :
(100% à 101% et 100% à 110%) .