Signature_pad: Zeichenqualität verbessern

Dies ist ein schnelles und schmutziges Experiment, das ich letzten Sommer gemacht habe. Die Idee ist, den Pfad mit einer Funktion über einem sich bewegenden Fenster zu glätten. Das Fenster ist im Code festgelegt, kann jedoch basierend auf der Geschwindigkeit angepasst werden. Der Einfachheit halber habe ich eine feste Stiftbreite verwendet.
http://scvsa-servizi.campusnet.unipr.it/tools/signature/signature_pad/example/

Kl.

@claudiorivetti Das ist wirklich toll! Ich werde das überprüfen. Ich erinnere mich, dass eine der Google-Zeichen-Apps dieselbe Lösung verwendete. Das Seltsame an iMessage ist jedoch, dass die Verzögerung nicht länger ist als in dieser Bibliothek ...

Wenn Sie anstelle eines Stifts einen Finger zum Zeichnen verwenden, ist der Berührungspunkt ziemlich breit (mit Sicherheit breiter als ein Pixel), und ich bin mir nicht sicher, wie mobile Apps oder Browser die genauen Koordinaten von Berührungsereignissen tatsächlich herausfinden Fall. Vielleicht wäre es möglich, die vom Browser empfangenen Koordinaten basierend auf den Koordinaten der vorherigen Punkte und der aktuellen Geschwindigkeit irgendwie anzupassen und nicht nur Pfade zwischen ihnen zu interpolieren. Ich bin mir nicht sicher, ob es Sinn macht oder ob ich Zeit haben werde, damit zu experimentieren. Ich müsste die Punkte sichtbar machen, um zu sehen, ob die Kurven selbst verbessert werden könnten oder ob die Punkte nicht auf den "idealen" Linien liegen.

@claudiorivetti Das ist schön, wie bekomme ich solche Magie? :) Zugegeben, etwas realistischer müsste es schon sein, entweder ganz dynamisch, oder vielleicht reicht auch nur eine dickere Linie.

Die meisten Leute, die ich beobachtet habe, schreiben aus irgendeinem Grund langsam und es sieht eher aus wie aus den 90ern. Ich kann die harten Ecken einfach nicht loswerden, indem ich die SignaturePad-Eingabeparameter anpasse:

( PS: Egal ob auf Desktop, iPhone, mit Tablet-Stift oder nur mit dem Finger. Es sieht immer gleich aus. Die Leinwand hat 1200x600 Pixel im Maßstab 3,3 (also 400x400px). Ich glaube nicht die Auflösung ist das Problem)

Was mir auffällt, ist, dass andere Bibliotheken überhaupt keine dynamische Breite haben, mir aber im Allgemeinen "sauberer" erscheinen. ZB im Vergleich zu dem Bild, das ich oben gepostet habe.

Supersignature korrigiert die Kurven automatisch

jSignature ) ist etwas wackeliger, aber immer noch nicht pixelig.

@halo Ich möchte die Nachbearbeitung / automatische Korrektur vermeiden, obwohl ich zustimme, dass die Ergebnisse normalerweise viel schöner sind. Die Sache ist, dass es zumindest in iMessage möglich ist, glatte Linien ohne merkliche Nachbearbeitung zu haben. Es gibt ein paar Dinge, die ich ausprobieren möchte, zB Punkte überspringen, die zu nahe beieinander liegen. Drosselung wurde kürzlich hinzugefügt, aber wenn jemand sehr langsam zeichnet, hilft es nicht viel.

Eine andere Sache ist, dass ich diese Bibliothek nicht mehr verwende. Wenn ich also kein Beispiel finde, wie man glattere Linien liefert (genau wie ich es mit Posts von Square getan habe), werde ich nicht viel Zeit haben, es zu untersuchen ich selbst.

@halo Ich habe ein schnelles Experiment durchgeführt, bei dem ich einen Punkt überspringe, wenn er zu nahe am vorherigen liegt. Es scheint die Zeichenqualität zu verbessern, wenn man sehr langsam zeichnet, führt aber zu einer merklichen Verzögerung. Immer noch ziemlich weit von dem entfernt, was in iOS iMessage- oder Notes-Apps möglich ist:/ Die Demo ist unter http://signature-pad.surge.sh/ verfügbar, und Sie können versuchen, den Wert signaturePad.minDistance zu ändern, um zu sehen, wie sich dies auswirkt die Zeichnung. Der Standardwert ist 5, was bedeutet, dass, wenn der vorherige Punkt näher als 5 Pixel am neuen liegt, der neue übersprungen wird.

Außerdem habe ich ein Timing mit der Funktion performance.now zu #_updateStroke hinzugefügt (in der Demo nicht vorhanden) und es sieht so aus, als würde es weniger als 1 dauern, es sei denn, es läuft etwas Asynchrones oder ich habe etwas durcheinander gebracht Millisekunde, um einen Punkt hinzuzufügen und eine Kurve zu zeichnen. Das bedeutet, dass genügend Zeit für ausgefallenere Verarbeitungen bleibt.

Ich werde dies sehr dankbar in der Produktion mit echten Benutzern ausprobieren und Ihnen Feedback geben. Haben Sie einen Zweig auf Github oder eine Dist-Datei, die ich verwenden kann?

Ich mag den Ansatz, vielen Dank, dass Sie es versucht haben.

BEARBEITEN : Ich denke, ich kann einfach http://signature-pad.surge.sh/js/signature_pad.js verwenden

@halo Wenn Sie Ihre eigene Version erstellen möchten (z. B. verkleinert), habe ich sie einfach in den Zweig https://github.com/szimek/signature_pad/tree/improve-drawing-quality verschoben.

Vielen Dank, ich habe gerade die kompilierte Version von der Demoseite genommen und in der Produktion bereitgestellt. Ich werde Sie in den nächsten 1-3 Wochen darüber informieren, wie es angenommen wird.

@halo & @szimek - schau dir diese beiden Links an, es kann hilfreich sein

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

@fa-at-pulsit Danke! Beide Beispiele vereinfachen jedoch den Pfad, nachdem der Benutzer aufhört, ihn zu zeichnen, was ich vermeiden möchte. Vielleicht gebe ich irgendwann auf und gehe einfach mit dieser Lösung, aber ich hoffe, dass es möglich ist, ohne spürbare Latenz bessere Ergebnisse zu erzielen.

Ich möchte Nachbearbeitung/Autofixing vermeiden

Nur aus Neugier, warum ist das so?

• [ ] Halten Sie den Code einfach und robust, vermeiden Sie Fehler
• [ ] Das Benutzererlebnis wird nicht durch visuelle Störungen beeinträchtigt
• [ ] Lock-in, das verhindert, dass zB der Zeichenstrom beim Schreiben offengelegt wird
• [ ] Bestehende Nachbearbeitungslösungen sind nicht ausgereift genug

Übrigens kann ich aus dem subjektiven Feedback, das ich in der letzten Woche von Endbenutzern erhalten habe, erkennen, dass die Zeichnungsqualität sofort als "deutlich verbessert" (von regelmäßig wiederkehrenden Unterzeichnern) wahrgenommen wurde. Ich werde sehen, ob ich noch mehr Fleisch bis auf die Knochen bekommen kann, aber ich werde hier keine Unterschriften aus der realen Welt zum Vergleich zeigen können.

Alles, was ich sagen kann, ist, dass die meisten Leute lächerlich langsam und klein schreiben, egal, wie viel Sie ihnen sagen. ;) Außerdem vermute ich, dass das Gerät (Surface Pro) ein Hauptschuldiger ist. Irgendwann kann mir die Verwendung eines iPad mit einem dieser schicken neuen Stifte mehr Einblick geben.

@szimek dieses andere Beispiel hat den Pfad im laufenden Betrieb vereinfacht (glaube ich)
Schauen Sie sich dieses Video an https://www.youtube.com/watch?v=H79iUsai6uc
Quellen -> https://github.com/eur00t/Effective-Curve-Fitting
und ich bekomme viel bessere Wirkung auf die Netzhaut, wenn ich die Größe der Leinwand ändere
<canvas width="1000" height="200" style="width: 500px; height: 100px;"/>

@fa-at-pulsit Danke! Ich habe ein bisschen mehr mit der iMessage-App gespielt und (wahrscheinlich dank meines super langsamen iPhone 5) ist mir aufgefallen, dass es auch spontan nachbearbeitet wird, aber es ist sehr subtil und kaum wahrnehmbar.

Ich muss zuerst eine neue Version mit einigen Fehlerkorrekturen veröffentlichen, aber dann werde ich versuchen, eine neue Version mit optionalen Sprungpunkten zu veröffentlichen, die zu nahe beieinander liegen, und mich dann mit der spontanen Nachbearbeitung befassen - es sieht wirklich so aus vielversprechend.

Also, nach 1,5 Monaten in der Produktion kann ich getrost sagen, dass sich die Qualität durch diese PR stark verbessert hat. Mehrere Dutzend Leute haben immer wieder unterschrieben und es sieht viel besser aus im Vergleich zu dem, was ihre Unterschriften vorher aussahen.

Ich muss zuerst eine neue Version mit einigen Fehlerkorrekturen veröffentlichen, aber dann werde ich versuchen, eine neue Version mit optionalen Sprungpunkten zu veröffentlichen, die zu nahe beieinander liegen

Hallo! Benötigen Sie Abwärtskompatibilität? Oder ist es nur dieses Commit wie es ist?

EDIT: Mein Fehler, es wurde bereits über dieses Commit eingefügt, oder? Vielen Dank!

Gibt es eine Möglichkeit, die Ziehgeschwindigkeit zu verbessern?