有没有办法在 svg-pan-zoom.js 库中只垂直或水平地适应
Is there a way to fit only vertically or horizontally in svg-pan-zoom.js library
这在文档中并不明显(如果您可以调用 README.md
文档 ;)),但是 svg-pan-zoom 库可能(仅)支持 vertical/horizontal fit,但是如何呢? fit
方法已经支持最适合并且工作正常。
称为 contain
的方法可能是要使用的方法,但当我调用它时,它有时会执行一个,有时会执行另一个。
我知道我自己可以做到这一点 and/or 为这个不错的 OSS 做贡献,只是检查支持是否已经存在。
原来你可以自己做,虽然它需要几行代码;)
contain
方法是票证,但注意,如果你需要vertical/horizontal适合的专用按钮,你需要计算两者中的哪一个方法 - fit
或 contain
你想使用。
为此,您需要确定 SVG 是 "portrait" 还是 "landscape" - 意思是宽度是否小于高度(前者)或不是(后者)。
这很容易做到,您只需调用 panZoom.getSizes()
(通过调用 svgPanZoom
函数获得 panZoom
)并检查 viewBox.width
与 viewBox.height
.如果宽度较大,则表示您处于横向 - 您会得到图片(双关语)。
因此,如果您处于横向并且想要水平适合,它与最佳适合相同,所以您只需调用 fit
。如果你想垂直适应,调用 contain
.
类似地,如果你是纵向的并且想要垂直适应,这与最佳适应相同,所以只需调用 fit
否则调用 contain
.
这在文档中并不明显(如果您可以调用 README.md
文档 ;)),但是 svg-pan-zoom 库可能(仅)支持 vertical/horizontal fit,但是如何呢? fit
方法已经支持最适合并且工作正常。
称为 contain
的方法可能是要使用的方法,但当我调用它时,它有时会执行一个,有时会执行另一个。
我知道我自己可以做到这一点 and/or 为这个不错的 OSS 做贡献,只是检查支持是否已经存在。
原来你可以自己做,虽然它需要几行代码;)
contain
方法是票证,但注意,如果你需要vertical/horizontal适合的专用按钮,你需要计算两者中的哪一个方法 - fit
或 contain
你想使用。
为此,您需要确定 SVG 是 "portrait" 还是 "landscape" - 意思是宽度是否小于高度(前者)或不是(后者)。
这很容易做到,您只需调用 panZoom.getSizes()
(通过调用 svgPanZoom
函数获得 panZoom
)并检查 viewBox.width
与 viewBox.height
.如果宽度较大,则表示您处于横向 - 您会得到图片(双关语)。
因此,如果您处于横向并且想要水平适合,它与最佳适合相同,所以您只需调用 fit
。如果你想垂直适应,调用 contain
.
类似地,如果你是纵向的并且想要垂直适应,这与最佳适应相同,所以只需调用 fit
否则调用 contain
.