Share
Die HTML5-Zeichenfläche wird seit langem von allen gängigen Browsern unterstützt. Sie können es zum Zeichnen von Grafiken in einem Browser mithilfe von JavaScript verwenden. Die Grafiken, die auf einer Leinwand erstellt werden können, reichen von einfachen Linien und Formen bis hin zu Fotokompositionen und Animationen.
In dieser Serie erfahren Sie etwas über eine sehr hilfreiche Canvas-Bibliothek namens Konva. Mit Konva können Sie verschiedene Formen auf der Leinwand oder auf der Bühne zeichnen. In der Bibliothek können Sie unter anderem alle diese Formen skalieren, drehen und animieren sowie Ereignis-Listener anhängen.
Dieses Tutorial konzentriert sich auf die grundlegenden Konzepte der Bibliothek und bietet einen kurzen Überblick über die verschiedenen Funktionen der Bibliothek. Danach werden wir uns später mit spezifischeren und komplexeren Themen befassen. Die Bibliothek entstand zuerst als Gabel der beliebten KineticJS-Bibliothek.
Für alles, was Sie mit Konva zeichnen, müssen Sie eine Bühne erstellen Konva.Stage. Sie können das Containerelement einer Bühne mithilfe von angeben Container Attribut. Für jede Stufe ist außerdem ein Wert für Breite und Höhe erforderlich, der mithilfe von festgelegt werden kann Breite und Höhe Attribute jeweils.
Eine einzelne Stufe kann mehrere Ebenen enthalten. Jede dieser Schichten hat zwei Renderer. Mit dem Szenen-Renderer werden alle für Sie auf der Bühne sichtbaren Formen gezeichnet. Der Hit-Diagrammrenderer ist für die Benutzer nicht sichtbar. Es wird verwendet, um Ereigniserkennung mit hoher Leistung durchzuführen.
Eine einzelne Ebene kann mehrere Formen, Gruppen unterschiedlicher Formen oder eine Gruppe von Gruppen enthalten. Bühne, Layer, Gruppen und Formen wirken wie virtuelle Knoten, die individuell gestaltet und transformiert werden können.
Bevor wir Formen erstellen, müssen wir die Bibliothek in Ihr Projekt aufnehmen. Dafür gibt es mehrere Möglichkeiten. Wenn Sie Paketmanager verwenden, können Sie die folgenden Befehle ausführen.
npm install konva // ODER Bower install konva
Sie können auch direkt auf eine reduzierte Version der auf cdnjs und jsDelivr gehosteten Bibliothek zugreifen.
Nachdem Sie die Bibliothek installiert haben, können Sie den folgenden Code verwenden, um rechteckige Formen auf der Leinwand zu erstellen.
var canvasWidth = 600; var canvasHeight = 400; var stage = new Konva.Stage (container: "example", width: canvasWidth, height: canvasHeight); var layerA = neue Konva.Layer (); var rectA = new Konva.Rect (x: 75, y: 150, Breite: 200, Höhe: 50, Drehung: 45, Füllung: "blau", Strich: "schwarz", Strichbreite: 4); var rectB = new Konva.Rect (x: 350, y: 50, Breite: 100, Höhe: 250, cornerRadius: 50, Füllung: "Rot", Strich: "Braun", Strichbreite: 10); layerA.add (rectA); layerA.add (rectB); stage.add (Schicht A);
Das Zeichnen von Objekten auf der Leinwand besteht aus fünf Schritten. Zunächst müssen Sie eine Bühne instanziieren, in der verschiedene Formen mit gezeichnet werden Konva.Stage. Dazu müssen Sie die Breite und Höhe der Bühne sowie die angeben Ich würde für das Containerelement, das die Bühne enthalten würde. In unserem Fall werden die Rechtecke innerhalb von a gezeichnet div wessen Ich würde ist Beispiel.
Im nächsten Schritt müssen Sie alle Ebenen instanziieren, die Sie auf Ihrer Bühne rendern möchten. In diesem Beispiel erstellen wir nur eine einzige Ebene. Sie können jedoch mehrere Ebenen erstellen und alle zu einer einzelnen Stufe hinzufügen. Unterschiedliche Ebenen können sehr nützlich sein, wenn Ihr Hintergrund aus statischen sowie aus beweglichen Elementen besteht. In solchen Fällen können Sie statische Elemente auf einer Ebene hinzufügen und Elemente auf der anderen verschieben. Da Sie den statischen Hintergrund nach jedem Neuzeichnen nicht aktualisieren müssen, kann dies die Leistung drastisch verbessern.
Nach dem Erstellen der Ebenen können Sie verschiedene Formen wie Rechtecke, Ellipsen, Sterne und Ringe, die Sie auf den Ebenen anzeigen möchten, initialisieren. Zum Schluss müssen Sie die Formen zu den Ebenen und die Ebenen zur Bühne hinzufügen.
Das Gruppieren verschiedener Formen ist eine gute Idee, wenn Sie alle Formen als eine Einheit verwalten möchten. Angenommen, Sie haben ein Auto mit zwei Kreisen für Räder und zwei rechteckigen Blöcken für die Karosserie erstellt. Wenn Sie dieses Auto voranbringen möchten, ohne eine Gruppe zu erstellen, müssen Sie alle Formen einzeln einzeln übersetzen. Eine effizientere Methode besteht darin, die Kreise und Rechtecke einer Gruppe hinzuzufügen und sie alle auf einmal zu übersetzen.
Um einer Gruppe eine beliebige Form hinzuzufügen, müssen Sie die hinzufügen() Methode, genau wie beim Hinzufügen von Formen zu einer Ebene. Sie können einer anderen Gruppe auch eine Gruppe hinzufügen, um komplexere Entitäten zu erstellen. Sie können beispielsweise eine Person im Auto als eine Gruppe erstellen und diese Person der Gruppe hinzufügen, die das Auto darstellt.
Im folgenden Beispiel habe ich die Dinge einfach gehalten und nur ein erstellt carA Gruppe. Danach kann ich das ganze Auto auf einmal drehen und skalieren.
var canvasWidth = 600; var canvasHeight = 400; var stage = new Konva.Stage (container: "example", width: canvasWidth, height: canvasHeight); var layerA = neue Konva.Layer (); var wheelA = new Konva.Ring (x: 130, y: 230, innerRadius: 5, outerRadius: 30, füllen: "grau", Strich: "schwarz", Name: "erstes Rad"); var wheelB = new Konva.Ring (x: 270, y: 230, innerRadius: 5, outerRadius: 30, füllen: "grau", Strich: "schwarz", Name: "Second Wheel"); var frameA = new Konva.Rect (x: 80, y: 150, Breite: 240, Höhe: 60, cornerRadius: 10, Füllung: "rot", Strich: "schwarz", Name: "Bottom Frame"); var frameB = new Konva.Rect (x: 135, y: 90, Breite: 120, Höhe: 60, CornerRadius: 10, Füllung: "Orange", Strich: "Schwarz", Name: "Top Frame"); var carA = neue Konva.Gruppe (x: 50, y: 0, Rotation: 20, Maßstab X: 1,2); carA.add (wheelA, wheelB, frameA, frameB); layerA.add (carA); stage.add (Schicht A);
Sie kennen bereits Schichten in Konva. Layering ist etwas anderes. Standardmäßig werden alle Formen, die Sie einer Ebene hinzufügen, in der Reihenfolge gezeichnet, in der sie hinzugefügt wurden. Dies bedeutet, dass Formen, die einer Ebene nach allen anderen hinzugefügt werden, über anderen Formen gezeichnet werden.
Mit Konva können Sie die Reihenfolge festlegen, in der die Formen mit verschiedenen Schichtmethoden wie z. B. gezeichnet werden moveToTop (), moveToBottom (), moveUp (), sich abwärts bewegen(), und zIndex ().
Das moveToTop () Diese Methode zeichnet die angegebene Form über alle anderen Formen, die derselben Ebene hinzugefügt wurden. Formen, die auf einer Ebene gezeichnet wurden, die der Konva-Bühne hinzugefügt wurde nach dem Die Schicht unserer spezifischen Form bleibt immer noch über unserer Form. Deshalb bleibt der Indigokreis im folgenden Beispiel auch nach dem Aufruf unter dem hellgrünen Kreis moveToTop ().
Das moveToBottom () Diese Methode zeichnet die angegebene Form unter allen anderen Formen, die derselben Ebene hinzugefügt wurden. So wie moveToTop (), Die Formen bewegen sich zum unteren Rand ihrer eigenen Ebenen und nicht zu den darunter liegenden Ebenen.
Das moveUp () und sich abwärts bewegen() Methoden verschieben die Form, auf der sie aufgerufen werden, um eine Position über oder unter ihrer aktuellen Position in derselben Ebene. Das zIndex () Diese Methode wird verwendet, um den Index einer Form in ihrer übergeordneten Ebene festzulegen. Im Gegensatz zu CSS können Sie kein beliebiges festlegen zIndex Wert in Konva. Für eine Ebene mit 10 Formen wird die zIndex Wert kann nur zwischen 0 und 9 (einschließlich) liegen.
Im obigen Beispiel können Sie sehen, dass durch Drücken der Taste "Indigo Top" der Indigo-Kreis nicht über alle anderen gezeichnet wird. Wenn Sie "Indigo über allen anderen" drücken, wird er oben angezeigt. Dies liegt daran, dass die letzte Schaltfläche auch die Ebene mit dem Indigokreis nach oben verschiebt.
Da die Kreise verschoben werden können, empfiehlt es sich, die Kreise übereinander zu ziehen und zu sehen, wie sich die Position des Indigokreises ändert, wenn Sie verschiedene Tasten drücken.
In diesem Tutorial haben wir einige grundlegende Konzepte über Konva behandelt. Sie sollten jetzt in der Lage sein, einige gängige Formen auf der Leinwand zu zeichnen und sie als Gruppe zu verschieben. Das Tutorial zeigte Ihnen auch, wie Sie eine bestimmte Form im Falle einer Überlappung nach oben oder unten verschieben können.
JavaScript ist zu einer der De-facto-Sprachen geworden, die im Web arbeiten. Es ist nicht ohne Lernkurven, und es gibt viele Frameworks und Bibliotheken, um Sie zu beschäftigen. Wenn Sie nach zusätzlichen Ressourcen suchen, um zu studieren oder in Ihrer Arbeit zu verwenden, informieren Sie sich über das Angebot von Envato Market.
Wenn Sie Fragen zu diesem Tutorial haben, geben Sie mir bitte in den Kommentaren Bescheid. Im nächsten Tutorial lernen Sie, wie Sie in Konva grundlegende Formen zeichnen.
Accentsconagua