Escribiendo sobre una imagen con SkiaSharp en Xamarin Forms

Erick Roy Fernandez Terrel
2 min readDec 21, 2020

--

¿Que es SkiaSharp?

SkiaSharp es un sistema de gráficos 2D para .NET y C # impulsado por el motor de gráficos Skia de código abierto que se utiliza ampliamente en los productos de Google. Puede usar SkiaSharp en sus aplicaciones Xamarin.Forms para dibujar gráficos vectoriales 2D, mapas de bits y texto.

Este Post es parte del segundo calendario de Adviento de la Comunidad Xamarin en Español, para más información sigue el link.

https://www.luisbeltran.mx/2020/11/16/segundo-calendario-de-adviento-de-xamarin-en-espanol/

Empecemos creando un proyecto Xamarin Forms.

Una vez creado el proyecto agregaremos los nuggets de SkiaSharp.

Ahora nos vamos al proyecto compartido y agregamos una la carpeta CustomControls y la creamos las clases CanvasCustom y BitMapExtensions, agregamos un carpeta models y creamos el modelo DataToAdd. Asimismo, agregamos nuestra imagen en la que escribiremos en la carpeta Media.

Recordar que la imagen de estar embebida.

Código de clase BitMapExtensions.cs, en ella tenemos helpers para cargar la imagen y volver a renderizar en el canvas.

Esta clase CanvasCustom es nuestro control personalizado el cual hereda de SKCanvasView.

DataToAdd servirá de modelo para proveer datos a nuestro control personalizado.

Continuando creamos un Grid donde ponemos nuestro control personalizado y en duro agregamos datos a nuestro binding.

Gracias por llegar a final de este post, aquí tenemos las imágenes del resultado.

--

--

Erick Roy Fernandez Terrel

Desarrollador de software con tecnologías Microsoft como .Net ,Azure, Xamarin, etc.