Título: Dilema matemático con porcentajes Publicado por: WHK en 2 Julio 2013, 18:18 pm 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: 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
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. Título: Re: Dilema matemático con porcentajes Publicado por: WHK en 2 Julio 2013, 20:31 pm 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 :D . El código ha quedado de la siguiente manera (a mas de alguno le servirá): Código
Saludos. Título: Re: Dilema matemático con porcentajes Publicado por: 1mpuls0 en 2 Julio 2013, 20:57 pm 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. Título: Re: Dilema matemático con porcentajes Publicado por: 0xDani en 2 Julio 2013, 21:04 pm 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: 50/100 = 1/2 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. Título: Re: Dilema matemático con porcentajes Publicado por: WHK en 2 Julio 2013, 21:09 pm 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 :D Título: Re: Dilema matemático con porcentajes Publicado por: WHK en 4 Julio 2013, 00:03 am Genial! ahora los tooltips embebidos en el escalado de la imagen mantienen su tamaño original :D
Código
|