7 respuestas en este tema

[Agustin Ortu]

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 Path de cada plataforma

 

El componente deberia aparecer en la categoria "Layouts"

 

Saludos

[ELKurgan]

Gracias por el aporte

 

Saludos

[Agustin Ortu]

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: 

 

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

[cram]

Se ve interesante.

 

Gracias por el porte

 

[giulichajari]

Hola Agustin. Tengo Delphi 10 Seattle pero no tengo la pestaña layout en la paleta de  herramientas. el componente se instalo correctamente.

Tengo que instalar Firemonkey?

[Agustin Ortu]

El componente solo funciona en Firemonkey, si creaste una aplicación Vcl no te va a aparecer en la paleta. Deberías estar creando una app Firemonkey para que se "active" ese framework y puedas usar mí componente

[giulichajari]

El componente solo funciona en Firemonkey, si creaste una aplicación Vcl no te va a aparecer en la paleta. Deberías estar creando una app Firemonkey para que se "active" ese framework y puedas usar mí componente

Gracias si me di cuenta je. Firemonkey hace una capa intermedia para que funcione en moviles.

Tengo Firemonkey Metropolis UI Application? Sirve?

[santiago14]

Agustín, hola. Estoy viendo este componente. Al parecer es muy interesante, solo que me está dando problemas para instalarlo. Estoy en Delphi XE5.

Al momento de la instalacion, estos son los errores que me salen, son muchos. Por eso creo que algo estoy haciendo mal.

Espero puedas decirme que pasa.

Gracias.

 

 

Compiling ImageLayout.dproj (Debug, Win32)

 

[dcc32 Error] FMX.ImageLayout.pas(246): E2003 Undeclared identifier: 'DrawDesignBorder'

[dcc32 Error] FMX.ImageLayout.pas(253): E2003 Undeclared identifier: 'Size'

[dcc32 Error] FMX.ImageLayout.pas(253): E2029 '(' expected but ')' found

[dcc32 Error] FMX.ImageLayout.pas(254): E2010 Incompatible types: 'TPersistent' and 'TSize'

[dcc32 Error] FMX.ImageLayout.pas(286): E2003 Undeclared identifier: 'Client'

[dcc32 Error] FMX.ImageLayout.pas(297): E2003 Undeclared identifier: 'Center'

[dcc32 Error] FMX.ImageLayout.pas(405): E2003 Undeclared identifier: 'FitInto'

[dcc32 Error] FMX.ImageLayout.pas(432): E2003 Undeclared identifier: 'Size'

[dcc32 Error] FMX.ImageLayout.pas(432): E2066 Missing operator or semicolon

[dcc32 Error] FMX.ImageLayout.pas(435): E2362 Cannot access protected symbol TScrollBox.Content

[dcc32 Error] FMX.ImageLayout.pas(440): E2362 Cannot access protected symbol TScrollBox.Content

[dcc32 Error] FMX.ImageLayout.pas(466): E2003 Undeclared identifier: 'Size'

[dcc32 Error] FMX.ImageLayout.pas(478): E2070 Unknown directive: 'TCustomImageLayout'

[dcc32 Error] FMX.ImageLayout.pas(478): E2029 Declaration expected but '.' found

[dcc32 Error] FMX.ImageLayout.pas(483): E2023 Function needs result type

[dcc32 Error] FMX.ImageLayout.pas(483): E2029 Declaration expected but '.' found

[dcc32 Error] FMX.ImageLayout.pas(488): E2023 Function needs result type

[dcc32 Error] FMX.ImageLayout.pas(488): E2029 Declaration expected but '.' found

[dcc32 Error] FMX.ImageLayout.pas(493): E2023 Function needs result type

[dcc32 Error] FMX.ImageLayout.pas(493): E2029 Declaration expected but '.' found

[dcc32 Error] FMX.ImageLayout.pas(498): E2023 Function needs result type

[dcc32 Error] FMX.ImageLayout.pas(498): E2029 Declaration expected but '.' found

[dcc32 Error] FMX.ImageLayout.pas(503): E2023 Function needs result type

[dcc32 Error] FMX.ImageLayout.pas(503): E2029 Declaration expected but '.' found

[dcc32 Error] FMX.ImageLayout.pas(508): E2070 Unknown directive: 'TCustomImageLayout'

[dcc32 Error] FMX.ImageLayout.pas(508): E2029 Declaration expected but '.' found

[dcc32 Error] FMX.ImageLayout.pas(508): E2029 '=' expected but ')' found

[dcc32 Error] FMX.ImageLayout.pas(513): E2070 Unknown directive: 'TCustomImageLayout'

[dcc32 Error] FMX.ImageLayout.pas(513): E2029 Declaration expected but '.' found

[dcc32 Error] FMX.ImageLayout.pas(513): E2029 '=' expected but ')' found

[dcc32 Error] FMX.ImageLayout.pas(518): E2070 Unknown directive: 'TCustomImageLayout'

[dcc32 Error] FMX.ImageLayout.pas(518): E2029 Declaration expected but '.' found

[dcc32 Error] FMX.ImageLayout.pas(518): E2029 '=' expected but ')' found

[dcc32 Error] FMX.ImageLayout.pas(524): E2070 Unknown directive: 'TCustomImageLayout'

[dcc32 Error] FMX.ImageLayout.pas(524): E2029 Declaration expected but '.' found

[dcc32 Error] FMX.ImageLayout.pas(524): E2029 '=' expected but ')' found

[dcc32 Error] FMX.ImageLayout.pas(531): E2070 Unknown directive: 'TCustomImageLayout'

[dcc32 Error] FMX.ImageLayout.pas(531): E2029 Declaration expected but '.' found

[dcc32 Error] FMX.ImageLayout.pas(531): E2029 '=' expected but ')' found

[dcc32 Error] FMX.ImageLayout.pas(536): E2023 Function needs result type

[dcc32 Error] FMX.ImageLayout.pas(536): E2029 Declaration expected but '.' found

[dcc32 Error] FMX.ImageLayout.pas(541): E2023 Function needs result type

[dcc32 Error] FMX.ImageLayout.pas(541): E2029 Declaration expected but '.' found

[dcc32 Error] FMX.ImageLayout.pas(546): E2070 Unknown directive: 'TCustomImageLayout'

[dcc32 Error] FMX.ImageLayout.pas(546): E2029 Declaration expected but '.' found

[dcc32 Error] FMX.ImageLayout.pas(546): E2029 '=' expected but ')' found

[dcc32 Error] FMX.ImageLayout.pas(551): E2070 Unknown directive: 'TCustomImageLayout'

[dcc32 Error] FMX.ImageLayout.pas(551): E2029 Declaration expected but '.' found

[dcc32 Error] FMX.ImageLayout.pas(551): E2029 '=' expected but ')' found

[dcc32 Error] FMX.ImageLayout.pas(558): E2029 Declaration expected but ';' found

[dcc32 Error] FMX.ImageLayout.pas(563): E2029 ';' expected but '.' found

[dcc32 Error] FMX.ImageLayout.pas(565): E2029 Declaration expected but end of file found

[dcc32 Error] FMX.ImageLayout.pas(63): E2065 Unsatisfied forward or external declaration: 'TCustomImageLayout.GetAnimateDecelerationRate'

[dcc32 Error] FMX.ImageLayout.pas(64): E2065 Unsatisfied forward or external declaration: 'TCustomImageLayout.GetAutoHideScrollbars'

[dcc32 Error] FMX.ImageLayout.pas(65): E2065 Unsatisfied forward or external declaration: 'TCustomImageLayout.GetBounceAnimation'

[dcc32 Error] FMX.ImageLayout.pas(66): E2065 Unsatisfied forward or external declaration: 'TCustomImageLayout.GetBounceElasticity'

[dcc32 Error] FMX.ImageLayout.pas(67): E2065 Unsatisfied forward or external declaration: 'TCustomImageLayout.GetImage'

[dcc32 Error] FMX.ImageLayout.pas(68): E2065 Unsatisfied forward or external declaration: 'TCustomImageLayout.GetAniCalculations'

[dcc32 Error] FMX.ImageLayout.pas(69): E2065 Unsatisfied forward or external declaration: 'TCustomImageLayout.GetIsZoomed'

[dcc32 Error] FMX.ImageLayout.pas(71): E2065 Unsatisfied forward or external declaration: 'TCustomImageLayout.SetAnimateDecelerationRate'

[dcc32 Error] FMX.ImageLayout.pas(72): E2065 Unsatisfied forward or external declaration: 'TCustomImageLayout.SetAutoHideScrollbars'

[dcc32 Error] FMX.ImageLayout.pas(73): E2065 Unsatisfied forward or external declaration: 'TCustomImageLayout.SetBounceAnimation'

[dcc32 Error] FMX.ImageLayout.pas(74): E2065 Unsatisfied forward or external declaration: 'TCustomImageLayout.SetBounceElasticity'

[dcc32 Error] FMX.ImageLayout.pas(75): E2065 Unsatisfied forward or external declaration: 'TCustomImageLayout.SetImage'

[dcc32 Error] FMX.ImageLayout.pas(77): E2065 Unsatisfied forward or external declaration: 'TCustomImageLayout.SetMouseWheelZoom'

[dcc32 Error] FMX.ImageLayout.pas(78): E2065 Unsatisfied forward or external declaration: 'TCustomImageLayout.SetOnImageChanged'

[dcc32 Error] FMX.ImageLayout.pas(88): E2065 Unsatisfied forward or external declaration: 'TCustomImageLayout.DisableTouchTracking'

[dcc32 Error] FMX.ImageLayout.pas(90): E2065 Unsatisfied forward or external declaration: 'TCustomImageLayout.EnableTouchTracking'

[dcc32 Error] FMX.ImageLayout.pas(183): E2065 Unsatisfied forward or external declaration: 'Register'

[dcc32 Hint] FMX.ImageLayout.pas(90): H2219 Private symbol 'EnableTouchTracking' declared but never used

[dcc32 Fatal Error] ImageLayout.dpk(36): F2063 Could not compile used unit 'FMX.ImageLayout.pas'

Failed

Elapsed time: 00:00:00.4