Xamarin.Forms + SkiaSharp. Parte 1 [Transformaciones Básicas]

Published in

Xamarin Latino

6 min readApr 30, 2019

¿Que es SkiaSharp?

Antes de entrar en tema vale la pena mencionar que antes de Skia y tecnologías similares existía una sola opción para los desarrolladores .Net a la hora de trabajar con gráficos de cualquier tipo dentro de nuestras aplicaciones y claro que me refiero al espacio de nombres System.Drawing el cual provee acceso al api GDI+ de windows. El problema de esta Api es que estaba confinada únicamente a windows y generalmente podíamos encontrarla (hasta hoy en día) por defecto en aplicaciones de WinForms. Posteriormente con la aparición de Mono este espacio de nombres comenzó a migrarse a System.Drawing.Mono.Cairo pero por problemas respecto a la implementación original el código fue quedando poco a poco en el olvido.

SkiaSharp es la implementación en .Net de la libreria SKIA de Google, la cual proporciona un API gráfico multiplataforma que es bastante sencillo de utilizar y podemos encontrarlo de manera nativa en Chrome, Android y Mozilla Firefox.

Matrices 2D

En cualquier aplicación con gráficos, mover una coordenada de un lugar a otro requiere el uso de transformación de matrices. Para empezar a adentrarnos a la programación gráfica es necesario entender las bases matemáticas que hacen posibles dichas transformaciones así como su importancia ya que sin estas no sería posible la computación moderna. A continuación vamos a concentrarnos en analizar algunas transformaciones lineares como lo son: Escalado, Reflexión, Traslación y Rotación.

1.- Traslación

Para trasladar un objeto, lo único que necesitamos es agregar un intervalo al valor original de X y Y que conforman la coordenada del mismo.

En la programación gráfica actual sin embargo es mas común ver este tipo de operaciones expresadas en sistemas de coordenadas homogéneas, que no es otra cosa que mover una coordenada conformada por dos dimensiones (X,Y) a una dimensión superior donde las coordenadas están conformadas por 3 dimensiones (X,Y,W) lo que hace que su manipulación sea homogénea sin importar el tipo de operación que se desee realizar a través de una matriz 3x3.

Traslación en Coordenadas Homogéneas

En coordenadas homogéneas esta operación se representa de la siguiente manera:

Ejemplo:

Ejemplo en Xamarin.Forms

En una aplicación nueva de Xamarin.Forms solo necesitamos agregar los siguientes paquetes NuGet al proyecto de .NetStandard:

Paso siguiente, necesitamos agregar un contenedor SkiaView en nuestra página principal, que vendrá a ser nuestro canvas si se quiere ver de esa manera.

El evento OnPaintSurface quedaría de esta manera:

podemos destacar el objeto canvas que vendria a representar la superficie sobre la que vamos a dibujar (dispositivo o imagen). Así mismo en la línea 17 se observa que el sistema de coordenadas que por defecto en Xamarin se ubica en (0,0) es movido al centro de la pantalla para trabajar con un sistema de coordenadas mas familiar, y como lo verás en el siguiente bloque de código lo único que cambia del sistema de coordenadas tradicional es que el eje Y queda invertido después de aplicar la transformación al sistema de coordenadas.

Para entender este sistema de coordenadas bastaría con agregar la siguiente función encargada de dibujar el sistema de coordenadas:

Si ejecutamos el código anterior podremos ver el sistema de coordenadas de manera gráfica y como mencionamos al principio, podemos observar que el eje Y esta invertido.

A continuación vamos a dibujar una forma para jugar con las operaciones de matrices dentro del metodo DrawHouse:

y aquí el resultado:

Para aplicar una traslación con SkiaSharp bastaría con aplicar el método Translate al origen después de haber dibujado los ejes:

y la traslación de nuestra figura quedaría de la siguiente manera:

2.- Escalado

Para escalar un objeto, lo único que necesitamos es multiplicar las coordenadas de X de cada punto que conforma nuestra figura por el factor de escalado (Sx). Y de igual manera se puede hacer lo mismo con el eje Y.

Escalado en Coordenadas Homogéneas

Al igual que en la traslación, el escalado puede expresarse en forma de coordenadas homogéneas:

Ejemplo:

Ejemplo en Xamarin.Forms

Reutilizando el código del ejemplo anterior, solo necesitariamos cambiar una linea como se muestra a continuación junto con el resultado de escalar nuestro polígono por un factor de 2.

Resultado del cambio (a la izquierda el polígono original y a la derecha el polígono escalado):

3.- Rotación

Suponiendo que quisiéramos rotar un objeto θ en un sentido anti horario como se muestra a continuación (punto X1,Y1 hacia X2,Y2):

De lo anterior podemos obtener la siguiente relación:

El punto X2,Y2 es el mismo punto rotado por un angulo adicional de θ. Y desde que dicho punto también tiene una distancia r desde el origen , sus coordenadas están representadas por: