Menu
is there a way other than resetting the zoom to force image not to get lost completely 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.com/[email protected]/dist/panzoom.min.js"></script>
<body>
<div>
<img id="scene" src="https://www.probytes.net/wp-content/uploads/2018/01/5-1.png">
</div>
<br/>
<span>Image should not be Dragged /panned out of the view</span>
</body>
440
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.com/[email protected]/dist/panzoom.min.js"></script>
<body>
<div>
<img id="scene" src="https://www.probytes.net/wp-content/uploads/2018/01/5-1.png">
</div>
<br/>
<span>Image should not be Dragged /panned out of the view</span>
</body>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With