Share
Nachdem Sie die ersten beiden Tutorials gelesen haben, sollten Sie in der Lage sein, Pfade und einige vordefinierte Shapes zu erstellen. Sie sollten auch in der Lage sein, Ihre Pfade zu vereinfachen oder zu glätten, sie auf verschiedene Ebenen zu zeichnen und sie zusammenzufügen.
Obwohl wir einen langen Weg zurückgelegt haben, fehlt noch eine Sache. Bis zu diesem Punkt gab es keine Interaktion zwischen unserer Leinwand und dem Benutzer. Es wäre schön, wenn wir Benutzern die Möglichkeit geben könnten, mit verschiedenen Pfaden zu interagieren oder selbst etwas zu zeichnen. Dieses Tutorial behandelt alle Grundlagen der Benutzerinteraktion, beginnend mit der Werkzeug Variable.
Es gibt ein globales Werkzeug Variable, die nur in Skripts vorhanden ist, die Handlerfunktionen enthalten, die entweder mit der Maus oder der Tastatur interagieren. Diese Variable gibt Ihnen Zugriff auf Eigenschaften wie minDistance, Dies ist die Mindestentfernung, nach der die Maus das Feuer erneut auslösen kann onMouseDrag Ereignis, da es zuletzt gefeuert wurde. Ebenso die Eigenschaft maximale Entfernung Damit können Sie eine maximale Entfernung angeben, nach der die onMouseDrag Ereignis muss erneut ausgelöst werden.
Paper.js hat auch eine ToolEvent Objekt. Es ist eine Erweiterung des Ereignisobjekts und der einzige Parameter, der an alle Mausereignishandler übergeben wird. Es enthält alle relevanten Informationen zu diesen Mausereignissen wie:
Accentsconagua
Art, was sagt Ihnen, ob die Veranstaltung ist Mouseup, Maus nach unten, mousemove oder mousedrag.Punkt, Dies gibt Ihnen die Position der Maus, wenn das Ereignis ausgelöst wurde.Delta, Dies gibt Ihnen die Entfernung zwischen der aktuellen und der letzten Mausposition an, zu der das Ereignis ausgelöst wurde.Anzahl, Dadurch wird angegeben, wie oft das Mausereignis ausgelöst wurde.Artikel, Dadurch erhalten Sie das Element, das sich am Ort des Mausereignisses befand. Wenn der Artikel Teil von ist Gruppe oder Verbindung Pfad dann die oberste Ebene von Gruppe oder Verbindung Pfad wird zurückgegeben.letzter Punkt, Dies gibt die Position der Maus an, wann das Ereignis zuletzt ausgelöst wurde.downPoint, Dies gibt Ihnen die Position der Maus in Projektkoordinaten an, als sie zuletzt angeklickt wurde.Mittelpunkt, das gibt Ihnen den Punkt in der Mitte von letzter Punkt und Punkt. Sie sollten all diese Punkte berücksichtigen, da sie in den meisten Projekten häufig verwendet werden.
Paper.js verfügt über verschiedene Handlerfunktionen, die automatisch aufgerufen werden, um verschiedene Mausereignisse zu behandeln. Die drei Maushandlerfunktionen sind unten aufgeführt.
function onMouseDown (event) // etwas tun console.log ('Maus gedrückt!'); function onMouseDrag (event) // Etwas anderes tun console.log ('Maus gezogen!'); function onMouseUp (event) // Alles tun console.log ('Mouse released!'); Lassen Sie uns eine grundlegende Demo erstellen, die auf der basiert onMouseDown und onMouseUp Handler. Jedes Mal, wenn ein Benutzer eine Maustaste drückt, wird eine neue erstellt Pfad und markiere diesen Punkt als den Anfang unseres Pfad.
Jedes Mal, wenn der Benutzer die Maustaste loslässt, wird ein neuer Punkt als Ende von unserem hinzugefügt Pfad. Dadurch wird eine gerade Linie von der Stelle, an der die Maustaste gedrückt wurde, bis zu der Stelle erstellt, an der sie losgelassen wurde. Hier ist der Code:
var aPath; Funktion onMouseDown (Ereignis) aPath = new Path (); aPath.strokeColor = 'purple'; aPath.strokeWidth = event.point.x / 10; aPath.add (event.point); function onMouseUp (event) aPath.add (event.point);
Ich habe auch die eingestellt strokeColor zu lila und Strichbreite auf ein Zehntel des Wertes von x-Koordinate mit der Ereignispunkt Eigentum. Wenn Sie versuchen, einige vertikale Linien im grauen Bereich darunter zu zeichnen, werden Sie feststellen, dass alle eine Breite haben, die direkt proportional zu ihrem Abstand von der linken Seite ist.
Lassen Sie uns nun einige Kreise erstellen mit onMouseDrag Veranstaltung. Jedes Mal, wenn ein Ziehereignis ausgelöst wird, zeichnen wir einen Kreis, dessen Mittelpunkt am Mittelpunkt des letzten und des aktuellen Ziehpunkts liegt. Der Radius des Kreises hängt direkt von der Schleppgeschwindigkeit des Benutzers ab.
Um den Mittelpunkt unseres Kreises zu finden, können wir das verwenden Mittelpunkt Eigenschaft, die wir im vorherigen Abschnitt besprochen haben. Um den Radius des Kreises zu bestimmen, können wir die verwenden Delta Eigenschaft und dividieren Sie das Ergebnis durch 2. Hier ist der Code, den wir benötigen:
tool.maxDistance = 50; tool.minDistance = 4; function onMouseDrag (event) var circle = new Path.Circle (center: event.middlePoint, radius: event.delta.length / 2); circle.fillColor = 'pink'; circle.strokeColor = 'black';
Wenn der Benutzer die Maus zu schnell oder zu langsam zieht, werden die Kreise zu groß oder zu klein.
Dieses Problem kann mithilfe von behoben werden maximale Entfernung und minDistance Eigenschaften. Wenn der Benutzer zu schnell zieht, wird die maximale Entfernung Diese Eigenschaft löst das Ziehereignis alle 50 Pixel aus. Wenn die Ziehgeschwindigkeit des Benutzers zu niedrig ist, wird die minDistance Die Eigenschaft wird erst ausgelöst, wenn die von uns angegebene Mindestentfernungsschwelle erreicht ist. Sie können den obigen Code testen, indem Sie Ihre Maus in den grauen Bereich darunter ziehen:
Das Veranstaltung Das Objekt verfügt über drei Eigenschaften, die Sie für Ihre Interaktionen mit der Tastatur verwenden können. Das event.key Eigenschaft wird Ihnen sagen, welche Taste gedrückt wurde, und die event.character Die Eigenschaft sagt Ihnen, welches Zeichen beim Drücken der Taste generiert wurde. Um festzustellen, ob es sich um eine keyup oder Taste nach unten Ereignis können Sie die verwenden event.type Eigentum.
Verwenden Sie diese Eigenschaften zusammen, um kleine Kreise zu erstellen und sie zu verschieben. Sehen Sie sich den Code unten an:
var step = 10; var centerPoint = neuer Punkt (100, 100); Funktion onKeyDown (Ereignis) var circle = new Path.Circle (centerPoint, 3); circle.fillColor = 'pink'; circle.strokeColor = 'black'; if (event.key == 'a') centerPoint - = neuer Punkt (Schritt 0); // Code für andere Schlüssel
Wir erstellen eine Variable Schritt die verwendet wird, um die Geschwindigkeit zu bestimmen, mit der sich unser Kreis bewegt. Die Variable Mittelpunkt speichert die Position der Mitte unserer Kreise. Das onKeyDown Handler hat den Code, um alle zu behandeln Taste nach unten Veranstaltungen. Dieses Ereignis wird kontinuierlich ausgelöst, solange eine Taste gedrückt wird.
Aus diesem Grund werden ständig neue Kreise erstellt. Basierend auf der gedrückten Taste ändern wir den Wert von Mittelpunkt um unseren neu erstellten Kreis an einen anderen Ort zu verschieben. Sie können den Code in Aktion in der folgenden Demo sehen:
Einige Schlüssel, zum Beispiel die Verschiebung Schlüssel und Möglichkeit Taste, erzeugt kein direktes Zeichen, wenn gedrückt. Diese Tasten werden als Modifikationstasten bezeichnet. Das Veranstaltung Objekt hat eine event.modifiers Eigenschaft, mit der Sie die gedrückte Modifikationstaste bestimmen können. Beachten Sie den folgenden Code:
var Pfad; Funktion onMouseDown (Ereignis) path = new Path (); path.strokeColor = 'schwarz'; path.strokeWidth = 2; path.add (event.point); function onMouseDrag (event) if (event.modifiers.shift) path.lastSegment.point = event.point; path.implify (); else path.add (event.point);
Wenn ein Benutzer eine Maustaste drückt, wird die onMouseDown Handler erstellt einen neuen Pfad und fügt einen Punkt hinzu. Nachdem Sie mit dem Ziehen begonnen haben, wird die onMouseDrag Handler fügt bei jedem Ziehereignis einen neuen Punkt hinzu.
Wenn Sie die Maus mit ziehen Verschiebung Taste gedrückt, erkennt der Handler es mit event.modifiers.shift Eigentum. In diesem Fall werden nicht nur bei jedem Ziehereignis ein neuer Punkt hinzugefügt, sondern die Koordinaten des letzten Segments werden auf die aktuelle Position des Mauszeigers gesetzt. Es vereinfacht auch den gesamten gezeichneten Pfad. Sie können Ihre Maus in den grauen Bereich darunter ziehen, um zu sehen, wie sich der Pfad verhält Verschiebung Taste wird gedrückt.
Wenn die Umschalttaste nicht zu funktionieren scheint, liegt dies wahrscheinlich daran, dass die Leinwand keinen Fokus hat. In diesem Fall sollten Sie zuerst in den kleinen weißen Bereich unterhalb der Leinwand klicken, um den Fokus zu erhalten.
Die heute behandelten Ereignishandler behandeln die häufigsten Interaktivitätsszenarien. Wie aus dem Lernprogramm hervorgeht, ist es nicht schwer, die Elemente in einer Zeichenfläche basierend auf den Aktionen eines Benutzers zu bearbeiten. Der beste Weg zu lernen ist durch Üben. Ich möchte daher vorschlagen, dass Sie Ihre eigenen Demos erstellen, die alles kombinieren, was Sie bisher in den drei Tutorials gelernt haben.
Wenn Sie Fragen zu diesem Tutorial haben, teilen Sie mir dies bitte in den Kommentaren mit.
