（ panzoom ）如何阻止图像平移出视图？答案

【问题标题】：( panzoom ) How to stop Image from panning out of the view?（ panzoom ）如何阻止图像平移出视图？
【发布时间】：2019-11-16 10:04:56
【问题描述】：

除了重置缩放以强制图像在使用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/panzoom@8.1.0/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>

【问题讨论】：

标签： javascript panzoom

【解决方案1】：

好像有bounds属性

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/panzoom@8.1.0/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>

【讨论】：

【解决方案2】：

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

【讨论】：