Signature_pad: Mejorar la calidad del dibujo

Este es un experimento rápido y sucio que hice el verano pasado. La idea es suavizar el camino con una función sobre una ventana en movimiento. La ventana está configurada en el código, pero podría ajustarse en función de la velocidad. Para simplificar, utilicé un ancho de pluma fijo.
http://scvsa-servizi.campusnet.unipr.it/tools/signature/signature_pad/example/

clase

@claudiorivetti ¡ Eso es realmente increíble! Lo comprobaré. Recuerdo que una de las aplicaciones de dibujo de Google estaba usando la misma solución. Sin embargo, lo extraño de iMessage es que el retraso no es mayor que en esta biblioteca...

Si usa un dedo para dibujar, en lugar de un lápiz óptico, el punto de contacto es bastante ancho (sin duda más ancho que un píxel) y no estoy muy seguro de cómo las aplicaciones móviles o los navegadores realmente calculan las coordenadas exactas de los eventos táctiles en tal caso. Tal vez sería posible ajustar de alguna manera las coordenadas recibidas por el navegador en función de las coordenadas de los puntos anteriores y la velocidad actual y no solo interpolar caminos entre ellos. No estoy seguro de si tiene algún sentido o si tendré tiempo para experimentar con él. Tendría que hacer que los puntos fueran visibles para ver si las curvas en sí podrían mejorarse o si los puntos no están a lo largo de las líneas "ideales".

@claudiorivetti Eso es hermoso, ¿cómo puedo obtener tanta magia? :) Es cierto que tendría que ser un poco más realista, ya sea de forma completamente dinámica, o tal vez solo una línea más gruesa sería suficiente.

La mayoría de las personas que observé escriben lento por alguna razón y se parece bastante a los años 90. Simplemente no puedo deshacerme de las esquinas ásperas ajustando los parámetros de entrada de SignaturePad:

( PD: No importa si en el escritorio, iPhone, con un lápiz de tableta o simplemente con un dedo. Siempre se ve igual. El lienzo es de 1200x600 píxeles a escala 3,3 (es decir, 400x400px). No creo la resolución es el problema)

Lo que me sorprende es que otras bibliotecas no tienen ancho dinámico en absoluto, pero en general me parecen "más limpias". Por ejemplo, en comparación con la imagen que publiqué arriba.

la superfirma corrige automáticamente las curvas

jSignature ) es un poco más inestable, pero aún no pixelado.

@halo Me gustaría evitar el procesamiento posterior/la corrección automática, aunque estoy de acuerdo en que los resultados suelen ser mucho mejores. La cuestión es que, al menos en iMessage, es posible tener líneas suaves sin ningún procesamiento posterior notable. Hay algunas cosas que me gustaría probar, por ejemplo, omitir puntos que están demasiado cerca uno del otro. La limitación se ha agregado recientemente, pero si alguien dibuja muy lentamente, no ayudará mucho.

Otra cosa es que ya no uso esta biblioteca, así que a menos que encuentre algún ejemplo de cómo proporcionar líneas más suaves (como hice con las publicaciones de Square ), no creo que tenga mucho tiempo para investigarlo. yo mismo.

@halo Hice un experimento rápido, donde omito un punto si está demasiado cerca del anterior. Parece mejorar la calidad del dibujo cuando uno dibuja muy lento, pero presenta un retraso notable. Sin embargo, aún está bastante lejos de lo que es posible en las aplicaciones iOS iMessage o Notes:/ La demostración está disponible en http://signature-pad.surge.sh/ y puede intentar cambiar el valor de signaturePad.minDistance para ver cómo impacta el dibujo. El valor predeterminado es 5, lo que significa que si el punto anterior está más cerca de 5 px del nuevo, se omite el nuevo.

Además, agregué un tiempo usando la función performance.now a #_updateStroke (no presente en la demostración) y, a menos que esté sucediendo algo asíncrono o haya estropeado algo, parece que toma menos de 1 milisegundos para agregar un punto y dibujar una curva. Significa que hay mucho tiempo para hacer un procesamiento más sofisticado.

Con mucho gusto probaré esto en producción con usuarios reales y le daré su opinión. ¿Tiene una sucursal en Github o un archivo dist que pueda usar?

Me gusta el enfoque, muchas gracias por intentarlo.

EDITAR : creo que solo puedo usar http://signature-pad.surge.sh/js/signature_pad.js

@halo Si desea crear su propia versión (p. ej., minimizada), simplemente la empujé a la rama https://github.com/szimek/signature_pad/tree/improve-drawing-quality .

Gracias, acabo de tomar el compilado de la página de demostración y lo implementé en producción. Te dejaré saber cómo se está recibiendo en las próximas 1 a 3 semanas.

@halo y @szimek : eche un vistazo a estos dos enlaces, puede ser útil

• http://paperjs.org/examples/path-simplification/
• http://thejosephturner.com/simpleline/

@fa-at-pulsit ¡Gracias! Sin embargo, ambos ejemplos simplifican la ruta después de que el usuario deja de dibujarla, lo que me gustaría evitar. Tal vez me dé por vencido en algún momento y opte por esta solución, pero espero que sea posible obtener mejores resultados sin una latencia notable.

Me gustaría evitar el posprocesamiento/la corrección automática

Sólo por curiosidad, ¿por qué es eso?

• [ ] Mantener el código simple y robusto, evitando errores
• [ ] No arruinar la experiencia del usuario final con fallas visuales
• [ ] Bloqueo que evita, por ejemplo, exponer el flujo de dibujo mientras se escribe
• [ ] Las soluciones de posprocesamiento existentes no son lo suficientemente maduras

Por cierto, a partir de los comentarios subjetivos que recibí de los usuarios finales durante la semana pasada, puedo decir que la calidad del dibujo se percibió de inmediato como "claramente mejorada" (por firmantes que recurren regularmente). Veré si puedo obtener más carne hasta el hueso, pero no podré exponer firmas del mundo real aquí para comparar.

Todo lo que puedo decir es que la mayoría de la gente escribe ridículamente lento y pequeño, no importa cuánto les digas. ;) Además, sospecho que el dispositivo (Surface Pro) es el principal culpable. En algún momento, usar un iPad con uno de esos elegantes bolígrafos nuevos puede darme más información sobre eso.

@szimek este otro ejemplo simplificó el camino sobre la marcha (creo que sí)
mira este video https://www.youtube.com/watch?v=H79iUsai6uc
fuentes -> https://github.com/eur00t/Effective-Curve-Fitting
y obtengo un efecto mucho mejor en la retina con el cambio de tamaño del lienzo como
<canvas width="1000" height="200" style="width: 500px; height: 100px;"/>

@fa-at-pulsit ¡Gracias! Jugué un poco más con la aplicación iMessage y (probablemente gracias a mi súper lento iPhone 5) noté que también realiza un posprocesamiento sobre la marcha, pero es muy sutil y apenas perceptible.

Primero tengo que lanzar una nueva versión con algunas correcciones de errores, pero luego intentaré lanzar una nueva versión con puntos de omisión opcionales que están demasiado cerca uno del otro y luego analizaré esto sobre la marcha con el posprocesamiento: se ve realmente prometedor.

Entonces, después de 1,5 meses en producción, puedo decir con confianza que la calidad ha mejorado mucho con este PR. Varias docenas de personas han firmado una y otra vez y se ve mucho mejor en comparación con cómo se veían sus firmas antes.

Primero tengo que lanzar una nueva versión con algunas correcciones de errores, pero luego intentaré lanzar una nueva versión con puntos de omisión opcionales que están demasiado cerca uno del otro.

¡Hola! ¿Vas a necesitar compatibilidad con versiones anteriores? ¿O es solo este compromiso tal como es?

EDITAR: Mi error, ya se fusionó a través de este compromiso , ¿verdad? ¡¡Gracias de verdad!!

¿Hay alguna forma de mejorar la velocidad de dibujo?