Share
Im zweiten Tutorial dieser Serie haben Sie gelernt, wie Sie mit Konva grundlegende Formen zeichnen. Sie können die Grundformen auf die eine oder andere Weise kombinieren, um Sterne, Ringe, Pfeile, Uhren oder eine Hütte zu erstellen. Mit Konva können Sie auch einige allgemeine komplexe Formen erstellen, indem Sie die integrierten Funktionen der Bibliothek verwenden.
In diesem Tutorial erfahren Sie, wie Sie Sterne und Ringe in Konva erstellen. Anschließend besprechen wir, wie Sie mit Konva Text schreiben und wie Sie ihn entlang eines bestimmten Pfads schreiben. Sie lernen auch, wie Sie mit Konva Bilder und Sprites auf einer Leinwand zeichnen.
Im Vergleich zu vielen anderen komplexen Formen, die Sie auf der Leinwand zeichnen können, ist eine Sternform eine der häufigsten. Mit den richtigen Werten können Sie auch spitze Sterne in einfache, badgeähnliche Formen umwandeln. Mit Konva können Sie mit dem Stern Sterne zeichnen Konva.Star () Objekt.
Sie können die Anzahl der Spitzen angeben, die ein Stern mit haben soll numPoints Eigentum. Sie können die Größe dieser Stacheln mit der Innenradius und outerRadius Eigenschaften. Ein großer Unterschied im Wert dieser Eigenschaften macht die Sterne stacheliger. Wenn Sie den Außenradius gleich dem Innenradius setzen, wird ein reguläres Polygon mit einer doppelten Anzahl von Seiten erstellt numPoints. Ändern der Werte von numPoints, Innenradius, und outerRadius kann zu interessanten Formen führen.
var canvasWidth = 600; var canvasHeight = 400; var stage = new Konva.Stage (container: "example", width: canvasWidth, height: canvasHeight); var layerA = neue Konva.Layer (); var starA = new Konva.Star (x: 70, y: 80, numPoints: 4, innerRadius: 10, outerRadius: 50, Schlag: "schwarz", füllen: "rgba (200,0.200, 1)",) ; var starB = new Konva.Star (x: 200, y: 100, numPoints: 8, innerRadius: 10, outerRadius: 50, Schlag: "schwarz", füllen: "rgba (0, 0, 200, 1)", ); var starC = new Konva.Star (x: 475, y: 175, Anzahl: 20, InnerRadius: 90, OuterRadius: 100, Strich: "Orange", Füllung: "Gelb",); var starD = new Konva.Star (x: 325, y: 75, numPoints: 5, innerRadius: 20, outerRadius: 40, Strich: "schwarz", füllen: "hellgrün",); var starE = new Konva.Star (x: 100, y: 250, numPoints: 25, innerRadius: 25, outerRadius: 80, Strich: "schwarz", Füllung: "weiß",); var starF = new Konva.Star (x: 300, y: 275, numPoints: 40, innerRadius: 5, outerRadius: 80, Strich: "schwarz", Füllung: "schwarz",); layerA.add (starA, starB, starC, starD, starE, starF); stage.add (Schicht A);
Wie üblich können Sie die Sternformen, die Sie mit dem erstellen, drehen und skalieren Drehung, Rahmen, scaleX, und scaleY Eigenschaften. In ähnlicher Weise können Sie die Deckkraft eines Sterns mithilfe von steuern Opazität Eigenschaft und zeigen oder verbergen sie mit Hilfe der sichtbar Eigentum.
Ringe in Konva bestehen aus einem größeren Kreis und einem darüber liegenden kleineren Hohlkreis. Der Radius des inneren Kreises wird mit angegeben Innenradius Eigenschaft, und der Radius des äußeren Kreises wird mit angegeben outerRadius Eigentum. Das x und y Eigenschaften steuern die Position des Mittelpunkts des Sterns.
Sie können die von Ihnen erstellten Ringe mithilfe von skalieren und drehen scaleX, scaleY, Rahmen, und Drehung Eigenschaften. Beachten Sie jedoch, dass die Rotation keine Wirkung zu haben scheint, es sei denn, Sie haben den Ring mit unterschiedlichen Größen in x- und y-Richtung skaliert.
var canvasWidth = 600; var canvasHeight = 400; var stage = new Konva.Stage (container: "example", width: canvasWidth, height: canvasHeight); var layerA = neue Konva.Layer (); var ringA = neuer Konva.Ring (x: 125, y: 100, innerRadius: 10, äußererRadius: 50, Schlag: "schwarz", füllen: "rgba (200, 200, 1)",); var ringB = neuer Konva.Ring (x: 200, y: 100, innerRadius: 10, äußererRadius: 50, Strich: "schwarz", füllen: "rgba (0, 0, 200, 0.5)",); var ringC = neuer Konva.Ring (x: 475, y: 175, innerRadius: 90, outerRadius: 100, Strich: "orange", füllen: "gelb",); var ringD = neuer Konva.Ring (x: 325, y: 100, innerRadius: 20, äußereRadius: 40, scaleY: 2, scaleX: 0,3, Rotation: 45, Strich: "schwarz", Füllung: "hellgrün", ); var starA = new Konva.Star (x: 200, y: 275, numPoints: 20, innerRadius: 50, outerRadius: 115, Strich: "schwarz", füllen: "schwarz",); var ringE = new Konva.Ring (x: 200, y: 275, innerRadius: 10, outerRadius: 90, Strich: "schwarz", füllen: "rot",); var starB = new Konva.Star (x: 200, y: 275, numPoints: 10, innerRadius: 50, outerRadius: 80, Strich: "schwarz", Füllung: "weiß",); var starC = new Konva.Star (x: 200, y: 275, numPoints: 10, innerRadius: 25, outerRadius: 50, Strich: "schwarz", füllen: "orange",); var ringF = new Konva.Ring (x: 200, y: 275, innerRadius: 10, outerRadius: 20, Strich: "schwarz", füllen: "weiß",); SchichtA.add (RingA, RingB, RingC, RingD, SternA, RingE, SternB, SternC, RingF); stage.add (Schicht A);
Im folgenden Beispiel habe ich mehrere Stern- und Ringformen zusammengelegt, um ein schönes Muster zu erstellen. Die drei Sterne und zwei Ringe im Muster sind konzentrisch. Denken Sie daran, dass immer, wenn Sie versuchen, so etwas zu erstellen, immer zuerst die größte Form gezeichnet wird. Wenn ich hinzugefügt hätte starA später in der Ebene hätte es alle kleineren Ringe und Sterne bedeckt und sie vor den Zuschauern verborgen.
Mit können Sie Text auf eine Leinwand schreiben Konva.Text () Objekt. Wenn Sie ein Textobjekt erstellen, können Sie den Wert für die Schriftfamilie, den Schriftgrad, den Schriftstil und die Schriftvariante mithilfe von angeben Schriftfamilie, Schriftgröße, Schriftstil, und fontVariant Eigenschaften. Die Standardschriftfamilie ist Arial und die Standardschriftgröße ist 12. Sie können die Schriftart festlegen Schriftstil Eigenschaft normal, fett oder kursiv. Ähnlich, fontVariant kann auf "normal" oder "smallcaps" gesetzt werden.
Der eigentliche Text, den Sie schreiben möchten, kann mit der angegeben werden Text Eigentum. Wenn in einem mehrzeiligen Kommentar nicht genügend Platz zwischen den Zeilen vorhanden ist, können Sie ihn mithilfe von erhöhen Zeilenhöhe Eigentum.
Der obere linke Punkt, von dem aus Konva den Text schreiben soll, wird mit angegeben x und y Eigenschaften. Sie können die Breite des Texts mithilfe der width-Eigenschaft begrenzen. Jeder Text, den Sie schreiben, wird standardmäßig ausgerichtet. Sie können es mit der Taste nach rechts oder mittig ausrichten ausrichten Eigentum.
var canvasWidth = 600; var canvasHeight = 400; var stage = new Konva.Stage (container: "example", width: canvasWidth, height: canvasHeight); var layerA = neue Konva.Layer (); var textA = new Konva.Text (y: 25, Breite: canvasWidth, ausrichten: 'center', Text: "QUOTE OF THE DAY", fontSize: 50, fontFamily: "Lato"); var textB = new Konva.Text (x: canvasWidth / 10, y: 175, Breite: canvasWidth * 8/10, ausrichten: 'center', lineHeight: 1.4, text: "Sie müssen tanzen, als würde niemand zuschauen, \ n Liebe, als wärst du nie verletzt, \ n Singe als ob niemand zuhört, \ n Und lebe wie es der Himmel auf Erden ist. ", fontSize: 25, fontFamily:" Lato "); var rectA = new Konva.Rect (x: canvasWidth / 10 - 10, y: 140, Breite: canvasWidth * 8/10 + 20, Höhe: 240, Strich: "schwarz", Füllung: "braun"); var rectB = new Konva.Rect (x: canvasWidth / 10, y: 150, Breite: canvasWidth * 8/10, Höhe: 220, Strich: "schwarz", Füllung: "hellblau"); var starA = new Konva.Star (x: canvasWidth / 10, y: 150, innerRadius: 40, outerRadius: 30, numPoints: 10, Strich: "schwarz", Füllung: "orange"); layerA.add (textA, rectA, starA, rectB, textB); stage.add (Schicht A);
In dem obigen Beispiel sollten Sie beachten, dass ich hinzugefügt habe textB auf die Ebene, nachdem Sie alle anderen Elemente hinzugefügt haben. Auf diese Weise können wir sicherstellen, dass das tatsächliche Zitat über allen anderen Formen bleibt.
Der Text, den Sie auf die Leinwand schreiben, muss keiner geraden Linie folgen. Sie können auch einen Pfad für den folgenden Text angeben Daten Eigentum. Der Pfad wird in Form einer SVG-Datenzeichenfolge bereitgestellt und kann Befehle zum Folgen von Linien, Kurven und Bögen enthalten.
Wichtig ist, dass der Text, den Sie entlang eines bestimmten Pfads schreiben möchten, mit dem erstellt werden muss Konva.TextPath () Objekt. Hier ist ein Beispiel, das den Pfad für den folgenden Text in Form einer Cubic Bezier-Kurve angibt.
var canvasWidth = 600; var canvasHeight = 400; var stage = new Konva.Stage (container: "example", width: canvasWidth, height: canvasHeight); var layerA = neue Konva.Layer (); var textA = new Konva.TextPath (y: 25, ausrichten: 'center', Daten: 'M100,300 C150,100 200,50 500 60', Text: "DIESER TEXT GEHT AUF EINEM WEG", fontSize: 35, fontFamily: "Lato", füllen: "Orange"); var textB = new Konva.TextPath (y: 28, ausrichten: 'center', Daten: 'M100,320 C200,200 400,400 500 80', Text: "DIESER TEXT GEHT MIT EINEM ANDEREN WEG", fontSize: 25, fontFamily: "Lato", füllen: "Grün"); layerA.add (textA, textB); stage.add (Schicht A);
Sie sollten jetzt in der Lage sein, mit den Methoden, die wir in diesem und dem vorherigen Tutorial besprochen haben, verschiedene Formen zu erstellen. Manchmal ist es jedoch sinnvoller, ein Bild direkt zu verwenden, wenn Sie versuchen, eine Grafik auf der Leinwand zu zeichnen. Konva ermöglicht das Zeichnen von Bildern mit Konva.Image () Objekt.
Die Position der oberen linken Ecke eines Bildes wird durch den Wert von bestimmt x und y Eigenschaften. Ebenso werden Breite und Höhe mit dem angegeben Breite und Höhe Eigenschaften. Die Werte von Breite und Höhe Eigenschaften müssen nicht den tatsächlichen Abmessungen des Bildes entsprechen. Sie können das Bild auch mit der Taste skalieren oder drehen Drehung, Rahmen, scaleX, und scaleY Eigenschaften.
var canvasWidth = 600; var canvasHeight = 400; var stage = new Konva.Stage (container: "example", width: canvasWidth, height: canvasHeight); var layerA = neue Konva.Layer (); var theImage = neues Bild (); theImage.src = "Pfad / zu / der / image.jpg"; theImage.onload = function () var Feld = new Konva.Image (x: 35, y: 115, Bild: theImage, Breite: 500, Höhe: 250, Drehung: -10, Strich: "schwarz", Strichbreite: fünfzehn ); layerA.add (Feld); stage.add (Schicht A); ;
Es lohnt sich zu bemerken, dass ich im obigen Code das instantiiert habe Konva.Image () Objekt nachdem das Bild bereits geladen wurde. Versuch, das zu instanziieren Konva.Image () Objekt vor dem Laden des Bildes führt zu einem Fehler. Das Bild des Feldes wurde von Pixabay übernommen.
Mit Konva können Sie auch Sprites auf der Leinwand mit Hilfe von Konva.Sprite () Objekt. Der einzige Unterschied ist, dass Sie diesmal die verwenden müssen Animation und Animationen Schlüssel zusätzlich zum Bildschlüssel, den wir zuvor beim Rendern des Bildes verwendet haben.
Das Animation Schlüssel akzeptiert eine Zeichenfolge, die das angibt Ich würde der Animation abgespielt werden. Das Animationen key akzeptiert ein Objekt, das die Animationskarte für das Sprite als Wert speichert. Sie können die Geschwindigkeit steuern, mit der eine Sprite-Animation mit abgespielt werden soll FrameRate Eigentum.
var canvasWidth = 600; var canvasHeight = 400; var stage = new Konva.Stage (container: "example", width: canvasWidth, height: canvasHeight); var layerA = neue Konva.Layer (); var theSprite = neues Bild (); theSprite.src = "Pfad / zu / hero_spritesheet.png"; var Animationen = Standing: [0, 0, 80, 94], Gehen: [0, 94, 80, 94, 80, 94, 80, 94, 160, 94, 80, 94, 240, 94, 80, 94 320, 94, 80, 94, 400, 94, 80, 94], springen: [0, 282, 80, 94, 80, 282, 80, 94, 160, 282, 80, 94]; theSprite.onload = function () var heroA = neue Konva.Sprite (x: 50, y: 50, Bild: theSprite, Animation: 'Standing', Animationen: Animationen, FrameRate: 6, FrameIndex: 0); var heroB = new Konva.Sprite (x: 50, y: 150, Bild: theSprite, Animation: "Gehen", Animationen: Animationen, FrameRate: 6, FrameIndex: 0); var heroC = new Konva.Sprite (x: 50, y: 250, Bild: theSprite, Animation: 'Laufen', Animationen: Animationen, FrameRate: 60, FrameIndex: 0); var heroD = new Konva.Sprite (x: 275, y: 150, Maßstab: 2, Bild: theSprite, Animation: Springen), Animationen: Animationen, FrameRate: 2, FrameIndex: 0); layerA.add (heroA, heroB, heroC, heroD); stage.add (Schicht A); heroA.start (); heroB.start (); heroC.start (); heroD.start (); ;
Die Breite und Höhe unseres Heldensprites beträgt 80px bzw. 94px. Ich habe diese Werte verwendet, um Konva die Position eines Sprites mitzuteilen, die beim Abspielen einer bestimmten Animationssequenz angezeigt werden soll. Jeder Animationssequenz wurde ein gegeben Ich würde um herauszufinden, was der Held tut. Diese Ich würde wird später verwendet, wenn Sie Konva mitteilen möchten, welche Animation abgespielt werden soll. Wie im vorherigen Beispiel habe ich den Helden nach dem Laden des Bildes instanziiert, um Fehler zu vermeiden.
Das Helden-Sprite-Sheet, das wir in der Demo verwenden, wurde von tokka erstellt. Dasselbe Bild habe ich auch im Crafty Beyond the Basics: Sprites-Tutorial verwendet, um eine Sprite-Animation zu erstellen. Die Tutorials dieser Serie zeigen Ihnen, wie Sie mit Crafty ein einfaches 2D-Spiel erstellen.
Zurück in Konva, zeigt das folgende Beispiel eine gehende und springende Heldenanimation. Der Held am unteren Ende hat einen höheren Wert FrameRate Wert, der den Anschein erweckt, als würde der Held mit übermenschlichen Geschwindigkeiten laufen.
Nach Abschluss des zweiten und dritten Tutorials sollten Sie nun in der Lage sein, mit Konva viele Formen, Muster und Designs selbst zu erstellen. Im letzten Abschnitt haben Sie außerdem gezeigt, wie Sie Bilder und Sprites auf Ihrer Leinwand zeichnen. Dies sollte alle Ihre Zeichnungsbedürfnisse abdecken.
Wenn Sie Fragen zu diesem Tutorial haben, stehe ich Ihnen gerne zur Verfügung. Im nächsten Lernprogramm erfahren Sie, wie Sie Ihre Formen mit Farbverläufen füllen und auf alles, was Sie auf der Leinwand zeichnen, Schatten anwenden.
Accentsconagua