[英]Zooming in on the center of visible image?
So, this is a bit of a math heavy question. 因此,这是一个数学难题。 I am working on an e-comic book reader in electron, and I want to program it so that you can zoom in, but that it doesn't zoom in from the top left corner, but instead from the center.
我正在开发一个电子的电子漫画书阅读器,我希望对其进行编程以便可以放大,但是它不是从左上角放大,而是从中心放大。
@100% @200% Currently @200% Ideally
---- -------- --------
| | | | | | ---- |
---- ---- | | | | |
visible | | | ---- |
size -------- --------
The zoom function is tied to an input slider
ranging from 100
to 300
, then converted to percentage for the visible div
缩放功能绑定到范围从
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;
};
With this as the html... 以此为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>
It's been forever since I've taken any sort of math class, so my algebra is rusty . 自从上过任何数学课程以来,这一直都是一生,所以我的代数很生锈 。
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
Any suggestions? 有什么建议么?
edit: similar to the CSS in concept, but requiring differing methods of handling zooming, as well as a more permanent execution besides hovering. 编辑:在概念上类似于CSS,但需要使用不同的缩放方法,并且除了悬停外还需要更永久的执行。 Inputs called for differing window dimensions, different zoomed locations, and implementing JS to solve the issues.
输入需要不同的窗口尺寸,不同的缩放位置,以及实现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;
};
Get your percentages, save them, zoom in, then re-apply your percentages onto the who, subtracting half the outer.clientWidth
to sync up again with the scrollTop
and ScrollLeft
positions. 获取您的百分比,保存它们,放大,然后将百分比重新应用到who上,减去
outer.clientWidth
一半,以再次与scrollTop
和ScrollLeft
位置同步。 It is a bit choppy, but it works. 这有点断断续续,但是可以。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.