放大可見圖像的中心？

所以，這是一個數學的重要問題。我正在研究電子漫畫書閱讀器，並且我想對它進行編程，以便放大，但不會從左上角放大，而是從中心放大。放大可見圖像的中心？

@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>

自從我參加過任何一門數學課之後，它就一直存在，所以我的代數生鏽。

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，但需要處理不同的變焦方式，以及徘徊之外更長久執行。輸入要求不同的窗口尺寸，不同的縮放位置以及實現JS來解決問題。

來源

2016-08-19 ms_nitrogen

[CSS：如何從中心而不是左上角縮放圖像]可能的副本（http://stackoverflow.com/questions/28726430/css-how-to-scale-an-image-from-中心而不是左上） – adambullmer

請檢查[本答案]（http://stackoverflow.com/a/16835572/1169519）。 – Teemu

我想我可能會使用... 'var cPX = outer.scrollTop + outer.clientHeight/2;'＆'var cPXR = cPX/inner.clientHeight; –

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位置再次同步了一半。它有點波動，但它有效。

來源

2016-08-19 20:35:18

放大可見圖像的中心？

回答

相關問題