Signature_pad: Améliorer la qualité du dessin

C'est une expérience rapide et sale que j'ai faite l'été dernier. L'idée est de lisser le chemin avec une fonction sur une fenêtre mobile. La fenêtre est définie dans le code mais peut être ajustée en fonction de la vitesse. Pour plus de simplicité, j'ai utilisé une largeur de stylo fixe.
http://scvsa-servizi.campusnet.unipr.it/tools/signature/signature_pad/example/

cl.

@claudiorivetti C'est vraiment génial ! Je vérifierai. Je me souviens qu'une des applications de dessin de Google utilisait la même solution. Cependant, la chose étrange à propos d'iMessage est que le décalage n'est pas plus long que dans cette bibliothèque...

Si vous utilisez un doigt pour dessiner, au lieu d'un stylet, le point tactile est assez large (bien sûr plus large qu'un pixel) et je ne sais pas vraiment comment les applications mobiles ou les navigateurs déterminent réellement les coordonnées exactes des événements tactiles dans de tels Cas. Peut-être serait-il possible d'ajuster d'une manière ou d'une autre les coordonnées reçues par le navigateur en fonction des coordonnées des points précédents et de la vitesse actuelle et non seulement d'interpoler les chemins entre eux. Je ne sais pas si cela a du sens ou si j'aurai le temps de l'expérimenter. Je devrais rendre les points visibles pour voir si les courbes elles-mêmes pourraient être améliorées ou si les points ne sont pas le long des lignes "idéales".

@claudiorivetti C'est magnifique, comment puis-je obtenir une telle magie ? :) Certes, cela devrait être un peu plus réaliste, soit entièrement dynamiquement, soit peut-être qu'une ligne plus épaisse suffirait peut-être.

La plupart des gens que j'ai observés écrivent lentement pour une raison quelconque et cela ressemble plutôt aux années 90. Je ne peux tout simplement pas me débarrasser des coins durs en ajustant les paramètres d'entrée du SignaturePad :

( PS : peu importe que ce soit sur un ordinateur de bureau, un iPhone, avec un stylet de tablette ou juste un doigt. Il a toujours le même aspect. La toile est de 1 200 x 600 pixels à l'échelle 3,3 (donc, 400 x 400 pixels). Je ne pense pas la résolution est le problème)

Ce qui me frappe, c'est que les autres bibliothèques n'ont pas du tout de largeur dynamique, mais me semblent généralement "plus propres". Par exemple par rapport à l'image que j'ai posté ci-dessus.

supersignature corrige automatiquement les courbes

jSignature ) est un peu plus fragile, mais toujours pas pixelisé.

@halo J'aimerais éviter le post-traitement/la correction automatique, bien que je convienne que les résultats sont généralement beaucoup plus agréables. Le fait est que, au moins dans iMessage, il est possible d'avoir des lignes fluides sans aucun post-traitement notable. Il y a quelques choses que j'aimerais essayer, par exemple sauter des points qui sont trop proches les uns des autres. La limitation a été ajoutée récemment, mais si quelqu'un dessine très lentement, cela n'aidera pas beaucoup.

Une autre chose est que je n'utilise plus cette bibliothèque, donc à moins que je ne trouve un exemple pour fournir des lignes plus lisses (comme je l'ai fait avec les messages de Square ), je ne pense pas que j'aurai beaucoup de temps pour l'étudier moi même.

@halo J'ai fait une expérience rapide, où je saute un point s'il est trop proche du précédent. Il semble améliorer la qualité du dessin lorsque l'on dessine très lentement, mais introduit un décalage notable. Encore assez loin de ce qui est possible dans les applications iOS iMessage ou Notes :/ La démo est disponible sur http://signature-pad.surge.sh/ et vous pouvez essayer de modifier la signaturePad.minDistance pour voir son impact le dessin. La valeur par défaut est 5, ce qui signifie que si le point précédent est à moins de 5 pixels du nouveau, le nouveau est ignoré.

De plus, j'ai ajouté un timing en utilisant la fonction performance.now à #_updateStroke (non présente dans la démo) et, à moins qu'il y ait quelque chose d'asynchrone ou que j'ai gâché quelque chose, il semble que cela prenne moins de 1 milliseconde pour ajouter un point et tracer une courbe. Cela signifie qu'il y a beaucoup de temps pour faire un traitement plus sophistiqué.

Je serai très reconnaissant de l'essayer en production avec de vrais utilisateurs et de vous faire part de mes commentaires. Avez-vous une branche sur Github ou un fichier dist que je peux utiliser ?

J'aime l'approche, merci beaucoup d'avoir essayé.

EDIT : je pense que je peux simplement utiliser http://signature-pad.surge.sh/js/signature_pad.js

@halo Si vous souhaitez créer votre propre version (par exemple minifiée), je l'ai simplement poussée vers la branche https://github.com/szimek/signature_pad/tree/improve-drawing-quality .

Merci, je viens de prendre celui compilé de la page de démonstration et de le déployer en production. Vous fera savoir comment il est reçu dans les 1 à 3 prochaines semaines.

@halo & @szimek - jetez un oeil sur ces deux liens, cela peut être utile

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

@fa-at-pulsit Merci ! Cependant, les deux exemples simplifient le chemin après que l'utilisateur arrête de le dessiner, ce que j'aimerais éviter. Peut-être que j'abandonnerai à un moment donné et que j'opterai pour cette solution, mais j'espère qu'il est possible d'obtenir de meilleurs résultats sans latence notable.

J'aimerais éviter le post-traitement/la correction automatique

Juste par curiosité, pourquoi ?

• [ ] Garder le code simple et robuste, éviter les bugs
• [ ] Ne pas gâcher l'expérience de l'utilisateur final avec des problèmes visuels
• [ ] Verrouillage qui empêche, par exemple, d'exposer le flux de dessin pendant l'écriture
• [ ] Les solutions de post-traitement existantes ne sont pas assez matures

Soit dit en passant, d'après les commentaires subjectifs que j'ai reçus des utilisateurs finaux au cours de la semaine dernière, je peux dire que la qualité du dessin a immédiatement été appréhendée comme "s'est nettement améliorée" (par des signataires récurrents). Je verrai si je peux obtenir un peu plus de viande jusqu'à l'os, mais je ne pourrai pas exposer ici les signatures du monde réel à des fins de comparaison.

Tout ce que je peux dire, c'est que la plupart des gens écrivent ridiculement lentement et petit, peu importe ce que vous leur dites. ;) De plus, je soupçonne l'appareil (Surface Pro) d'être le principal coupable. À un moment donné, l'utilisation d'un iPad avec l'un de ces nouveaux stylos sophistiqués peut me donner plus d'informations à ce sujet.

@szimek cet autre exemple a simplifié le chemin à la volée (je pense que oui)
jetez un oeil sur cette vidéo https://www.youtube.com/watch?v=H79iUsai6uc
sources -> https://github.com/eur00t/Effective-Curve-Fitting
et j'obtiens un bien meilleur effet sur la rétine avec le redimensionnement de la toile comme
<canvas width="1000" height="200" style="width: 500px; height: 100px;"/>

@fa-at-pulsit Merci ! J'ai joué un peu plus avec l'application iMessage et (probablement grâce à mon iPhone 5 super lent) j'ai remarqué qu'il faisait aussi du post-traitement à la volée, mais c'est très subtil et à peine perceptible.

Je dois d'abord publier une nouvelle version avec quelques corrections de bogues, mais ensuite j'essaierai de publier une nouvelle version avec des points de saut facultatifs trop proches les uns des autres, puis j'examinerai cela à la volée après le traitement - ça a l'air vraiment prometteur.

Ainsi, après 1,5 mois de production, je peux affirmer avec confiance que la qualité s'est grandement améliorée grâce à ce PR. Plusieurs dizaines de personnes ont signé encore et encore et cela semble bien meilleur par rapport à ce à quoi ressemblaient leurs signatures auparavant.

Je dois d'abord publier une nouvelle version avec quelques corrections de bogues, mais ensuite j'essaierai de publier une nouvelle version avec des points de saut facultatifs qui sont trop proches les uns des autres

Salut! Allez-vous avoir besoin d'une rétrocompatibilité ? Ou est-ce juste ce commit tel qu'il est?

EDIT : Mon mauvais, il est déjà fusionné via ce commit , n'est-ce pas ? En effet, merci!!

Existe-t-il un moyen d'améliorer la vitesse de tirage?