有没有办法只在svg-pan-zoom.js库中垂直或水平放置

时间:2016-04-11 16:41:31

标签: svgpanzoom

这在文档中并不明显(如果你可以调用README.md文档;)),但svg-pan-zoom库可能支持(仅)垂直/水平拟合,但如何?通过fit方法已经支持最佳拟合,并且工作正常。

名为contain的方法可能是使用的方法,但是当我调用它时,它有时会做一个,有时会做另一个。

我知道我可以自己做这件事和/或为这个漂亮的OSS做出贡献,只是检查支持是否已经存在。

1 个答案:

答案 0 :(得分:3)

事实证明你可以自己做,虽然它需要几行代码;)

contain方法故障单,但请注意,如果您需要专用按钮进行垂直/水平拟合,则需要计算两种方法中的哪一种 - fit或者你想要使用的contain

为了做到这一点,你需要找出SVG是否是"肖像"或"风景" - 意思是,如果宽度小于高度(前者)或不是(后者)。

这很容易做到,您只需拨打panZoom.getSizes()(通过调用panZoom函数获取svgPanZoom)并查看viewBox.width vs {{1 }}。如果宽度较大,你就会在风景中 - 你得到了图片(双关语)。

因此,如果您处于风景中且想要横向调整,那么它与最适合的相同,因此您只需拨打viewBox.height即可。如果您想垂直放置,请拨打fit

同样,如果你是纵向并且想要垂直放置,这与最适合相同,所以只需拨打contain,否则请拨打fit