4

Question:

I want to bound the pan of the SVG so that when no zoom has been applied, no pan is possible, however as you zoom in you can pan around within the bounds of the SVG.

Visual Example: In the image below the zoomed viewport in the center would be able to pan to the edges of the SVG but no further.

enter image description here

However this is very different from the pan example given and I can't work our how to alter it to behave as such. How would you do this? (also am I missing an easy built in way to do this)?

Problems I've bumped into trying to solve this

  1. Each of the limits sets the movement in pixels allowed in the correct direction. i.e. bottomLimit = 200 allows you to move up by 200 pxs. So at default zoom I need all the limits set to 0, however I can't work out how to recognise default zoom as realZoom changes depending on the browser window size.
  2. In the visual example, if we want to set bottomLimit to bound the SVG correctly, it needs to be equal to x, but I can't work out how to calculate x. (topLimit would need to be equal to y, etc.)
Dominic Woodman
  • 719
  • 2
  • 8
  • 18
  • Based on pan example you should replace `gutterWidth` with the current width of SVG (`getSizes().width * getSizes().realZoom`). And the same for height. – bumbu Jun 22 '16 at 11:08
  • @bumbu Could you show me? When I try and do that, the gutters become so large, pan breaks completely https://jsfiddle.net/930j458h/3/ (at least I think that's whats happening) – Dominic Woodman Jun 22 '16 at 13:54
  • Sorry, I'm on holidays. Just console.log all variables and see which values seem to be wrong. – bumbu Jun 23 '16 at 19:35

1 Answers1

3

Based on https://jsfiddle.net/930j458h/3/ example:

  1. Check the value of panZoom.getSizes()
  2. Figure out that getSizes().width is the width of entire SVG block, and getSizes().viewBox.width is the size of viewBox. We're interested in viewBox.
  3. Replace getSizes().width with getSizes().viewBox.width and everything magically works

https://jsfiddle.net/930j458h/4/

bumbu
  • 1,297
  • 11
  • 29
  • 2
    If you have an image which fills the viewport and no zooming out is allowed and you want to enable panning only when zoomed in and within the boundaries of the image then it's `, gutterWidth = (zoomPan.getSizes().width) , gutterHeight = (zoomPan.getSizes().height)` – hb20007 Jun 29 '17 at 12:48