Dilema matemático con porcentajes

[WHK]

Hola, estoy programando un editor de imagenes pero me he detenido en un pequeño pero gran dilema.

Lo que hago actualmente es tener una imagen escalada y rotada y a partir de esto necesito mover algunos objetos que estan dentro de el calculando la posición del mouse.

Para no complicar mas el tema iré directo al grano.

Necesito sacar este calculo:
Tengo zoomActual = x%.
Tengo zoomCero = 100%.
El nuevo zoom debe ser el inverso doble, por ejemplo:

Si el zoom actual es 100% entonces el nuevo zoom debe ser 100
Si el zoom actual es 75% entonces el nuevo zoom debe ser 150
Si el zoom actual es 50% entonces el nuevo zoom debe ser 200
Si el zoom actual es 25% entonces el nuevo zoom debe ser 400
Si el zoom actual es 12.5% entonces el nuevo zoom debe ser 800
...

Como ven, no es un zoom inverso normal porque los valores estan relacionados de una manera especial que no logro comprender por completo, solo se que he llegado hasta este punto programando el editor desde cero y he llegado a la conclusión de que para que funcione el movimiento de algunos objetos dentro de la imagen escalada sobre este zoom debo realizar exactamente este calculo (en pixeles).

Un % invertido simple lo calculé de esta manera:

Código [Seleccionar] Expandir

var zoomInvertido = (-(data.ob.zoomActual - 100) + 100);

De esta manera si el zoom actual es 50% entonces el nuevo es 150%, se invierte bién pero necesito el doble, no la mitad mas el normal.

Si el zoom es la mitad del tamaño entonces necesito aplicar el doble, bajo este concepto necesito calcular los escalados de objetos con sus movimientos.

No se ve tan complejo asi que debe tener un nombre para esta ecuación, el problema es que no se como se llama porque es primera ves que lo veo y llegué hasta ahí, por ende no se como buscarlo en google tampoco.

----------------------------------
Para los que quiren saber que estoy haciendo exactamente pueden continuar leyendo, esto no es necesario para saber como realizar el calculo.

Estoy programando en javascript, HTML5 y CSS3, tengo unn editor de imagenes, este debe tener multiples selecciones en forma de rectangulos, cuando la imagen es rotada entonces los selectores tambien lo hacen sin perder las posiciones, cuando escalo la imagen entonces los selectores tambien se escalan, pero no estoy utilizando redimensionado de ancho y alto sino la propiedad directa de css transform scale y transform rotate para poder darle algunas animaciones extras sin perder la fluidez.

Intenté hacer esto con jquery UI draggable, el problema es que jQuery tiene un bug: no soporta css3 por lo tanto las posiciones absolutas no son reales al momento de escalar o rotar un objeto desde css3 haciendo que el arrastre del objeto se pierda en el infinito, por ende comencé a hacerlo de forma manual utilizando css top y left teniendo como referencia el movimiento del mouse calculando desde la posicion inicial desde que comenzó el click hasta que se suelta el botón.... esa misma cantidad de pixeles recorridos se aplica a la división del selector, entonces cuando se hace zoom (escalado) de 50% es necesario recorrer la misma cantidad de pixeles multiplicado por el doble, o sea un 200% de esa misma cantidad.

Por ejemplo, digamos que la imagen tiene 1000px de ancho, el mouse recorre una distancia de 50px, entonces el selector debe recorrer esa misma distancia recorriendo desde el pixel 0 hasta el pixel 50.


Cuando la imagen se escala a un 50% entonces la imagen queda en 500px (de manera virtual porque desde el DOM sigue teniendo 1000px), el cuadro de recorte también es escalado ya que lo que se está escalando es una division que contiene esta imagen mas los selectores.

Cuando el mouse recorre 50px cuanto debe recorrer la division? ya no son 50px porque quedará mas atrás del mouse, recordemos que con css el 50% de un ancho se convierte en 1:2, o sea dentro de un espacio de 500px del document hay 1000px, por lo tanto la división recorrió solo el 50% de los pixeles totales en ves del 100%, o sea 25px.

Para solucionar esto debo sumarle la cantidad de pixeles según el zoom actual, por eso:

Si el zoom actual es 100% entonces debe recorrer el 100% de los pixeles.
Si el zoom actual es 75% entonces debe recorrer el 150% de los pixeles.
Si el zoom actual es 50% entonces debe recorrer el 200% de los pixeles.

Recordemos que al hacerle un zoom de 50% ha quedado en la mitad del tamaño, por lo tanto los pixeles recorridos deben aumentar al doble para contrarrestar este desface.

Intenté realizar un zoom invertido simple, o sea si el zoom es de 50% entonces que recorra el 150% de pixeles totales pero no funcionó, mientra mas pequeña la imagen había mas desface, la division se iba quedando atrás, pensé que por lógica debería ser el 200% para contrarrestar la mitad con un doble asi que lo probé y funcionó de lujo.

Lamentablemente tampoco puedo utilizar $(foo).offset().[top, left] porque en javascript eso no existe, jquery lo que hace es utilizar offsetParent para calcular la posición de cada objeto pariente pero no realiza correctamente los calculos si este está rotado o tiene algún zoom ya que aun no está preparado para CSS3. Ya está reportado hace casi 2 años atrás, algunos dicen que es un bug del navegador, otros dicen que es problema del core, otros dicen que es problema del UI, etc, hasta ahora nadie lo ha solucionado, por eso tube que hacerlo de forma manual.

Se comprende la idea?
-------------------------------------------

Alguien sabe como realizar este calculo de manera matematica? tengo un javascript con mas de 800 lineas con calculos complejos matematicos y me siento un poco cansado mentalmente, cada ves me cuesta mas realizar un calculo a pesar de que pueda ser mas lógico.

Gracias.

PD: por si alguien quiere darle un vistazo al código:

Código (javascript) [Seleccionar] Expandir

iniciaArrastreCorte: function(obMover){
/* La división padre puede estar escalada, por lo cual la cantidad
* de pixeles a mover ya no son los mismos. Se ajustará al % del
* escalado v/s la posición real del mouse dependiendo de la dirección de
* la rotación. No se puede mover directamente calculando la posición del mouse
* debido a que el escalado y la rotación se realiza via CSS, las propiedades
* top y left no varían después de realizar esta modificación ya que por estandar
* no se actualiza el DOM, las propiedades offset.left y offset.top tampoco son
* reales ya que se relativizan según el tamaño original no rotado.
* Por ende la única manera de calcular estos tamaños es creando multiples wraps
* realizando calculos inversos sobre las redimensiones y posiciones relativas para
* luego calcular los reales y volver a convertir. */

/* Matris de datos para el cálculo del arrastre del objeto */
var data = {
ob : this,
mouse : {
inicio : { left: 0, top: 0 },
final : { left: 0, top: 0 }
},
obMover : {
inicio : { top: 0, left: 0 },
final : { top: 0, left: 0 },
dimensiones : { width: 0, height: 0 }
},
imagenPrincipal : { width: 0, height: 0 },
enganchado : false
};

/* Evento del movimiento del mouse */
$(document).mousemove(function(e){

/* Captura inicial de posiciones y propiedades */
if(data.enganchado == false){

/* Posición actual del mouse */
data.mouse.inicio.left = e.pageX;
data.mouse.inicio.top = e.pageY;
data.mouse.final.left = e.pageX;
data.mouse.final.top = e.pageY;

/* Dimensiones de la imagen principal */
data.imagenPrincipal.width = $('._cargar_imagen_original').width();
data.imagenPrincipal.height = $('._cargar_imagen_original').height();

/* Posición inicial del corte */
data.obMover.inicio.left = parseFloat(obMover.css('left'));
data.obMover.inicio.top = parseFloat(obMover.css('top'));

/* Dimensiones del corte */
data.obMover.dimensiones.width = obMover.width();
data.obMover.dimensiones.height = obMover.height();

data.enganchado = true;

/* Después de obtener las posiciones iniciales comienza el movimiento del objeto */
}else{
data.mouse.final.left = e.pageX;
data.mouse.final.top = e.pageY;

/* Dependiendo de la rotación actual es la posición del corte */
if(parseInt(data.ob.rotacionActualReal) == 90){
}else if(parseInt(data.ob.rotacionActualReal) == 180){
}else if(parseInt(data.ob.rotacionActualReal) == 270){
}else{ /* 0 Grados. */

// Mueve la division el mismo % que el % movido por el mouse (funciona, pero con problemas al establecer valores negativos para poder rotar)
/* Dimensiones reales de la imagen */
//espectro_P1 = ((imgW * ob.zoomActual) / 100);
//espectro_P2 = ((imgH * ob.zoomActual) / 100);

/* % del recorrido del mouse */
//espectro_P3 = (((e.pageY - inicioY) * 100) / espectro_P1);
//espectro_P4 = (((e.pageX - inicioX) * 100) / espectro_P2);

/* pixeles que debe recorrer la división */
//espectro_P5 = obY + ((imgW * espectro_P3) / 100);
//espectro_P6 = obX + ((imgH * espectro_P4) / 100);

//espectro_P7 = espectro_P5; /* top */
//espectro_P8 = espectro_P6; /* left */

//var descompuesto = -(data.ob.zoomActual - 100);
// 50 debe ser 200
// 25 debe ser 400
// 12.5 debe ser 800
//var compuesto = (descompuesto + 100);
var zoomInvertido = (-(data.ob.zoomActual - 100) + 100); // invierte el zoom teniendo como centro único el 100%

console.log(data.ob.zoomActual + ' v/s ' + zoomInvertido);
data.obMover.final.top = data.obMover.inicio.top + ((zoomInvertido * (data.mouse.final.top - data.mouse.inicio.top)) / 100);
data.obMover.final.left = data.obMover.inicio.left + ((zoomInvertido * (data.mouse.final.left - data.mouse.inicio.left)) / 100);

}

/* El corte no puede salir de la imagen */
if(data.obMover.final.top < 0)
data.obMover.final.top = 0;
if(data.obMover.final.left < 0)
data.obMover.final.left = 0;
if(data.obMover.final.top > (data.imagenPrincipal.height - data.obMover.dimensiones.height))
data.obMover.final.top = (data.imagenPrincipal.height - data.obMover.dimensiones.height);
if(data.obMover.final.left > (data.imagenPrincipal.width - data.obMover.dimensiones.width))
data.obMover.final.left = (data.imagenPrincipal.width - data.obMover.dimensiones.width);

/* Finalmente establece las coordenadas exactas */
obMover.css({
top : parseFloat(data.obMover.final.top),
left : parseFloat(data.obMover.final.left)
});
}
});
},

Eliminé varias lineas de esta función para que no se viera tan gigante, solo muestra la función cuando la rotación es cero.

Tengo varios bosquejos con diferentes maneras de calcular estas posiciones utilizando diferentes técnicas con css, jquery, etc pero quiero probar con esta.

No quiero que me solucionen el tema de la programación en si, por algo lo puse en el foro de programación general, solamente necesito el tema de como calcular la ecuación.

[WHK]

Bueno, lo he solucionado haciendolo de otra manera, aunque de todas maneras quedé intrigado sobre como realizar esta operación matemática, si alguien tiene el dato se lo agradecería un montón.

Después de un rico almuerzo como que me vino denuevo el ánimo de crear un nuevo cálculo basado en otro antiguo que tenía y solucionar el tema de las posiciones .

El código ha quedado de la siguiente manera (a mas de alguno le servirá):

Código (javascript) [Seleccionar] Expandir

iniciaArrastreCorte: function(obMover){
/* La división padre puede estar escalada, por lo cual la cantidad
* de pixeles a mover ya no son los mismos. Se ajustará al % del
* escalado v/s la posición real del mouse dependiendo de la dirección de
* la rotación. No se puede mover directamente calculando la posición del mouse
* debido a que el escalado y la rotación se realiza via CSS, las propiedades
* top y left no varían después de realizar esta modificación ya que por estandar
* no se actualiza el DOM, las propiedades offset.left y offset.top tampoco son
* reales ya que se relativizan según el tamaño original no rotado.
* Por ende la única manera de calcular estos tamaños es creando multiples wraps
* realizando calculos inversos sobre las redimensiones y posiciones relativas para
* luego calcular los reales y volver a convertir. */

/* Matris de datos para el cálculo del arrastre del objeto */
var data = {
ob : this,
mouse : {
inicio : { left: 0, top: 0 },
final : { left: 0, top: 0 }
},
obMover : {
inicio : { top: 0, left: 0 },
final : { top: 0, left: 0 },
dimensiones : { width: 0, height: 0 }
},
imagenPrincipal : {
real : { width: 0, height: 0 },
virtual : { width: 0, height: 0 }
},
enganchado : false
};

/* Evento del movimiento del mouse */
$(document).mousemove(function(e){

/* Captura inicial de posiciones y propiedades */
if(data.enganchado == false){

/* Posición actual del mouse */
data.mouse.inicio.left = e.pageX;
data.mouse.inicio.top = e.pageY;
data.mouse.final.left = e.pageX;
data.mouse.final.top = e.pageY;

/* Dimensiones de la imagen principal */
data.imagenPrincipal.real.width = $('._cargar_imagen_original').width();
data.imagenPrincipal.real.height = $('._cargar_imagen_original').height();
data.imagenPrincipal.virtual.width = (($('._cargar_imagen_original').width() * data.ob.zoomActual) / 100);
data.imagenPrincipal.virtual.height = (($('._cargar_imagen_original').height() * data.ob.zoomActual) / 100);

/* Posición inicial del corte */
data.obMover.inicio.left = parseFloat(obMover.css('left'));
data.obMover.inicio.top = parseFloat(obMover.css('top'));

/* Dimensiones del corte */
data.obMover.dimensiones.width = obMover.width();
data.obMover.dimensiones.height = obMover.height();

data.enganchado = true;

/* Después de obtener las posiciones iniciales comienza el movimiento del objeto */
}else{
data.mouse.final.left = e.pageX;
data.mouse.final.top = e.pageY;

/* Dependiendo de la rotación actual es la posición del corte */
if(parseInt(data.ob.rotacionActualReal) == 90){
data.obMover.final.left = (data.obMover.inicio.left + ((data.imagenPrincipal.real.height * (((data.mouse.final.top - data.mouse.inicio.top) * 100) / data.imagenPrincipal.virtual.height)) / 100));
data.obMover.final.top = (data.obMover.inicio.top + ((data.imagenPrincipal.real.width * ((-(data.mouse.final.left - data.mouse.inicio.left) * 100) / data.imagenPrincipal.virtual.width)) / 100));

}else if(parseInt(data.ob.rotacionActualReal) == 180){
}else if(parseInt(data.ob.rotacionActualReal) == 270){
}else{ /* 0 Grados. */
data.obMover.final.left = (data.obMover.inicio.left + ((data.imagenPrincipal.real.width * (((data.mouse.final.left - data.mouse.inicio.left) * 100) / data.imagenPrincipal.virtual.width)) / 100));
data.obMover.final.top = (data.obMover.inicio.top + ((data.imagenPrincipal.real.height * (((data.mouse.final.top - data.mouse.inicio.top) * 100) / data.imagenPrincipal.virtual.height)) / 100));

}

/* El corte no puede salir de la imagen */
if(data.obMover.final.top < 0)
data.obMover.final.top = 0;
if(data.obMover.final.left < 0)
data.obMover.final.left = 0;
if(data.obMover.final.top > (data.imagenPrincipal.height - data.obMover.dimensiones.height))
data.obMover.final.top = (data.imagenPrincipal.height - data.obMover.dimensiones.height);
if(data.obMover.final.left > (data.imagenPrincipal.width - data.obMover.dimensiones.width))
data.obMover.final.left = (data.imagenPrincipal.width - data.obMover.dimensiones.width);

/* Finalmente establece las coordenadas exactas */
obMover.css({
top : parseFloat(data.obMover.final.top),
left : parseFloat(data.obMover.final.left)
});
}
});
},

Saludos.

[1mpuls0]

Es lo único que se me ocurre LOL, se puede simplificar.

ZN = 100 + ( ( 100 - ZA ) * 2 * ( 100 / ZA / 2 ) )

Dónde:
ZA = Zoom Actual
ZN = Zoom Nuevo

Por cierto, dudo que pase pero cuando ZA=0 a cuanto equivale ZN?

Saludos.

[0xDani]

Tienes que dividir el zoom cuyo inverso quieres calcular entre 100, y multiplicar por la inversa del resultado.

De esta forma, el zoom inverso de 50:

Código [Seleccionar] Expandir


50/100 = 1/2
Inversa de 1/2 = 2
100*2  = 200


Creo que es eso lo que quieres, comprueba que funcione.


Saludos.

PD: La inversa de un número es, por definición, aquel que multiplicado por el primero resulta en 1, esto es 1/x.

[WHK]

Es lo único que se me ocurre LOL, se puede simplificar.

ZN = 100 + ( ( 100 - ZA ) * 2 * ( 100 / ZA / 2 ) )

Dónde:
ZA = Zoom Actual
ZN = Zoom Nuevo

Por cierto, dudo que pase pero cuando ZA=0 a cuanto equivale ZN?

Saludos.

El rango minimo seleccionable es 1 y maximo es 200.

Gracias a los dos, me han servido de mucho los ejemplos

[WHK]

Genial! ahora los tooltips embebidos en el escalado de la imagen mantienen su tamaño original

Código (javascript) [Seleccionar] Expandir

var invertido = 100 + ((100 - this.zoomActual) * 2 * (100 / this.zoomActual / 2));
$('._cargar_imagen_original_corte_info').css({
'transform': 'scale(' + (invertido / 100) + ')'
});