如何在 JavaScript 中重新创建浏览器缩放功能？

Question

所以我有一个包含图像的页面，可以单击该页面来显示放大的图像。我希望允许用户进一步放大，在图像的各个部分上进行捏合动作/滚轮，就像在浏览器中通常可以做的那样。但是，一旦他们单击图像缩小，我希望恢复页面的原始比例，无论他们放大多少。

由于似乎没有办法通过js直接设置浏览器的缩放级别，所以我想重写浏览器缩放并编写自己的代码。缩放时，缩放容器会填满并覆盖整个页面。然后我覆盖“wheel”事件的默认值（ctrlKey == true）。但当 ctrlKey == false 时我不会覆盖它，并且我将 Zoom-container-container 设置为使用滚动来溢出，以便我可以使用浏览器的正常滚动功能在缩放图像内移动。

从scale = 1开始时它可以正常工作，但是我在已经缩放了一点并将光标移动到图像的另一部分以进一步缩放的情况下遇到了麻烦。这样做，变焦的焦点总是比预期跳得更远，但我不确定为什么。也许设置变换原点不是正确的方法......

html

<div class="zoom-container-container">
    <div class="zoom-container">
        <img class="zoom-image">
    </div>
</div>

CSS

.zoom-container-container
{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    overflow-x: auto;
    
    z-index: -99;
    background-color: var(--background-color);
    pointer-events: auto;
    opacity: 0.0;
    transition-property: opacity, z-index;
    transition-duration: 0.25s, 0s;
    transition-delay: 0.0s, 0.25s;
}
.zoom-container
{
    position: relative;
    width: 100%;
    height: 100%;   
    transform-origin: var(--zoom-origin-x) var(--zoom-origin-y);    
    transform: scale(var(--zoom-scale));
}
.zoom-image
{
    position:relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.zoom-container-container.visible
{
    z-index: 99;
    cursor:zoom-out;   
    opacity: 1.0; 

    transition-property: opacity, z-index;
    transition-delay: 0s, 0s;
}

js 事件：

zoomImage.addEventListener('pointerup', (e) => 
{
    if(e.button == 0)
    {
        zoomOut();
    }
    
    zoomScale = 1.0;
    zoomContainer.style.setProperty('--zoom-scale', zoomScale);
    zoomContainer.style.setProperty('--zoom-origin-x', `${50}%`);
    zoomContainer.style.setProperty('--zoom-origin-y', `${50}%`);
    
});
zoomImage.addEventListener('wheel', (e) =>
{
    const rect = zoomContainer.getBoundingClientRect();
    if(e.ctrlKey) 
    {
        const cursorX = e.clientX - rect.left;
        const cursorY = e.clientY - rect.top;

        const newScale = Math.max(1.0, zoomScale - e.deltaY * zoomScaleMult);
        zoomScale = newScale;
        
        const originX = (cursorX / rect.width) * 100;
        const originY = (cursorY / rect.height) * 100;
        zoomContainer.style.setProperty('--zoom-origin-x', `${originX}%`);
        zoomContainer.style.setProperty('--zoom-origin-y', `${originY}%`);
        zoomContainer.style.setProperty('--zoom-scale', zoomScale);

        
        e.stopPropagation();
        e.preventDefault();   
    }
});

Answer 1

您可以利用

transform: scale(1.5)

var myDiv = document.querySelector(".container");
var img = myDiv.querySelector("img");

var scale = 1.0

myDiv.addEventListener('mousemove', function(ev) {
  const rect = myDiv.getBoundingClientRect();
  const x = event.clientX - rect.left;
  const y = event.clientY - rect.top;
  img.style.transformOrigin = x + "px " + y + "px"

})

myDiv.addEventListener('wheel', function (ev) {
  ev.preventDefault();

  scale += event.deltaY * -0.001;

  // Apply scale transform
  img.style.transform = `scale(${scale})`;
})

.container {
  width: 600px;
  height: 200px;
  margin: auto;
  border: 1px solid gray;
  overflow: hidden;
}

img {
  width: 100%;
  transform: scale(1.0);
}

<div class="container">
  <img src="https://picsum.photos/id/200/600/200">
</div>