Gibt es eine Möglichkeit, nur vertikal oder horizontal passen in svg-pan-zoom.js Bibliothek

Question

Dies ist nicht offensichtlich aus der Dokumentation (wenn Sie README.md Dokumentation aufrufen können;)), aber die svg-pan-zoom Bibliothek wahrscheinlich unterstützt (nur) vertikal/horizontale Passform, obwohl wie? Die beste Anpassung wird bereits durch die Methode fit unterstützt und funktioniert einwandfrei.

Die Methode contain ist wahrscheinlich die eine zu verwenden, aber wenn ich es manchmal nenne, tut es eins und manchmal das andere.

Ich weiß, dass ich das wahrscheinlich selbst machen kann und/oder zu diesem netten OSS beitragen kann, indem ich einfach überprüfe, ob der Support schon da ist.

Answer 1

stellte sich heraus, Sie dies selbst tun können, obwohl es ein paar Zeilen Code erfordert;)

Die contain Methode ist das Ticket, aber beachten Sie, dass für vertikale/horizontale fit spezielle Tasten benötigen, können Sie müssen Sie berechnen, welche der beiden Methoden - fit oder contain Sie verwenden möchten.

Dazu müssen Sie herausfinden, ob das SVG "Porträt" oder "Landschaft" ist - das heißt, wenn die Breite kleiner als die Höhe (früher) oder nicht (letztere) ist.

Dies ist einfach zu tun, Sie panZoom.getSizes() einfach anrufen und überprüfen viewBox.width vs viewBox.height (wo man panZoom durch den Aufruf svgPanZoom Funktion erhalten ist). Wenn die Breite größer ist, sind Sie in der Landschaft - Sie erhalten das Bild (Wortspiel beabsichtigt).

Also, wenn Sie in der Landschaft sind und horizontal passen möchten, ist es das gleiche wie am besten passen, also rufen Sie einfach fit. Wenn Sie vertikal anpassen möchten, rufen Sie contain.

Ebenso, wenn Sie im Hochformat sind und vertikal passen möchten, ist dies die gleiche wie am besten passen, also rufen Sie einfach fit sonst rufen Sie contain.