My current project involves developing an e-comic book reader in electron, and I am facing a math-heavy challenge. I want to implement a zoom functionality that doesn't just enlarge from the top-left corner but instead zooms in from the center.
@100% @200% Currently @200% Ideally
---- -------- --------
| | | | | | ---- |
---- ---- | | | | |
visible | | | ---- |
size -------- --------
The zoom feature is connected to an input slider with a range of 100 to 300, which is then converted to a percentage for the visible 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;
};
This is how the HTML code looks like...
<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 has been quite some time since I last dealt with any mathematical concepts, so my algebra skills are a bit rusty.
var body = document.body; // clientHeight & clientWidth represent the user-visible dimensions
var outer = document.getElementById('viewer');
var inner = document.getElementById('innerWindow');
var zoomSlide = document.getElementById('zoomSlider'); // Ranging from 100 to 300
Do you have any recommendations or suggestions?
edit: The concept is similar to CSS but requires different techniques for handling zoom operations, as well as a more permanent execution aside from just hovering over elements. Various inputs are needed for window dimensions, different zoomed locations, and implementing JavaScript to address these challenges.