Obtener la firma del usuario en tu aplicación móvil

Esta es una característica solicitada para muchas aplicaciones en el mundo corporativo, si estás trabajando en algún tipo de aplicación de procesamiento de pagos o una aplicación de entregas. También es posible que necesites la firma del usuario para confirmar que ha recibido un paquete, que se ha entregado un pedido o muchos otros escenarios.

Con el control de SignaturePad para Xamarin.Forms puedes obtener la firma del usuario en muy poco tiempo para Android, UWP e iOS.

Poniendolo a funcionar

Incluye el paquete de Nuget: Xamarin.Controls.SignaturePad.Forms en todos los proyectos.

Agregando el paquete de Nuget Xamarin.Controls.SignaturePad.Forms

Agregue el control en la página donde quieres que aparezca:

Y ahora el control está listo para ser usado.

Observa cómo en el ejemplo, me estoy asegurando de establecer las áreas seguras para iOS, de lo contrario, podría obtener algunas superposiciones como en la imagen a continuación:

Se está cruzando el texto “sign above the line” porque no configuramos el área segura

Características avanzadas

La interfaz de usuario del control incluye una línea e instrucciones por defecto para firmar encima de ella. También incluye un botón de reinicio y un mensaje de texto que puedes modificar, por ejemplo, para llevar el nombre del cliente. Todos estos textos se pueden configurar con sus respectivas propiedades y también puedes establecer el ancho y el color del trazo de la firma y el color de fondo.

Puede acceder a la imagen de la firma generada de dos maneras. Una es un Stream de la imagen y el otro es como una matriz de puntos (prefiero este ya que luego puedes serializar como un JSON y guardarlo en una base de datos con mucha facilidad).

Para obtener el Stream de la imagen, debes llamar al método GetImageStreamAsync desde la instancia del control.

Stream bitmap = await signatureView.GetImageStreamAsync (SignatureImageFormat.Png);

Para obtener el arreglo de puntos, debes hacer referencia a la propiedad Strokes (trazos) desde la instancia del control.

var strokes = signatureView.Strokes;

Luego puedes usar los mismos trazos para volver a cargar la imagen.

signatureView.Strokes = newStrokes;

Y eso es todo. Espero que te haya servido ten un buen día.

The post Obtener la firma del usuario appeared first on Enmanuel Toribio.