Rotando Imágenes

En algunas ocasiones necesitamos rotar una imagen de su aspecto vertical a apaisado y viceversa. Desde la introducción de los métodos gráficos Translate y Rotate esta operación es realmente simple. Sigue leyendo y te mostraré cómo puedes crear un Método de Extensión para la clase Picture que puedas usar justo para eso.

Esta técnica funcionará tal cual en los proyectos Desktop y iOS, mientras que necesitarás hacer algunos cambios para el proyecto de ejemplo que veremos aquí cuando se trate de un proyecto Web, específicamente por los cambios entre WebPicture y Picture.

Como probablemente ya sepas, los métodos de extensión de clase han de crearse en un Módulo, de modo que añade un nuevo módulo a tu proyecto (por ejemplo con el nombre “PictureExtensions”) y, a continuación, añade un nuevo método sobre dicho módulo utilizando la siguiente signatura:

• Method Name: Rotate
• Parameters: Extends SourcePicture As Picture, Optional ClockWise As Boolean = True
• Return Type: Picture
• Scope: Global

Escribe a continuación el siguiente fragmento de código en el Editor de Código asociado con dicho método:

Var p As New Picture(SourcePicture.Height, SourcePicture.Width)
Var g As Graphics = p.Graphics

Var tRotation As Double = (90 * 3.14159 / 180) // 90º en radianes

If Not ClockWise Then
  tRotation = -tRotation
  g.Translate(0, g.Height)
Else
  g.Translate(g.Width,0)
End If

g.Rotate(tRotation)

g.DrawPicture(SourcePicture,0,0)

Return p

¡Y eso es todo!

Probando la Rotación

Vamos a crear la interfaz de usuario para probar su funcionamiento. En este caso se trata de un Projecto Xojo Desktop pero puedes seguir los mismos pasos para un proyecto iOS.

En primer lugar, suelta sobre el Navegador del Proyecto en el IDE cualquier imagen que quieras utilizar como fuente para las pruebas de rotación. En este ejemplo la imagen tiene el nombre “Test”.

Ahora, selecciona la ventana “Window1” para acceder al Editor de Diseño y arrastra sobre él un control ImageViewer desde la Librería de controles. Utiliza los manejadores de cambio de tamaño de modo que el ImageViewer recién añadido al Editor de Diseño tenga un aspecto similar al mostrado en la siguiente imagen:

Con ImageViewer aun seleccionado en el Editor de Diseño, cambia su propiedad Name a “PreviewImageViewer” en el Panel Inspector associado, y asegúrate de que los cuatro candados de la sección Locking estén cerrados. Igualmente, selecciona la imagen “Test” (o el nombre de la imagen que hayas añadido en tu caso) como la imagen a mostrar en la opción Image que se encuentra bajo la sección Appearance del Panel Inspector.

A continuación, arrastra dos botones desde la Librería y suéltalos bajo el control PreviewImageViewer. La interfaz de usuario finalizada debería de tener el aspecto mostrado en la siguiente captura de pantalla:

Como puedes ver en la anterior imagen, etiqueta el botón situado más a la derecha como “Clockwise” y el situado a la izquierda como “Counter Clockwise”.

Haz doble click en el botón “Clockwise” y añade el Manejador de Evento “Pressed”. Luego, añade la siguiente línea de código en el Editor de Código asociado con dicho evento:

PreviewImageViewer.Image = PreviewImageViewer.Image.Rotate

Haz doble clic en el botón “Counter Clockwise” y añade el manejador de evento “Pressed”. Luego, añade la siguiente línea de código en el Editor de Código asociado:

PreviewImageViewer.Image = PreviewImageViewer.Image.Rotate(False)

Probando la App

Ejecuta el proyecto de ejemplo y haz clic (o tap) sobre los botones. Verás cómo la imagen rota 90º en el sentido elegido.

Como has visto, sólo hemos necesitado unas pocas líneas de código para rotar la imagen, y dicho código funcionará tal cual tanto en tus proyectos Desktop como iOS.