Mensajes

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

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.

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.

Cuanto les habrá pagado Microsoft para mantener una esclusividad temporal?

Esto del marketing por parte de Microsoft nunca termina de sorprender, todo demuestra lo mal que les va ya que si realmente les hubiera ido bién no hubieran tenido que recurrir a estas sucias técnicas.

Gracias por los ejemplos, muy util!


Ver que propiedades de css3 reconoce el explorador.
http://css3test.com

Muy buena la información

• En firefox con la versión 21 sacaba un 56% pero al actualizarla a la 22 sacó un 63% !!
• Google Chrome 28 sacó un 65%
• Internet Explorer 9 con todos los parches de actualizaciones al día sacó un 54%, la mayor cantidad de fallas estubo en los selectores justamente el area mas crítica de un desarrollo en CSS3.

Estoy en un proyecto WEB y pude comprobar que CSS3 redenderiza las animaciones de manera mucho mas fluida que jQuery utilizando menos CPU.

Por ejemplo un efecto de barrido hacia la izquierda utilizando jQuery UI:

Código [Seleccionar] Expandir

$(foo).show('slide', {direction: 'left'}, 250);

Utilizando CSS3:

Código [Seleccionar] Expandir

#foo{ left: 555px; transition: all 0.5s; }

Luego para habilitar la animación de CSS3 llamamos el movimiento:

Código [Seleccionar] Expandir

$(foo).css({ left: 0 });

Resulta que la animación es enormemente mas fluida y eficiente, ahorras CPU y no da conflicto de queque.

Por ejemplo, si necesitas hacer un efecto suave con animate() desde jQuery realizando muchas llamadas (por ejemplo para simular un scrollbar suave o suavizar el slider de jQuery UI) tendrás que llamar a $(foo).stop().animate(...) haciendo que las transiciones se detengan para crear la pila siguiente creando un efecto muy feo en caso contrario tu animación total puede caer en una cola infinita de animaciones sin terminar.

Esto no sucede con CSS3 ya que el CORE del navegador es mucho mas eficiente y su código está mucho mejor diseñado ya que los efectos no producen ese efecto de corte cuando necesitas llamarlo 1000 veces en un segundo (por ejemplo para crear el efecto de suavidad de cambio de volumen de un video), por lo contrario la animación retrocede si es necesario utilizando procentajes hasta enfocarse completamente sin afectar al tiempo final de la animación como sucede con jquery.

Ejemplo:
http://jsfiddle.net/TfkH3/

En mi proyecto esta animación se repetía 20 veces sobre un DOM masomenos grande con un setTimeout de 65 milesimas de segundo entre cada aparición de objetos y la diferencia es demasiado grande ya que el uso de CPU optimizó por completo mi aplicación.

Cosas no puedes hacer con jQuery:
Animación suave de un zoom utilizando CSS3 y un slider de jQuery UI
http://jsfiddle.net/NShzx/3/

Intentando simular este efecto en jQuery:
http://jsfiddle.net/NShzx/1/

Como nos dimos cuenta, al agregar el efecto animate() este nos crea una cola de trabajo enorme creando un loop infinito, por lo cual le agregamos un stop:
http://jsfiddle.net/NShzx/2/

El problema es que cuando movemos el scroll de un lado a otro de manera rápida el efecto se corta, no tiene ese efecto elástico como CSS3 que detiene la animación de forma suave devolviendose al siguiente estado por porcentajes:
http://jsfiddle.net/NShzx/3/

Con CSS3 la cantidad de frames por segundo se ajusta a la aceleración de hardware del navegador, en otras palabras utilizará la aceleración gráfica de la tarjeta de video ya que se procesa como objeto 2D, en cambio con jQuery las animaciones están basados en frames simples y no como objetos.

La velocidad de frames por segundo en jQuery es definida a traves de jQuery.fx.interval, el problema es que solo funciona en Google Chrome quedando a merced de unos cuantos fps.

Otro punto extra para CSS3 es que las animaciones se ven igual de fluidas en un desktop y en un movil como un celular, en cambio el framework de jQuery es demasiado pesado para un celular y es casi imposible simular los mismos efectos que jQuery UI, por ello existe una versión muy similar llamada jQuery Movil y algunas animaciones si se basan en CSS3 pero volvemos a lo mismo, el uso de CPU.

Conclusión: si piensas que estás listo para emprender tu proyecto en HTML5 entonces
Si no puedes hacer algo con CSS3 + HTML5 + Canvas entonces recién recurre a jQuery.

Saludos.

Gracias por la aclaración, me ha servido bastante, de hecho había pensado en hacerlo en python o nodejs pero hacer toda una shell tardaría 10 veces mas que hacerlo en php.

Creo que le daré una vuelta, por ahora me quedo con lo que me dijiste.

Hola, me gustaría crear un proyecto pero no estoy seguro que utilizar.

La idea principal es crear la shell para cualquier distribución de linux pero en formato web utilizando un frame a pantalla completa de webkit con v8 (google chrome) creando el gestor de archivos, comandos etc pero todo basado en html5 y css3.

La cosa es que necesito comunicar el HTML con la shell del mismo sistema operativo y para eso me gustaría utilizar algún sevidor WEB como apache, night o lighttpd con php o python pero estoy indeciso.

Cual servidor WEB será el mas rápido para monousuario? no me interesa el rendimiento con cargas altas, solo funcionará en localhost con el usuario actual nada mas, el resto se ejecutará directamente sobre la shell.

Que servidor me recomiendan y porqué?

Exacto, eso se programa, hay programas que ya lo hacen pero primero debes documentarte.

Lo que tu necesitas es un troyano con funcionalidad de webcam como por ejemplo el bifrost.

Eso de ocultar el led es imposible porque va a nivel de hardware, no depende del software.

hace mucho tiempo habia un hacker en un chat de yahoo que decia que me iba a robar mis cuentas y le dije ok, mi ip es 127.0.0.1 y el tipo comenzó a darme datos de la pc y no se daba cuenta que eran los datos de su propia computadora.