admin管理员组

文章数量:1406924

is there a way other than resetting the zoom to force image not to get lost pletely while panning using Panzoom library

const element = document.querySelector('#scene');

const zoomLevels = [0.1, 0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2, 2.5, 3];
let currentZoomLevel = zoomLevels[4];
const text = document.querySelector('#text');

let panZoomController = panzoom(element);
div {
  overflow: hidden;
  border: 3px solid red
}

img {
  cursor: move;
}
<script src="/[email protected]/dist/panzoom.min.js"></script>

<body>
  <div>
    <img id="scene" src=".png">
  </div>

  <br/>
<span>Image should not be Dragged /panned out of the view</span>
</body>

is there a way other than resetting the zoom to force image not to get lost pletely while panning using Panzoom library

const element = document.querySelector('#scene');

const zoomLevels = [0.1, 0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2, 2.5, 3];
let currentZoomLevel = zoomLevels[4];
const text = document.querySelector('#text');

let panZoomController = panzoom(element);
div {
  overflow: hidden;
  border: 3px solid red
}

img {
  cursor: move;
}
<script src="https://unpkg./[email protected]/dist/panzoom.min.js"></script>

<body>
  <div>
    <img id="scene" src="https://www.probytes/wp-content/uploads/2018/01/5-1.png">
  </div>

  <br/>
<span>Image should not be Dragged /panned out of the view</span>
</body>

  • javascript
  • panzoom
Share Improve this question edited Aug 14, 2019 at 20:29 dota2pro asked Jul 5, 2019 at 20:01 dota2prodota2pro 7,9148 gold badges51 silver badges87 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 3

It seems there is bounds property

const element = document.querySelector('#scene');

const zoomLevels = [0.1, 0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2, 2.5, 3];
let currentZoomLevel = zoomLevels[4];
const text = document.querySelector('#text');

let panZoomController = panzoom(element, {
  bounds: true,
  boundsPadding: 0.1
});
div {
  overflow: hidden;
  border: 3px solid red
}

img {
  cursor: move;
}
<script src="https://unpkg./[email protected]/dist/panzoom.min.js"></script>

<body>
  <div>
    <img id="scene" src="https://www.probytes/wp-content/uploads/2018/01/5-1.png">
  </div>

  <br/>
  <span>Image should not be Dragged /panned out of the view</span>
</body>

let panZoomController = panzoom(element, {
  bounds: true,
  boundsPadding: 1
});

本文标签： javascript( panzoom ) How to stop Image from panning out of the viewStack Overflow

版权声明：本文标题：javascript - ( panzoom ) How to stop Image from panning out of the view? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744977422a2635604.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。