Dibujando en la pantalla en Xamarin Forms

¿Alguna vez ha tenido que crear una aplicación en la cual tengas que dibujar en la pantalla? ¿Sí? ¡Yo también!. En este artículo voy a explicar paso a paso cómo hacerlo. ¡Veamos!


Antes que nada … ¿Qué necesito?

✔ Agregar desde el NuGet Package el plugin: SkiaSharp


¡Empecemos!

Desde tu XAML debes agregar el siguiente namespace:

Después de esto, debes agregar la siguiente etiqueta:

Conociendo los atributos 😎

🔸 EnableTouchEvents: Obtiene / establece un valor booleano el cual indica si los eventos táctiles estarán habilitados o no.

🔸 Touch: Indica el evento que se activará cuando se este tocando la pantalla. (Debe tener activado el atributo EnableTouchEvents)

🔸 PaintSurface: Indica el evento que define el estado inicial de pantalla. (Por ejemplo: Limpiar la pantalla, iniciar con un color verde de fondo).


Profundizando en los atributos PaintSurface y Touch

PaintSurface: Como mostramos a más arriba, PaintSurface es la propiedad donde podemos definir el comportamiento y las características de nuestra pantalla. Para este ejemplo, comenzaremos con la creación de superficie y la limpieza de la misma. Aquí podemos ver que el método Clear permite un color, esto lo podemos hacer agregando SKColors.colorName.

Creando la linea de trazo

🔸 Color: Indica el color de la línea de trazo.

🔸 StrokeWidth: Indica el ancho de la línea de trazo.

🔸 Style: Indica el estilo de línea que obtendrá la línea de trazo. Existen tres tipos de estilos:

Dibujando la línea de trazo

🔸 Método DrawPath : Obtiene los parámetros : SKPath y SKPaint.

Resumiendo el evento PaintSurface

Touch:

En el evento Touch, definiremos la acción que la línea de trazo obtendrá para cada uno de siguientes los tipos de acción: Pressed, Moved, Released, Entered, Cancelled y Exited.

Buena suerte con tu implementación 😎

Referencias:

https://askxammy.com/painting-your-screen-with-xamarin-forms/