stylus_note Unterschrift-Generator (Zeichnen & Herunterladen) star

Wie der weiche Tinten-Effekt funktioniert

Wenn Sie eine Maus oder einen Finger über ein Touchpad oder einen Touchscreen ziehen, meldet der Browser nur eine Reihe roher Koordinatenpunkte entlang des Pfades — und bei normaler Zeichengeschwindigkeit liegen diese Punkte weit genug auseinander, dass eine Verbindung mit geraden Linien ein sichtbar kantiges, facettiertes Ergebnis erzeugt, besonders bei schnellen Strichen wie dem Schlussschwung einer Unterschrift. Echte Tinte bewegt sich nicht so; ein Stift gleitet in durchgehenden Kurven. Um diese Lücke zu schließen, zeichnet dieses Tool überhaupt keine geraden Linien zwischen den rohen Punkten — es leitet jeden Punktabschnitt durch eine quadratische Bézier-Kurveninterpolation und behandelt aufeinanderfolgende Punkte als Kontrollpunkte, die die Linie sanft zwischen ihnen biegen, statt hart von einem zum nächsten zu springen.

Dies ist dieselbe zugrunde liegende mathematische Idee, die auch die Kurvenwerkzeuge in Vektor-Illustrationssoftware verwenden: Ein Kontrollpunkt zieht den Pfad einer Linie zu sich hin, ohne dass die Linie zwangsläufig durch ihn hindurchläuft, wodurch ein weicher Bogen statt einer Ecke entsteht. Angewendet auf Freihandstriche in Echtzeit während des Zeichnens, verwandelt das die rohe, eckige Mausspur in etwas, das wie natürliche Handschrift wirkt statt wie eine Verbinde-die-Punkte-Skizze — je schneller und unregelmäßiger die Eingabe, desto wichtiger wird diese Glättung.

Was Sie vor dem Herunterladen wissen sollten

Alles geschieht auf einem HTML-Canvas in Ihrem Browser — nichts wird hochgeladen, und nichts bleibt erhalten, sobald Sie die Seite verlassen, laden Sie Ihr PNG also herunter, bevor Sie wegnavigieren. Wählen Sie schwarze oder blaue Tinte und eine Strichstärke, machen Sie einzelne Striche einen nach dem anderen rückgängig, falls eine Linie danebengeht, und exportieren Sie entweder ein PNG mit transparentem Hintergrund (fügt sich sauber in jedes Dokument ein) oder eine Version mit weißem Hintergrund für Formulare, die Transparenz ablehnen. Ein rechtlicher Hinweis, der erwähnenswert ist: Ein Bild einer handschriftlichen Unterschrift wird für alltägliche Freigaben und interne Unterlagen im Allgemeinen akzeptiert, ist aber im rechtlichen Sinne nicht dasselbe wie eine qualifizierte elektronische Signatur — Verträge, die ausdrücklich eine qualifizierte E-Signatur erfordern, benötigen einen zertifikatsbasierten Anbieter, keine Bilddatei.

Die Glättung gleicht zudem eine Hardware-Einschränkung aus: Touchscreens und Trackpads tasten die Position mit einer festen Rate ab, üblicherweise irgendwo zwischen 60 und 120 Mal pro Sekunde, sodass selbst eine vollkommen ruhige echte Hand nach der digitalen Erfassung eine kantige Polylinie statt einer durchgehenden Kurve erzeugt. Die Bézier-Interpolation verwandelt diese abgetastete Polylinie zurück in etwas, das wie durchgehende Tinte wirkt, weshalb dieselbe Technik nicht nur bei Unterschriften-Pads, sondern breit gestreut in Vektor-Stiftwerkzeugen, digitalen Zeichentabletts und stiftbasierten Notiz-Apps auftaucht.