CODEWITHSUNDEEP
svgpanzoom
rawpower
rawpower

Reputation: 2180

Is there a way to fit only vertically or horizontally in svg-pan-zoom.js library

This is not obvious from the documentation (if you can call README.md documentation ;) ), but the svg-pan-zoom library probably supports (only) vertical/horizontal fit, though how? Best fit is already supported through fit method and works fine.

The method called contain is probably the one to use, yet when I call it sometimes it does one and sometimes the other.

I know I can probably do this myself and/or contribute to this nice OSS, just checking if the support is already there.

Upvotes: 0

Views: 1011

Answers (1)

rawpower
rawpower

Reputation: 2180

Turns out you can do this yourself, though it requires a few lines of code ;)

The contain method is the ticket, but note that if you need dedicated buttons for vertical/horizontal fit, you need to calculate which of the two methods - fit or contain you want to use.

In order to do so, you need to find out if the SVG is "portrait" or "landscape" - meaning, if the width is smaller than height (former) or not (latter).

This is easy to do, you just call panZoom.getSizes() (where you're obtained panZoom by calling svgPanZoom function) and check viewBox.width vs viewBox.height. If width is larger, you're in landscape - you get the picture (pun intended).

So, if you're in landscape and want to fit horizontally, it's the same as best fit, so you just call fit. If you want to fit vertically, call contain.

Similarly, if you're in portrait and want to fit vertically, this is the same as best fit, so just call fit otherwise call contain.

Upvotes: 3

Related Questions