Javascript imagen Pan/Zoom

Question

Al combinar un poco de CSS y jQuery UI/arrastrable He creado la capacidad para desplazar una imagen y con un poco de JS adicionales que ahora puede ampliar la imagen.

El problema que tengo es que, si hace un acercamiento, la esquina superior izquierda de la imagen se repara, como era de esperar. Lo que me gustaría es que la imagen permanezca central (en función de la panorámica actual) de modo que la mitad de la imagen permanezca en el medio del contenedor mientras se agranda.

He escrito algo de código para esto, pero no funciona, espero que mis matemáticas es incorrecto. ¿Alguien podría ayudar?

quiero que funcione como this hace. Cuando te desplazas hacia una imagen, mantiene la imagen centrada según la panorámica actual en lugar de alejarse de la esquina.

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

Para resumir, es necesario hacer una matriz de transformada de escalar por la misma cantidad que la imagen y luego transformar el posición de la imagen usando esa matriz. Si esa explicación es completa para usted, busque "transformaciones de imagen" y "matemáticas matriciales".

El principio de esta página es un muy buen recurso para empezar a pesar de que se trata de un lenguaje de programación diferente: http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/geom/Matrix.html

---

De todos modos, he aplicado estos métodos en algunos proyectos propios. Aquí está el zoom en función de algo que escribí que funciona de la manera deseada:

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 
} 

Nota Los comandos "nueva Vector.create()" y "Matrix.I (3)". Los que provienen de la biblioteca de vectores de JavaScript/matriz matemática http://sylvester.jcoglan.com/

A continuación, tenga en cuenta "transformPoint()". Esa es una de las funciones de ActionScript que enlazan (más pistas sobre http://wxs.ca/js3d/) que implementa utilizando sylvester.js

Para el conjunto completo de funciones que escribí:

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); 
}