Obtener la firma del usuario

screenshot-1577664252943
Share on facebook
Share on twitter
Share on linkedin

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.

This image has an empty alt attribute; its file name is Screen-Shot-2019-12-29-at-7.54.53-PM-1024x689.png
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.

This image has an empty alt attribute; its file name is signature.gif

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:

This image has an empty alt attribute; its file name is Screen-Shot-2019-12-29-at-8.07.42-PM-469x1024.png
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.

This image has an empty alt attribute; its file name is Screen-Shot-2019-12-29-at-8.37.16-PM.png

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.

Share on facebook
Share on twitter
Share on linkedin

¿Te gustó el artículo o tienes algún comentario? Puedes darme mention en twitter @eatskolnikov

¿Quieres recibir los artículos en tu correo?

Suscribete a mi boletín de correos y enterate cuando haya una nueva publicación

Otros artículos

.Net Core

El nuevo portal de emplea.do

Llevo un tiempo trabajando directamente y liderando esfuerzos para sacar adelante la nueva versión del portal emplea(punto)do y debo decir que me llena de emoción saber que estamos a solo un paso de publicar la nueva versión mejorada del sitio web. El site actualmente te lleva a la nueva versión

Leer más »
Xamarin

Obtener la firma del usuario

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

Leer más »
Xamarin

Definiendo estilos para nuestras aplicaciones

El uso de estilos (Styles) puede ayudar a definir una interfaz de usuario coherente para tu aplicación y es una excelente manera de hacer que tus archivos XAML sean más legibles y mantenibles a largo plazo. Algunas características de los estilos: Son muy fáciles de definir. Se puede heredar para

Leer más »
Xamarin

Cambiando la etiqueta del botón Back en iOS con Xamarin Forms

Algo de contexto He estado trabajando en la aplicación para CodecampSDQ (iOS | Android) que se celebrará en las instalaciones de Intec este 1 de junio. El código se basa en este repositorio y hemos realizado algunas adaptaciones de las que probablemente hablaré con mayor detalle más adelante. En un momento me

Leer más »
Xamarin

Áreas seguras del Layout para iOS en Xamarin Forms

Desde el lanzamiento del iPhone X, hay un “notch” en la parte superior de la pantalla en los dispositivos iOS que tiende a ser molesto porque se sobrepone al contenido de nuestra aplicación. Normalmente tendrías que agregar algún tipo de margen para evitar este problema. El mayor inconveniente con este

Leer más »