javascript - iScroll zoom factor calculation -
i have problem , hope me out.
jsfiddle: https://jsfiddle.net/estsiim/zjqptg9j/3/
html:
<div id="wrapper"> <div id="content"> </div> </div> <br><br><br> <button id="btn">zoom view</button>
css:
#wrapper { width: 500px; height: 500px; border: 1px solid black; overflow: hidden; position: relative; } #content { width: 700px; height: 300px; background-color: blue; }
javascript:
var myscroll = new iscroll('#wrapper', { mousewheel: true, keybindings: true, wheelaction: 'zoom', scrollbars: true, scrollx: true, scrolly: true, zoommin: 0.1, zoom: true, mousewheelspeed: 20, }); var zoomfactor = 0.4; //need calculate somehow $('#btn').on('click', function() { myscroll.zoom(myscroll.scale - zoomfactor); });
so want iscroll (https://github.com/cubiq/iscroll) zoom out of content showing. problem content size not fixed (it can 700x300, 2000x3000, 200x900 , on).
thank time
use method, if understand correct want reset content, implemented on both dimensions (width vs height), if need 1 of modify fit factor return exact percent of dimension (no max pick 1 return), fiddle here:
//get wrapper dimensions var wrap = { h : $('#wrapper').height(), w : $('#wrapper').width() } //get content dimensions var content = { h : $('#content').height(), w : $('#content').width(), }; var myscroll = new iscroll('#wrapper', { mousewheel: true, keybindings: true, wheelaction: 'zoom', scrollbars: true, scrollx: true, scrolly: true, zoommin: 0.1, zoom: true, mousewheelspeed: 20, }); //compute reset zoom factor var fitfactor = function () { //compute witch dimension larger width vs height h = content.h / wrap.h;//zoom factor height w = content.w/ wrap.w;//zoom factor width //get max between zoom factores, remove percents renderedfactor = math.max(h, w); //return scale factor return 1/renderedfactor; }; $('#btn').on('click', function() { myscroll.zoom(fitfactor()); });
Comments
Post a Comment