Obtener la firma del usuario en tu aplicación móvil
Tags: xamarin, firma, recibo, usuario
Published: 2020-02-14 20:08:42

---
title: Obtener la firma del usuario en tu aplicación móvil
published: true
date: 2020-01-13 23:56:54 UTC
tags: Xamarin,firma,recibo,usuario
canonical_url: https://blog.torib.io/2020/01/13/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 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](https://github.com/xamarin/SignaturePad) 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](https://blog.torib.io/wp-content/uploads/2019/12/Screen-Shot-2019-12-29-at-7.54.53-PM-1024x689.png)<figcaption>Agregando el paquete de Nuget Xamarin.Controls.SignaturePad.Forms</figcaption>

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

<script src="https://gist.github.com/eatskolnikov/a29de6997654464345d5650996509fb1.js"></script>

Y ahora el control está listo para ser usado.

![This image has an empty alt attribute; its file name is signature.gif](https://blog.torib.io/wp-content/uploads/2019/12/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](https://blog.torib.io/wp-content/uploads/2019/12/Screen-Shot-2019-12-29-at-8.07.42-PM-469x1024.png)<figcaption>Se está cruzando el texto “sign above the line” porque no configuramos el área segura</figcaption>

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](https://blog.torib.io/wp-content/uploads/2019/12/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.

The post [Obtener la firma del usuario](https://blog.torib.io/2020/01/13/obtener-la-firma-del-usuario/) appeared first on [Enmanuel Toribio](https://blog.torib.io).