放大可见图像的中心

Zooming in on the center of visible image?

本文关键字：图像 放大      更新时间：2023-09-26

所以，这是一个数学题。我正在做一个电子商务阅读器，我想对它进行编程，这样你就可以放大，但它不是从左上角放大，而是从中心放大。

@100%        @200% Currently   @200% Ideally      
----         --------          --------
|  |         |  |   |          | ---- |
----         ----   |          | |  | |
visible      |      |          | ---- |
size         --------          --------

缩放函数与范围从100到300的input slider绑定，然后转换为可见div 的百分比

function pageZoom() { // invoked onchange
 var outer = document.getElementById('viewer');
 var inner = document.getElementById('innerWindow');
 var zoomSlide = document.getElementById('zoomSlider');
 inner.style.width = zoomSlide.value + "%";
 var scrollShift = (zoomSlide.value - 1)/2; // This is the function that needs to change
 outer.scrollTop = scrollShift; // to update the scrollbars to the correct position
 outer.scrollLeft = scrollShift;
};

用这个作为html。。。

<div class="mainWindow dragscroll" id="viewer"> <!-- this element has the scroll bars -->
    <div id="innerWindow"> <!-- this element grows by input -->
        <img id="viewImgOne" /> <!-- set at 50% width -->
        <img id="viewImgTwo" /> <!-- set at 50% width -->
    </div>
</div>

我已经很久没有上过任何数学课了，所以我的代数很生疏。

 var body = document.body; // clientHeight & clientWidth are the user visible dimensions
 var outer = document.getElementById('viewer');
 var inner = document.getElementById('innerWindow');
 var zoomSlide = document.getElementById('zoomSlider'); // 100 to 300

有什么建议吗？

edit：在概念上类似于CSS，但需要不同的缩放处理方法，以及除了悬停之外更永久的执行。输入需要不同的窗口尺寸、不同的缩放位置，并实现JS来解决这些问题。

function pageZoom() {
 var outer = document.getElementById('viewer');
 var inner = document.getElementById('innerWindow');
 var zoomSlide = document.getElementById('zoomSlider');
 var imgOne = document.getElementById('viewImgOne');
 var imgTwo = document.getElementById('viewImgTwo');
 console.log(inner.clientHeight)
 // Center Points
 var cPX = outer.scrollTop + outer.clientHeight/2;
 var cPY = outer.scrollLeft + outer.clientWidth/2;
 // Position Ratios to whole
 var cPXR = cPX/inner.clientHeight;
 var cPYR = cPY/inner.clientWidth;
 inner.style.width = zoomSlide.value + "%";
 if(imgOne.clientHeight >= imgTwo.clientHeight) {
   inner.style.height = imgOne.clientHeight + "px";
 } else {
   inner.style.height = imgTwo.clientHeight + "px";
 };
 outer.scrollTop = inner.clientHeight*cPXR - outer.clientHeight/2;
 outer.scrollLeft = inner.clientWidth*cPYR - outer.clientWidth/2;
};

获取你的百分比，保存它们，放大，然后将你的百分比重新应用于谁，减去一半的outer.clientWidth，以再次与scrollTop和ScrollLeft位置同步。虽然有点波涛汹涌，但还是可以的。

相关文章：