Share
Das Einführungs-Tutorial der Serie hat Ihnen gezeigt, wie Sie mit Konva Ihre erste Form zeichnen. Außerdem wurde erklärt, wie Schichten und Gruppen in Konva arbeiten. Im Rest der Serie konzentrieren wir uns auf spezifischere Themen, wie das Erstellen grundlegender und komplexer Formen oder das Anhängen von Ereignis-Listenern an verschiedene Formen, um Ihre Grafiken interaktiv zu gestalten.
In diesem Lernprogramm erfahren Sie, wie Sie in Konva grundlegende Formen wie Rechtecke, Kreise und Ellipsen erstellen. Außerdem lernen Sie verschiedene Attribute kennen, mit denen Sie das Erscheinungsbild all dieser Formen an Ihre Bedürfnisse anpassen können. In späteren Abschnitten des Tutorials wird erläutert, wie verschiedene Linienarten und reguläre Polygone mit Konva gezeichnet werden.
Sie können Rechtecke in Konva mit dem erstellen Konva.rect () Objekt. Die Position der oberen linken Ecke eines Rechtecks kann mit festgelegt werden x und y Eigenschaften. In ähnlicher Weise können Sie die Breite und Höhe des Rechtecks mithilfe von festlegen Breite und Höhe Eigenschaften. Alle Rechtecke, die Sie zeichnen, haben standardmäßig scharfe Ecken. Sie können sie jedoch runden, indem Sie einen geeigneten Wert für das auswählen Eckenradius Eigentum.
Mit dem können Sie ein Rechteck anzeigen oder ausblenden sichtbar Eigentum. Wenn Sie ein Rechteck nicht vollständig ausblenden möchten, es aber dennoch halbtransparent machen möchten, können Sie das verwenden Opazität Eigentum. Sie können eine beliebige Zahl zwischen 0 und 1 einstellen. Die Form ist nicht sichtbar, wenn die Deckkraft auf 0 gesetzt ist.
Sie können Ihre Rechteckformen auch mit der Taste drehen oder skalieren Drehung und Rahmen Eigenschaften jeweils. Die Drehung wird als einfache Zahl angegeben, jedoch in Grad angewendet. Sie haben die Möglichkeit, jedes Rechteck auf der X- oder Y-Achse unabhängig voneinander mit zu skalieren scaleX und scaleY Eigenschaften.
Hier ist ein Beispiel, das verschiedene Rechtecke auf einer Leinwand zeichnet, wobei alle Eigenschaften verwendet werden, die wir gerade besprochen haben.
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: 10, y: 10, Breite: 200, Höhe: 50, füllen: "gelb", Strich: "schwarz"); var rectB = new Konva.Rect (x: 160, y: 30, Breite: 80, Höhe: 250, Füllung: "Orange", Strich: "Schwarz"); var rectC = new Konva.Rect (x: 200, y: 160, Breite: 180, Höhe: 180, cornerRadius: 10, Strichbreite: 10, Deckkraft: 0,8, Füllung: "rot", Strich: "schwarz") ; var rectD = new Konva.Rect (x: 400, y: 20, Breite: 180, Höhe: 180, scaleX: 1,8, scaleY: 0,75, Rotation: 45, Füllung: "hellgrün", Strich: "schwarz") ; layerA.add (rectA, rectB, rectC, rectD); stage.add (Schicht A);
Sie sollten beachten, dass die Rechtecke sind nicht in der Reihenfolge gezeichnet, in der sie erstellt werden. Sie werden stattdessen in der Reihenfolge gezeichnet, in der sie der Ebene hinzugefügt wurden. Das füllen und Schlaganfall Eigenschaften werden zum Festlegen der Füll- bzw. Strichfarbe verwendet.
Sie können in Konva Kreise erstellen, indem Sie die Konva.circle () Objekt. Diesmal die x und y Eigenschaften bestimmen den Mittelpunkt zum Zeichnen des Kreises. Sie können weiterhin einen Wert für die Eigenschaften width und height angeben. Diese Werte werden zur Berechnung des Durchmessers des zu zeichnenden Kreises verwendet. Ein Kreis hat jedoch gleiche Breite und Höhe. Dies bedeutet, dass der später angegebene Wert im Konfliktfall Vorrang vor dem zuvor angegebenen Wert hat. Mit anderen Worten, wenn Sie das einstellen Breite eines Kreises bis 100 und später Set seine Höhe bis 180 hat der Kreis einen Durchmesser von 180 und die Breite wird ignoriert.
Um Verwirrung zu vermeiden, können Sie das weglassen Breite und Höhe Eigenschaften und geben Sie einen Wert für die Radius des Kreises. Beachten Sie, dass Sie den Radius auf 50 einstellen müssen, um einen Kreis mit einer Breite und Höhe von 100 zu zeichnen.
In ähnlicher Weise können Sie auch eine Ellipse mit dem erstellen Konva.ellipse () Objekt. Der einzige Unterschied besteht darin, dass die radius-Eigenschaft jetzt ein Objekt mit den Eigenschaften x und y als Wert akzeptiert. Wenn angegeben, wird die Eigenschaft width und height nun unabhängig voneinander angewendet, um die endgültige Form der Ellipse zu bestimmen.
var canvasWidth = 600; var canvasHeight = 400; var stage = new Konva.Stage (container: "example", width: canvasWidth, height: canvasHeight); var layerA = neue Konva.Layer (); var circA = neuer Konva.Circle (x: 100, y: 100, Breite: 180, füllen: "gelb", Strich: "schwarz"); var circB = new Konva.Circle (x: 180, y: 150, Höhe: 100, füllen: "orange", Strich: "schwarz"); var circC = new Konva.Circle (x: 200, y: 275, Radius: 100, Deckkraft: 0,5, Füllung: "Rot", Strich: "Schwarz"); var ellipA = new Konva.Ellipse (x: 400, y: 75, Breite: 70, Höhe: 100, Drehung: -15, Füllung: "hellgrün", Strich: "schwarz"); var ellipB = new Konva.Ellipse (x: 400, y: 75, Breite: 80, Höhe: 120, Drehung: -15, Strichbreite: 5, Füllung: "Weiß", Strich: "Schwarz"); var ellipC = new Konva.Ellipse (x: 450, y: 275, Radius: x: 100, y: 50, scaleY: 2, füllen: "violett", Strich: "schwarz"); layerA.add (circA, circB, circC, ellipB, ellipA, ellipC); stage.add (Schicht A);
Das solltest du beachten ellipB hat größere Höhe und Breite im Vergleich zu EllipA. Da haben beide das gleiche x und y Werte musste ich hinzufügen ellipB auf die Ebene zuerst, um zu halten EllipA sichtbar. Ob ellipB wurde nach hinzugefügt EllipA, es wäre überzogen worden EllipA, versteckt es vor den Zuschauern.
Wenn Sie genau beobachten, werden Sie auch sehen, dass der violette Kreis tatsächlich eine Ellipse mit ist y Radius auf 50 und eingestellt x Radius auf 100 eingestellt. In y-Richtung wurde er jedoch um den Faktor 2 skaliert. Durch die Skalierung wird auch die Strichbreite vergrößert, sodass sie am oberen und unteren Rand der Ellipse zweimal größer ist als an der linken und rechten Kante.
Du kannst den ... benutzen Konva.Line () Objekt, um verschiedene Arten von Linien und Kurven zu erstellen. Bei allen Linien müssen Sie die Punkte angeben, durch die die Linie verlaufen soll Punkte Eigentum. Die Punkte werden als Array angegeben.
Sie können eine beliebige Anzahl von Punkten mit dem verbinden Punkte Array, um ein Polygon zu bilden, indem Sie den Wert von geschlossen zuschreiben wahr. In ähnlicher Weise können Sie eine Reihe von geraden Linien in Splines konvertieren, indem Sie einen Wert für festlegen Spannung Attribut. Ein Wert von Null führt zu geraden Linien. Höhere Werte erzeugen kurvigere Linien.
Sie können eine geschlossene und kurvige Form (einen Blob) erstellen, indem Sie einen Wert für die festlegen Spannung Eigenschaft sowie Schließen der Kurve durch Setzen geschlossen zu wahr.
Wie bei den übrigen Formen, die wir besprochen haben, können Sie die Strichbreite für das Zeichnen der Linien mithilfe von festlegen Strichbreite Attribut. Sie können auch eine angeben füllen Farbe für geschlossene Formen.
Im folgenden Beispiel habe ich die gleichen Punkte verwendet, um alle Formen zu zeichnen. Ich habe aber auch die verwendet Bewegung() Methode, um jede Form um einen bestimmten Abstand zu verschieben, um Überlappungen zu vermeiden.
var canvasWidth = 600; var canvasHeight = 400; var stage = new Konva.Stage (container: "example", width: canvasWidth, height: canvasHeight); var layerA = neue Konva.Layer (); var lineA = neue Konva.Line (Punkte: [50, 20, 20, 100, 80, 140, 60, 80, 200, 20], Strich: "schwarz"); var lineB = new Konva.Line (Punkte: [50, 20, 20, 100, 80, 140, 60, 80, 200, 20], geschlossen: wahr, Füllung: "gelb", Strich: "schwarz") ; var lineC = neue Konva.Line (Punkte: [50, 20, 20, 100, 80, 140, 60, 80, 200, 20], Spannung: 0,8, Hub: "blau"); var lineD = neue Konva.Line (Punkte: [50, 20, 20, 100, 80, 140, 60, 80, 200, 20], Spannung: 1,8, Hub: "rot"); var lineE = new Konva.Line (Punkte: [50, 20, 20, 100, 80, 140, 60, 80, 200, 20]), geschlossen: wahr, Spannung: 2,2, Füllung: "hellblau", Strich: " schwarz "); lineB.move (x: 180, y: 40); lineC.move (x: 380, y: 0); lineD.move (x: 0, y: 200); lineE.move (x: 180, y: 220); layerA.add (lineA, lineB, lineC, lineD, lineE); stage.add (Schicht A);
Sie sollten auch beachten, dass die rote und die blaue Linie mit derselben Punktmenge gezeichnet werden, jedoch unterschiedlich Spannung Der Wert ändert die endgültige Form der Kurve erheblich.
Sie können den Wert verschiedener Punkte in der Liste sorgfältig auswählen Punkte Array, um regelmäßige Polygone wie Fünfecke und Sechsecke zu zeichnen. Das Zeichnen komplexerer regulärer Polygone wie Achtecke mit dieser Methode kann umständlich und fehleranfällig sein. Um Fehler zu vermeiden, sollten Sie die Konva.RegularPolygon () Objekt, um regelmäßige Polygone zu erstellen.
Das x und y Eigenschaften werden verwendet, um den Mittelpunkt des Polygons festzulegen. Das Radius Diese Eigenschaft wird verwendet, um den Abstand zwischen dem Mittelpunkt des Polygons und allen Scheitelpunkten anzugeben. Du kannst den ... benutzen Seiten Eigenschaft, um die Anzahl der Seiten anzugeben, die das Polygon haben soll. Beachten Sie, dass alle Seiten eines mit dieser Methode erstellten Polygons gleiche Längen haben. Sie können die Länge einiger Seiten mit ändern scaleX und scaleY Eigenschaften, aber es ändert sich auch die Strichbreite der skalierten Seite.
Genau wie alle anderen Formen, die wir besprochen haben, können Sie die Strichbreite, die Deckkraft und die Sichtbarkeit von regulären Polygonen mit ändern Strichbreite, Opazität, und Sichtweite.
var canvasWidth = 600; var canvasHeight = 400; var stage = new Konva.Stage (container: "example", width: canvasWidth, height: canvasHeight); var layerA = neue Konva.Layer (); var triangle = new Konva.RegularPolygon (x: 150, y: 275, Seiten: 3, Radius: 100, scaleY: 1,6, Strich: "schwarz", füllen: "rgba (200, 200, 1)",) ; var square = new Konva.RegularPolygon (x: 60, y: 60, Seiten: 4, Radius: 50, füllen: "rgba (200,0,0, 0,5)", Strich: "schwarz"); var pentagon = new Konva.RegularPolygon (x: 160, y: 160, Seiten: 5, Radius: 80, füllen: "rgba (0,200,0, 0,5)", Strich: "schwarz"); var hexagon = new Konva.RegularPolygon (x: 350, y: 120, Seiten: 6, Radius: 80, füllen: "rgba (0,0,200, 0,5)", Strich: "schwarz"); var octagon = new Konva.RegularPolygon (x: 450, y: 275, Seiten: 8, Radius: 100, füllen: "rgba (200,200,0, 0,5)", Strich: "schwarz"); layerA.add (Dreieck, Quadrat, Fünfeck, Sechseck, Achteck); stage.add (Schicht A);
In diesem Tutorial haben wir die grundlegendsten Formen behandelt, die Konva uns erlaubt, mit Leichtigkeit auf die Leinwand zu zeichnen. Wir haben auch verschiedene Attribute kennen gelernt, mit denen das Erscheinungsbild all dieser Formen gesteuert werden kann. Die meisten Attribute sind für alle Formen gleich, einige sind jedoch nur für bestimmte Formen anwendbar.
.
Accentsconagua