Javascript Image Pan / Zoom

Question

By combining some CSS and JQuery UI / draggable, I created the ability to pan the image and with a little extra JS, you can now scale the image.

The problem I am facing is that if you enlarge the image, then the upper left corner is fixed, as you would expect. I would like the image to remain central (based on the current panning), so that the middle part of the image is in the middle of the container, becoming larger.

I wrote code for this, but it doesn’t work, I expect my math is wrong. Can anyone help?

I want it to work like this . When you scroll the image, it holds the image in the center based on the current panorama, and does not zoom out from the corner.

HTML:

<div id="creator_container" style="position: relative; width: 300px; height: 400px; overflow: hidden;"> <img src="/images/test.gif" class="user_image" width="300" style="cursor: move; position: absolute; left: 0; top: 0;"> </div> 

JavaScript:

 $("#_popup_creator .user_image").bind('mousewheel', function(event, delta) { zoomPercentage += delta; $(this).css('width',zoomPercentage+'%'); $(this).css('height',zoomPercentage+'%'); var widthOffset = (($(this).width() - $(this).parent().width()) / 2); $(this).css('left', $(this).position().left - widthOffset); }); 

Answer 1

In short, you need to make the transformation matrix scalable by the same amount as the image, and then convert the position of the image using this matrix. If this explanation is complete Greek for you, see “image transformations” and “matrix math”.

The top of this page is a pretty good resource, even if it differs from another programming language: http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/geom/Matrix.html

---

In any case, I implemented these methods in some of my projects. Here, the zoom function from what I wrote functions as you want:

 function zoomIn(event) { var prevS = scale; scale += .1; $(map).css({width: (baseSizeHor * scale) + "px", height: (baseSizeVer * scale) + "px"}); //scale from middle of screen var point = new Vector.create([posX - $(viewer).width() / 2, posY - $(viewer).height() / 2, 1]); var mat = Matrix.I(3); mat = scaleMatrix(mat, scale / prevS, scale / prevS); point = transformPoint(mat, point); //http://stackoverflow.com/questions/1248081/get-the-browser-viewport-dimensions-with-javascript posX = point.e(1) + $(viewer).width() / 2; posY = point.e(2) + $(viewer).height() / 2; $(map).css({left: posX, top: posY}); return false;//prevent drag image out of browser } 

Pay attention to the commands "new Vector.create ()" and "Matrix.I (3)". They come from the mathematical library of JavaScript vectors / matrices http://sylvester.jcoglan.com/

Then pay attention to "transformPoint ()". This is one of the functions from this ActionScript link (plus hints at http://wxs.ca/js3d/ ) that I implemented using sylvester.js

For a complete set of functions, I wrote:

 function translateMatrix(mat, dx, dy) { var m = Matrix.create([ [1,0,dx], [0,1,dy], [0,0,1] ]); return m.multiply(mat); } function rotateMatrix(mat, rad) { var c = Math.cos(rad); var s = Math.sin(rad); var m = Matrix.create([ [c,-s,0], [s,c,0], [0,0,1] ]); return m.multiply(mat); } function scaleMatrix(mat, sx, sy) { var m = Matrix.create([ [sx,0,0], [0,sy,0], [0,0,1] ]); return m.multiply(mat); } function transformPoint(mat, vec) { return mat.multiply(vec); }