为工作区建立可移动视口

Question

我想实现一个非常大的工作空间来放置对象，但是为了方便工作，我想制作一个特殊的“视口”，为用户显示一部分工作空间，并且可以在工作空间内调整该“视口”的大小或在其中移动。例如，在Photoshop中，放大图像时，只看到图像的一部分，然后可以转到要编辑的位置。

如何用HTML来实现？

Answer 1

您可以使用一些CSS transform（尤其是scale()和一些translate()）：

document.querySelector('input[type="range"]').addEventListener('input', e => {
  document.querySelector('.resizable').style.setProperty('--size', e.target.value)
})

.container{
  width:300px;
  height:300px;
  overflow-x: scroll;
  overflow-y: scroll;
  border: 1px solid black;
}
.resizable{
  transform: 
    translate(calc((var(--size) - 1) * 50%),calc((var(--size) - 1) * 50%)) 
    scale(var(--size));
  height: 300px;
  width:300px;
  --size:1;
}

<div class="container">
  <div class="resizable">
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.   Sed turpis nibh, volutpat in egestas ac, pellentesque ac lacus. Curabitur at aliquam mi. Nullam nec imperdiet urna. Maecenas sodales malesuada urna, auctor mattis orci. Etiam purus erat, cursus quis nunc faucibus, mollis scelerisque nisi. Nullam sit amet commodo nisi. Proin aliquet quis leo ac rutrum. Curabitur dignissim, augue vel rutrum viverra, tellus mi rutrum elit, aliquam vulputate ipsum augue et ante. Proin lacinia erat ut risus lacinia congue. Nulla ac commodo metus, at viverra mi. Fusce aliquet sodales vulputate. Fusce a tempus nibh, id pharetra lacus. Cras pulvinar congue lacus at aliquet. Nam consequat fringilla augue vel faucibus. Proin non gravida purus. Aenean ut faucibus sem.</div>
  </div>
</div>
Drag me to resize the lorem ipsum:<br/>
<input type="range" value="1" step="0.5" min="0.5" max="4" />

在CodePen上尝试（至少直到堆栈片段服务器关闭...）