放大可见图像的中心？

Question

所以，这是一道数学题。我正在用 electron 制作一本电子漫画书 reader，我想对其进行编程，以便您可以放大，但它不会从左上角放大，而是从中心放大。

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

缩放功能绑定到 input slider，范围从 100 到 300，然后转换为可见的百分比 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>

自从我学过任何一种数学以来已经很久了 class，所以我的代数是 生锈的。

 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

有什么建议吗？

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

Answer 1

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 同步职位。它有点不稳定，但它有效。

放大可见图像的中心？

Zooming in on the center of visible image?

html

javascript

css

node.js

electron