Beispielcode für die Verwendung von Canvas zur Implementierung einer Online-Signatur

Mit der rasanten Entwicklung der Computer- und Netzwerktechnologie wird die Online-Signaturtechnologie zunehmend in papierlosen Büros eingesetzt. Diese intuitive und bequeme Bedienung kann nicht nur die Büroeffizienz erheblich verbessern, sondern nutzt auch digitale Speichermethoden, um herkömmliche Probleme wie Schwierigkeiten beim Speichern und Abrufen zu vermeiden Unterschriften auf Papier. In unserem täglichen Leben gibt es bereits viele Szenarien, in denen Online-Signaturtechnologie zum Einsatz kommt, wie zum Beispiel: Unterschrift am POS-Automaten, Unterschrift für Expressversand, Geschäftsunterschrift von Banken oder Behörden usw. Kürzlich arbeite ich an den Geschäftsverarbeitungsanforderungen des Unternehmens, die auch Online-Signaturen umfassen. Wir verwenden die Canvas-Technologie, um sie zu implementieren. Lassen Sie uns als Nächstes darüber sprechen, wie Sie Canvas zur Implementierung von Online-Signaturen verwenden.

Canvas ist ein neues Element in HTML5, das zum Zeichnen von Grafiken auf Webseiten verwendet wird. Es wurde von Apple im Webbrowser Safari 1.3 eingeführt. Der Grund für die Erweiterung von HTML besteht darin, dass die Zeichenfunktionen von HTML in Safari auf Mac OS X verwendet werden können Desktop-Komponente, und Apple wollte auch eine Möglichkeit, Skriptgrafiken im Dashboard zu unterstützen. Auch die beiden Browser Firefox 1.5 und Opera 9 folgten dem Beispiel von Safari und begannen, Canvas zu unterstützen.

Nun ist das Canvas-Tag eine der größten Verbesserungen in HTML5, denn es ermöglicht uns, das grafische Design von Webseiten ohne den Einsatz von Bildern umzusetzen. Es ist wie eine Leinwand. Es verfügt über keine Zeichenfunktionen, aber es zeigt die Zeichen-API für Client-JavaScript an. Mit der Unterstützung von JavaScript können wir es im Rahmen der Leinwand verwenden, um den gewünschten Effekt zu erzielen.

Diese Funktion kann unabhängig davon implementiert werden, ob es sich um Canvas, SVG oder Flash handelt. Aber warum haben wir uns für Canvas entschieden?

Da wir mobile Plattformen funktional unterstützen müssen, können wir Flash nicht direkt unterstützen, aber Canvas und SVG verfügen beide über gute plattformübergreifende Funktionen.

• Canvas basiert auf Pixeln und bietet 2D-Zeichenfunktionen. Die bereitgestellten Funktionen sind für die Pixelverarbeitung, das dynamische Rendern und das Zeichnen großer Datenmengen geeignet. Sie zeichnen den Prozess nach dem Zeichnen grundsätzlich nicht auf Auch große Hersteller haben den Hardwarebeschleunigungsmechanismus von Canvas längst implementiert.
• SVG ist ein Vektor, der eine Reihe grafischer Elemente mit umfassenderen Funktionen bereitstellt und eine große Anzahl interaktiver Objekte erstellt. Er ist in der Natur besser in der Lage, seine Leistung ist jedoch schwächer und er eignet sich besser für die Anzeige statischer Bilder -Fidelity-Anwendungsszenarien zum Anzeigen und Drucken von Dokumenten.

Beide haben ihre eigenen Fachgebiete. Basierend auf dem oben Gesagten haben wir Canvas für die Implementierung der Signaturfunktion ausgewählt.

Schauen wir uns als Nächstes den Implementierungseffekt an.

Nachdem wir die Quelle von Canvas, die Technologieauswahl und den endgültigen Rendering-Effekt verstanden haben, werden wir aus den fünf Teilen Erstellen, Zeichnen, Überwachen, Neuzeichnen und Bildverarbeitung schreiben. Lassen Sie uns gemeinsam in die Welt des Canvas-Zeichnens eintauchen.

Zuerst müssen wir feststellen, ob der Browser Canvas unterstützt:

 isCanvasSupported = (): boolean => { let elem = document.createElement('canvas'); return !!(elem.getContext && elem.getContext('2d'));}

Wählen Sie dann, ob Sie eine Leinwand erstellen oder Eingabeaufforderungen basierend auf den Beurteilungsergebnissen anzeigen möchten.

 {isCanvasSupported ? <canvas ref={canvas => (this.canvas = canvas)} height={canvasHeight} width={canvasWidth}> :Leider unterstützt der aktuelle Browser diese Funktion nicht! }

Wir wissen, dass jeder Canvas-Knoten ein entsprechendes Kontextobjekt hat, das wir erhalten können, indem wir ihm direkt die Zeichenfolge 2d als einzigen Parameter über die Methode getContext() des Canvas-Objekts übergeben. Als nächstes erhalten wir das Canvas-Element über ref und dann über die Methode getContext() eine Zeichenumgebung auf der Leinwand.

 let cxt = this.canvas.getContext('2d');this.setState({cxt: cxt});

Die Umgebung ist fertig, beginnen wir mit dem Zeichnen!

Zeichnen Sie zunächst den Startpfad:

 cxt.beginPath();

Stellen Sie dann die Breite der aktuellen Zeile ein:

 cxt.lineWidth = 5;

Legen Sie die Linienfarbe fest:

 cxt.StrokeStyle = '#000';

Mit moveTo und lineTo zeichnen wir eine Linie

 cxt.moveTo(0,0);cxt.lineTo(150,0);//Den definierten Pfad zeichnen cxt.Stroke()

Allerdings stellten wir fest, dass die gezeichneten Linien eher steif waren

Zu diesem Zeitpunkt können wir lineCap verwenden, um den Stil der Linienkappen am Ende der Linie zu ändern und an jedem Ende runde Linienkappen hinzuzufügen, um die Steifheit der Linien zu verringern.

 cxt.lineCap = 'round';

Gleichzeitig können wir auch die abgerundeten Ecken angeben, wenn sich Linien schneiden, indem wir lineJoin festlegen.

 cxt.lineJoin = 'round';

Wir haben jedoch auch festgestellt, dass die gezeichneten Linien offensichtlich gezackte Kanten aufweisen. Zu diesem Zeitpunkt müssen wir die von Canvas bereitgestellte Funktion zum Zeichnen von Elementschatten verwenden, um die gezackten Kanten zu verwischen. Da Schatten vorhanden sind, können wir den Wert für die Linienbreite entsprechend ändern.

 cxt.shadowBlur = 1;cxt.shadowColor = '#000';

Ist es viel runder geworden? An diesem Punkt ist unsere Methode zum Zeichnen von Linien fertig. Schauen wir uns als nächstes an, wie man Canvas-Ereignisse überwacht, um eine konsistente Ausführung des Zeichnens zu erreichen.

Da wir sowohl mit PCs als auch mit mobilen Endgeräten kompatibel sein müssen, müssen wir die entsprechenden Ausführungsereignisse im Voraus bestimmen.

 this.state = {events: ('ontouchstart' in window) ? ['touchstart', 'touchmove', 'touchend'] : ['mousedown', 'mousemove', 'mouseup']}

Nachdem die Leinwand initialisiert wurde, beginnen wir mit dem Abhören von events[0]-Ereignissen

 this.canvas.addEventListener(this.events[0], startEventHandler, false);

Warten Sie auf Ereignisse[1] und Ereignisse[2] in der Funktion startEventHandler

 this.canvas.addEventListener(events[1], moveEventHandler, false);this.canvas.addEventListener(events[2], endEventHandler, false);

Hier kommt der Punkt: Unser Kerninhalt besteht darin, den gekreuzten Weg zu berechnen und zu zeichnen

 moveEventHandler(event: any): void { event.preventDefault(); const {ctx, isSupportTouch} = this.state; const = isSupportTouch ? event.touches[0] : event; ; const MouseX = evt.clientX - coverPos.left; const MouseY = evt.clientY - coverPos.top; cxt.lineTo( MouseX, MouseY );}

Wie Sie über Canvas wissen, bietet uns die Canvas-Leinwand einen flachen Raum zum Zeichnen. Jeder Punkt im Raum hat seine eigenen Koordinaten, x stellt die horizontale Koordinate und y die vertikale Koordinate dar. Der Ursprung (0, 0) befindet sich in der oberen linken Ecke des Bildes. Die positive Richtung der x-Achse verläuft rechts vom Ursprung und die positive Richtung der y-Achse verläuft vom Ursprung nach unten.

Daher verwenden wir die Methode getBoundingClientRect(), um den Pixelabstand zum linken und oberen Rand des Canvas-Elements der Seite relativ zur Position des Browserfensters zu ermitteln, und verwenden dann die Ereigniseigenschaften clientX und clientY, um die horizontalen und vertikalen Koordinaten des zurückzugeben Mauszeiger auf die Browserseite, wenn das Ereignis ausgelöst wird. Abschließend wird der Pfad mithilfe von „lineTo“ und „Stroke“ gezeichnet.

Gleichzeitig müssen wir daran denken, Ereignisse [1] und Ereignisse [2] zu entfernen, nachdem das Ereignis „Ereignisse [2]“ ausgeführt wurde, da es sonst zu einer kontinuierlichen Zeichnung kommt.

 endEventHandler(event: any): void { event.preventDefault(); const {events, moveEventHandler, endEventHandler} = this.canvas.removeEventListener(events[1], moveEventHandler, false); events[2], endEventHandler, false);}

Durch wiederholtes Durchlaufen der oben genannten Ereignisoperationen wird unsere Signaturfunktion grundsätzlich realisiert.

Während des Signiervorgangs ist es unvermeidlich, falsch oder zu schlampig zu signieren. Daher müssen wir die Funktion zum Löschen der Signatur unterstützen. Zu diesem Zeitpunkt verwenden wir die Methode clearRect () von Canvas, um den Inhalt zu löschen Leinwandbereich.

 cxt.clearRect(0, 0, CanvasWidth, CanvasHeight);

Nach dem Zeichnen sind wir noch nicht fertig, wir müssen noch die gezeichnete Signatur hochladen und speichern. Zu diesem Zeitpunkt können wir die toDataURL()-Methode verwenden, um die Leinwand in eine allgemeine Bilddateiform zu konvertieren.

Normalerweise können wir den Vorgang direkt ausführen, um ihn in einen Daten-URI umzuwandeln, und dann Ajax verwenden, um den Upload anzufordern, und das war’s.

 dataurl = this.canvas.toDataURL('image/png');//ordataurl = this.canvas.toDataURL('image/jpeg', 0.8);

Aufgrund verschiedener Geschäftsanforderungen müssen wir jedoch manchmal andere Inhalte auf der Seite übertragen. Dies können wir derzeit mit html2canvas erreichen. html2canvas kann uns dabei helfen, einen Screenshot der gesamten Seite oder eines Teils davon auf der Browserseite zu erstellen und ihn in einen Canvas zu rendern. Anschließend verwenden wir die toDataURL()-Methode, um ihn zu verarbeiten.

Apropos html2canvas: Die ausgeschnittenen Bilder in einigen Browsern mit niedriger Version sind leer. Der Grund dafür ist, dass html2canvas weder -webkit-flex noch -webkit-box unterstützt. Daher kann kein HTML in Canvas generiert werden, was zu einer weißen Bildschirmaufnahme führt.

• Flex-Layout wird nicht verwendet
• Ändern Sie den html2canvas-Quellcode, fügen Sie -webkit-flex und -webkit-box zur Datei html2canvas/dist/npm/parsing/display.js hinzu und geben Sie auch DISPLAY.FLEX Summary zurück

Durch die oben genannten Schritte haben wir im Grunde die Online-Signaturfunktion realisiert. Es ist erwähnenswert, dass wir zum Erstellen dieses Projekts die React+TypeScript-Umgebung verwendet haben. Die tatsächliche Verwendung des oben genannten Codes muss entsprechend Ihrer eigenen Umgebung geändert werden.

In diesem Artikel werden relativ oberflächliche Zeichenkenntnisse über Canvas verwendet. Wenn wir Canvas für die Animationsproduktion, die Simulation physikalischer Effekte, die Kollisionserkennung, die Spieleentwicklung, die Entwicklung mobiler Anwendungen und die Entwicklung von Big-Data-Visualisierung verwenden möchten, müssen wir auch die uns zur Verfügung stehende mathematische Geometrie überprüfen vorher gelernt, Physikkenntnisse und dann langsam erforschen. Heutzutage werden viele ausgereifte Diagramm-Plug-Ins wie Chart.js, ECharts usw. mit Canvas implementiert. Sie enthalten viele schöne und coole Diagramme, die fast alle Diagrammimplementierungen abdecken. Canvas verfügt außerdem über viele Open-Source-Bibliotheken wie ZRender, createJS, Pixi.js usw. Die unterste Ebene von ECharts basiert zur Kapselung auch auf der leichtgewichtigen Canvas-Klassenbibliothek ZRender.

Okay, lass uns heute hier aufhören. Wenn du Fragen hast, hinterlasse bitte eine Nachricht. Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.