FMX – Componente ImageLayout | Puro Delphi

Cursos, artículos, noticias y herramientas Delphi VCL (Visual Component Library) / FMX (Firemonkey)

FMX – Componente ImageLayout

Agustín Ortu, miembro destacado y muy activo en la comunidad Delphi ha publicado un componente genial para la visualización de imágenes utilizando FireMonkey, dando un matiz suave al interactuar con ellas. En sus propias palabras…

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

El código del componente se encuentra y se puede descargar desde su cuenta en GitHub y las instrucciones para su instalación son las siguientes:

 

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”

Personalmente lo he instalado y me agradó mucho porque le da un toque precisamente de suavidad a la app… ¿Qué tal se verá en el NASA Planetary?, luego de hacer un par de artículos que tengo pensado para dicho proyecto, en el cual mostraré su uso en la versión Tokyo de Delphi… incorporaré el ImageLayout.

 

Nos vemos. 🙂


2 Comentarios

  • Gracias por la entrada Johnny. Por cierto, hace poco envie algunas actualizaciones para el componente, deberia brinar una experiencia de usuario mejor.

    Por ejemplo, la imagen ahora esta centrada, se controla internamente mejor las animaciones, he agregado algunos parametros al evento OnImageChanged y hay algunas propiedades y un metodo publico BestFit que puede ser interesante

    Me olvidaba, en ClubDelphi en tu perfil, tienes mal la direccion de tu blog, sale “ww.purodelphi.com” 🙂

Escriba un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

  • RSS

  • Categorías

  • Nube de etiquetas

  • Usuario