So erstellen Sie ein Unterschriftenpad in React

Blog

So erstellen Sie ein Unterschriftenpad in React

Kürzlich wurde ich von einem Kunden gebeten, ein Formular zu erstellen, mit dem Benutzer mit einer drahtlosen Stiftmaus unterschreiben können. Das Ziel des Kunden war es, Benutzersignaturen für einen Bericht zu erhalten, der für ein zukünftiges Audit verwendet werden sollte.

Zuerst überlegte ich, mein eigenes Unterschriftenpad von Grund auf neu zu bauen. Dafür hatte ich allerdings keine Zeit. Diese Funktion musste in einer Woche verfügbar sein. Dies ist leider die Realität bei der Arbeit in realen Lebenssituationen. Deshalb wollte ich über diesen konkreten Fall schreiben. Sie werden nicht immer die Zeit haben, jede einzelne Funktion in einer App von Grund auf neu zu erstellen. Manchmal muss man sich auf Bibliotheken verlassen, die von anderen Entwicklern erstellt wurden. Dieser Artikel wird Anfängern helfen zu sehen, wie Sie verschiedene Bibliotheken kombinieren können, um ein funktionierendes Produkt zu erstellen.

OK, beginnen Sie mit dem Erstellen des Unterschriftenpads. Zuerst schrieb ich a Benutzer Geschichte . Unten ist die User Story für das, was wir bauen werden:

  • Der Benutzer sieht eine Schaltfläche, die angeklickt werden kann, um ein Popup zu öffnen
  • Der Benutzer kann auf einer Leinwand sehen und zeichnen, wenn das Popup geöffnet ist
  • Der Benutzer hat die Möglichkeit, das Popup über eine Schaltfläche 'Schließen' zu verlassen, die Leinwand über eine Schaltfläche 'Löschen' zu löschen oder die Signatur über die Schaltfläche 'Speichern' als Bild zu speichern.

Jetzt, da wir wissen, was wir bauen, können wir mit der Codierung beginnen. Wir können die Elemente der User Story-Liste als Meilensteine ​​verwenden.

Der Benutzer sieht eine Schaltfläche, die angeklickt werden kann, um ein Popup zu öffnen

Ich werde React für diese Aufgabe verwenden, also können wir das Projekt mit create-react-app booten.

Dazu müssen wir nur den folgenden Befehl auf unserem Terminal eingeben:

App.js

Weitere Informationen zur create-react-app finden Sie hier Github-Repository

Sobald unser Projekt fertig ist, navigieren wir in unseren Ordner und starten unseren Code-Editor. In meinem Fall verwende ich VS-Code .

App.js

Nachdem wir nun alles eingerichtet haben, können Sie unser Projekt starten, indem Sie den folgenden Befehl eingeben:

Popup

Das sollten wir sehen, sobald das Projekt beginnt:

Wenn du dein |_+_| . öffnest Datei das sollten wir sehen:

Lassen Sie uns all diesen Code loswerden und das eine hinzufügen, was wir brauchen. Eine Schaltfläche, die beim Anklicken ein Popup mit einem Unterschriftenpad öffnen sollte, so unsere User Story.

So sollte unsere App jetzt aussehen:

Unser letzter Schritt für diesen Teil des Projekts besteht darin, ein Popup anzuzeigen, wenn auf die Schaltfläche geklickt wird. Eine gute Bibliothek, die dabei helfen kann, ist Reactjs-Popup. Um es zu installieren, geben wir ein

Popup

Diese Bibliothek kann zum Erstellen von Popup-Modellen, QuickInfos und verschachtelten Menüs verwendet werden. In unserem Fall konzentrieren wir uns darauf, damit Popup-Modelle zu erstellen. Weitere Informationen dazu finden Sie in ihren sehr hilfreichen Dokumentationsseite

Sobald wir die Bibliothek installiert haben, importieren wir sie in unser |_+_| Datei. Als nächstes fügen wir die |_+_| . hinzu Komponente unserer Render-Methode. Diese Komponente nimmt viele Requisiten auf. In unserem Fall konzentrieren wir uns auf zwei: modale Requisiten (standardmäßig ist dies false, was zu einem Tooltip führt) und die Trigger-Requisiten, die eine Komponente aufnehmen, die das Popup auslöst. In unserem Fall ist dies unser Button, den wir bereits erstellt haben.

Wenn wir jetzt auf die Schaltfläche klicken, sollten wir ein Popup erhalten. Der Inhalt des Popups wird in unser |_+_| . eingefügt Komponente.

Das sollten wir jetzt haben:

Wir haben den ersten Teil unserer User Story erfolgreich abgeschlossen. Jetzt lasst uns mehr zum nächsten!

Der Benutzer kann auf einer Leinwand sehen und zeichnen, wenn das Popup geöffnet ist

Um die Leinwand in unserem Popup zu erstellen, verwenden wir React-Signatur-Canvas. Dies ist eine leistungsstarke Bibliothek, die die Arbeit mit einem Unterschriftenpad sehr einfach macht. Vor allem, wenn wir darüber nachdenken, unserem Pad Funktionen wie Löschen und Speichern hinzuzufügen.

Um es zu installieren, geben wir Folgendes ein:

SignatureCanvas

Sobald wir das installiert haben, importieren wir die |_+_| Komponente und platzieren Sie sie in unserem |_+_| Komponente. Das ist alles!

Wir haben jetzt eine Leinwand in unserem Popup. So sieht der Code aus:

und das sollte unsere App zeigen:

Bevor wir zum nächsten Element in der User Story übergehen, fügen wir unserer Leinwand etwas Styling hinzu. Alles, was ich tun werde, ist, unserer Leinwand einen Rahmen zu geben, damit wir sie leicht identifizieren und ihr eine Breite und Höhe zuweisen können.

die |_+_| Komponente hat eine Requisite namens |_+_| was es uns ermöglicht, Attribute an die Leinwand zu übergeben. In diesem Fall gebe ich dem Canvas eine Klasse namens signatureCanvas.

Sie haben wahrscheinlich bemerkt, dass ich auch eine CSS-Datei namens |_+_| importiere. Hier werde ich alle meine leinwandbezogenen Stile platzieren.

Das Ergebnis sollte so aussehen:

OK, bereit für unseren letzten Schritt.

Der Benutzer hat die Möglichkeit, das Popup über eine Schaltfläche „Schließen“ zu verlassen, die Leinwand über eine Schaltfläche „Löschen“ zu löschen oder die Signatur über die Schaltfläche „Speichern“ als Bild zu speichern.

Beginnen wir mit dem Schließen-Button. Lassen Sie uns eine Schaltfläche mit einem onClick hinzufügen, in der onClick eine Möglichkeit ist, das Popup zu schließen. Die |_+_| docs empfehlen, dem |_+_| . eine Funktion als Kind bereitzustellen Komponente. diese Funktion hat einen Parameter |_+_| das behandelt unser close-Ereignis und gibt die Komponenten zurück, die wir im Popup haben wollen.

Darüber hinaus sollten wir Benutzern nicht erlauben, das Popup außer über diese Schaltfläche zu schließen. Dazu müssen wir die |_+_| prop und übergeben Sie ihm einen wahren Wert.

So sieht unsere App jetzt aus:

Als nächstes brauchen wir eine Schaltfläche, um die Leinwand zu löschen. |_+_| bietet verschiedene Methoden, die bei der Manipulation unserer Leinwand helfen. Um diese Methode zu verwenden, müssen wir einen Moment unserer Leinwand abrufen. Dies kann über React refs erfolgen.

Verwenden Sie dafür React Hooks. Zuerst erstellen wir eine Referenz namens |_+_| mit |_+_| Hook, der Anfangswert ist ein leeres Objekt. Als nächstes übergeben wir dies in ein |_+_| Komponente mit einer Requisite namens ref. schließlich erstellen wir eine Funktion namens |_+_| die jedes Mal aufgerufen wird, wenn auf die Schaltfläche zum Löschen geklickt wird.

innerhalb der clear-Funktion rufen wir einfach die Methode |_+_| . auf über unsere Canvas-Ref |_+_|. Mir ist klar, dass dies viele Schritte sind, also habe ich Kommentare in den unten gezeigten Code geschrieben:

So sollte unsere App jetzt aussehen:

Nun zum letzten Button, dem Speichern-Button. Diese Schaltfläche sollte einfach einen base64-String ausgeben, der das Bild repräsentiert. Sie können dies verwenden, um es in einer Datenbank zu speichern, oder Sie können das Bild stattdessen auf Ihren Server hochladen. In unserem Fall werden wir keine Verbindung zu Servern herstellen, also loggen wir einfach den Base64-Code in die Konsole ein.

|_+_| hat eine Methode namens |_+_| das kann den Leerraum von der Leinwand abschneiden (um das Bild zu optimieren) und einen base64-String zurückgeben, der das Bild repräsentiert. All dies über unser |_+_| ref.

So sollte unsere App jetzt aussehen:

In Ordung! alle Grundfunktionen sind komplett!

HTML-Code für Pacman

Ich möchte diesem Projekt einen weiteren Teil hinzufügen. Lassen Sie uns die gespeicherte Signatur auf unserem Bildschirm ausgeben, anstatt sie nur zu protokollieren.

Wir können einfach ein Bild-Tag unter unserem Popup-Button hinzufügen und ihm unsere Bild-URL übergeben. Natürlich wird diese Bild-URL diejenige sein, die wir in der Konsole angemeldet haben, also können wir sie stattdessen im Status speichern.

Das sollte das Ergebnis sein:

Das war's Leute! wir haben unsere User Story erfolgreich abgeschlossen. Natürlich gibt es Raum für Verbesserungen, aber alle grundlegenden Funktionen sind vorhanden.

Sie können mit dem Code herumspielen und ihm weitere Funktionen hinzufügen, indem Sie den Anweisungen folgen Verknüpfung

Ich hoffe, dieses Tutorial wird Ihnen sicherlich helfen, und wenn Ihnen dieses Tutorial gefallen hat, ziehen Sie es in Betracht, es mit anderen zu teilen.

Weiterlesen

React - Das komplette Handbuch (inkl. Hooks, React Router, Redux)

Modernes Reagieren mit Redux [2019-Update]

Die 50 besten React-Interview-Fragen für Frontend-Entwickler im Jahr 2019

Ursprünglich veröffentlicht am dev.to

#reactjs #react-native #javascript #web-entwicklung