FMX - Componente ImageLayout

[[AgustinOrtu]]

Hola, he publicado un nuevo componente para Firemonkey. Se trata de un componente estilo Layout, cuyo proposito es mostrar una imagen e implementar los gestos de zoom y deslizar con los dedos para pantallas tactiles, y tambien la posibilidad de simularlos con el raton (con la rueda para el zoom, y con "pinchando" y "soltando" en una direccion con el boton izquierdo). Estos gestos tienen una animacion que hace el movimiento "mas suave", implementado por la clase TAniCalculations de la unidad FMX.InertialMovement

El componente es bastante sencillo y practicamente las propiedades que publica son para asignar la imagen y luego para controlar algunas caracteristicas de la animacion.

Hay un pequeño demo que funciona en Windows y calculo que funcionara bien en el resto de las plataformas (no he podido probarlo). El demo tiene una serie de botones, el de la izquierda despliega un panel que permite modificar las propiedades del componente, y el resto de los botones sirven para cargar dinamicamente una imagen, o eliminarla. En moviles, deberia poderse cargar una imagen directamente de la camara o de la galeria de fotos.

Siendo que en realidad el componente esta basado en este tutorial, por lo que recomiendo a cualquiera que quiera entender un poco que es lo que pasa que lo vea. Basicamente el gesto "deslizar" es implementado por un ScrollBox asi como tambien la parte de los efectos y animacion; y el zoom es implementado capturando la informacion del gesto y aplicando una serie de cuentas para calcular la escala de la imagen y dibujarla

Codigo componente ImageLayout

La instalacion es la misma que cualquier componente:

1. Se abre el proyecto ImageLayout.dproj

2. Se instala el paquete: gestor de proyectos, click derecho sobre ImageLayout.bpl --> Install

3. Se agrega en el Library Path (Tools > Options > Environment Options > Delphi Options > Library > Library Path) el directorio donde esta la unidad FMX.ImageLayout.pas. Esto deben hacerlo en el Library Pat[/i]h de cada plataforma

El componente deberia aparecer en la categoria "Layouts"

Saludos

[[movorack]]

Muy buen aporte!!!

[jhonny]

Estupendo, que bien, publicaré esto en mi blog si me lo permites, gracias por este gran aporte .

[[AgustinOrtu]]

Empezado por jhonny

Estupendo, que bien, publicaré esto en mi blog si me lo permites, gracias por este gran aporte .

Por mi, agradecido

[Casimiro Notevi]

[ecfisa]

Muchas gracias por el aporte

Saludos

[[ElKurgan]]

Gracias por el aporte

Saludos

[Neftali [Germán.Estévez]]

Se agradece.

[[AgustinOrtu]]

Hace unos momentos, he actualizado el componente, este es un breve resumen:

- La imagen ahora se dibuja centrada

- Metodo publico BestFit, este era antes protegido y llamado CalcImageSize. Como su nombre indica, calculara el valor mas adecuado para la imagen teniendo en cuenta el tamaño de la misma y el lugar disponible para mostrarla

- El evento OnImageChanged ahora es de tipo TImageChangeEvent (antes TNotifyEvent). La firma del mismo es la siguiente:

Código Delphi [-]
TImageChangeEvent  = procedure(Sender: TObject; const Reason: TImageChangeReason; var Action: TImageChangeAction) of object;

Este evento nos indica cual es la "razon" por la cual fue disparado, por el momento, hay dos valores posibles:

TImageChangeReason.LayoutResized: Este valor indica que el TImageLayout fue redimensionado, por ejemplo, porque cambio el tamaño del Form que lo contiene, o cambio la orientacion. En otras palabras, esta condicion se da en los mismos casos que un evento de tipo OnResize


TImageChangeReason.ImageChanged: Este valor indica que la imagen fue modificada

Luego tambien existe la posibilidad de setear un valor en un parametro de tipo TImageChangeAction, este parametro permite indicarle al componente como debe comportarse frente a este evento. Hay dos valores posibles:

TImageChangeAction.RecalcBestFit: Este es el valor por defecto, y lo que hace es invocar al metodo BestFit

TImageChangeAction.PreserveImageScale: Este valor indica que debe utilizar el valor de ImageScale actual

Este cambio en el evento puede provocar un error en el proceso de lectura del archivo .fmx, y se deba ajustar el evento (sale el cartel de dialogo si se quiere ignorar o cancelar)

- Dos propiedades nuevas: IsZooming e IsZoomed

Cambios en la experiencia de usuario

- El "panning", scroll o deslizamiento solamente se activa si es necesario. Es decir, si hay lugar suficiente para mostrar la imagen, este comportamiento se desactiva

- El gesto de zoom en pantallas tactiles es ahora "mas rapido"

- Mejor manejo de algunas cuestiones de la animacion provistas por la clase TAniCalculations. Por ejemplo, el efecto de la propiedad TImageLayout.BounceAnimation se desactiva cuando comienza el gesto de zoom y se vuelve a activar cuando finaliza. El "salto" que produce el efecto puede molestar a la hora de realizar el gesto. Lo mismo ocurria si se modificaba la propiedad TImageLayout.ImageScale, si TImageLayout.BounceAnimation estaba activada, la imagen "saltaba" en el lugar.

- Durante el gesto de zoom en pantallas tactiles, se desactiva el scrolling cuando el gesto comienza, y se vuelve a activar (si es necesario) cuando finaliza. Tengo previsto implementar que el zoom tenga "direccion", es decir, que se enfoque el punto en donde se realiza el gesto

- El control ahora redefine el metodo protegido Resize. En el, invoca al evento OnImageChange con el valor TImageChangeReason.LayoutResized. Si no hay ningun evento, el componente ejecuta un BestFit. Esto permite que la imagen "responda" a los cambios de tamaño, por ejemplo, si maximizo la pantalla y el TImageLayout tenia su propiedad Align con valor TAlignLayout.Client, la imagen se "acomoda". Esto tambien permite reaccionar a eventos de cambio de orientacion en moviles ("de costado" a "de parado" y visceversa)

Por ultimo, comentar que si bien he intentado interceptar un gesto de tipo DoubleTap ("doble click" con el dedo), este no es capturado por Firemonkey, asi que no funciona. Estoy investigando que podra ser. La idea de este evento es hacer uno o dos niveles de zoom, y en un tercer intento, poner la imagen en BestFit

Saludos