Question

我一直在努力实现可缩放的图像映射。我正在使用缩放和变换来利用CSS过渡。到目前为止，它一直很好用。但是，我在使用translate时发现了一个问题。图像被切断，无法再滚动。

一般来说，这个想法是当用户点击一个点时，它会缩放以适应屏幕高度或原始大小。此外，它转换为保持点击的位置，以屏幕为中心。

有没有办法让翻译的图像也可以滚动，这样用户可以放大然后滚动大图像并缩小而不会切断图像？

这是我到目前为止所做的。我建议玩全屏以获得更好的体验：

var img = document.getElementById('img');
var zoommed = true;
img.addEventListener('click', (e) => {
  let contentHeight = 600;
  let scale = !zoommed ? 1 : contentHeight / img.offsetHeight;

  img.style.transform = `scale(${scale}) translate(${-e.offsetX*scale + 200}px, ${-e.offsetY*scale + 300}px)`;
  img.parentElement.style.width = `${img.offsetWidth*scale}px`;
  img.parentElement.style.height = `${img.offsetHeight*scale}px`;
  zoommed = !zoommed;
})

body {
  background-color: lightgray;
}

#screen {
  width: 400px;
  height: 600px;
  overflow: scroll;
}

#wrapper {
  overflow: hidden;
}

#img {
  transform-origin: 0 0;
  transition: 0.5s all;
}

<div id="screen">
  <div id="wrapper">
    <img id="img" src="https://ionicframework.com/docs/demos/src/scroll/www/assets/map.jpeg">
  </div>
</div>

如何使缩放和转换的图像可滚动？

0 个答案: