Bearbeiten von HTML5-Canvas mit Konva: Teil 3, Komplexe Formen und Sprites

German (Deutsch) translation by Federicco Ancie (you can also view the original English article)

Im zweiten Tutorial dieser Serie haben Sie gelernt, wie Sie mit Konva Grundformen zeichnen. Sie können die Grundformen auf die eine oder andere Weise kombinieren, um Sterne, Ringe, Pfeile, Uhren oder eine Hütte zu erstellen. Mit Konva können Sie auch einige häufig verwendete komplexe Formen erstellen, indem Sie die von der Bibliothek bereitgestellten integrierten Funktionen verwenden.

In diesem Tutorial erfahren Sie, wie Sie in Konva Sterne und Ringe erstellen. Danach werden wir diskutieren, wie man Text mit Konva schreibt und wie man ihn entlang eines bestimmten Pfades schreibt. Sie lernen auch, wie Sie mit Konva Bilder und Sprites auf eine Leinwand zeichnen.

Sterne und Ringe zeichnen

Im Vergleich zu vielen anderen komplexen Formen, die Sie auf die Leinwand zeichnen können, ist eine Sternform eine der häufigsten. Mit den richtigen Werten können Sie auch spitze Sterne in einfache abzeichenartige Formen verwandeln. Mit Konva können Sie mit dem Objekt Konva.Star() Sterne zeichnen.

Mit der numPoints-Eigenschaft können Sie die Anzahl der Spitzen angeben, die ein Stern haben soll. Sie können die Größe dieser Spitzen mithilfe der Eigenschaften innerRadius und outerRadius steuern. Ein großer Unterschied im Wert dieser Eigenschaften macht die Sterne stacheliger. Wenn Sie den äußeren Radius gleich dem inneren Radius setzen, wird ein reguläres Polygon erstellt, dessen Anzahl der Seiten doppelt so hoch ist wie der Wert von numPoints. Das Variieren der Werte von numPoints, innerRadius und outerRadius kann zu interessanten Formen führen.

var canvasWidth = 600;
var canvasHeight = 400;

var stage = new Konva.Stage({
  container: "example",
  width: canvasWidth,
  height: canvasHeight
});

var layerA = new Konva.Layer();

var starA = new Konva.Star({
  x: 70,
  y: 80,
  numPoints: 4,
  innerRadius: 10,
  outerRadius: 50,
  stroke: "black",
  fill: "rgba(200,0,200, 1)",
});

var starB = new Konva.Star({
  x: 200,
  y: 100,
  numPoints: 8,
  innerRadius: 10,
  outerRadius: 50,
  stroke: "black",
  fill: "rgba(0, 0, 200, 1)",
});

var starC = new Konva.Star({
  x: 475,
  y: 175,
  numPoints: 20,
  innerRadius: 90,
  outerRadius: 100,
  stroke: "orange",
  fill: "yellow",
});

var starD = new Konva.Star({
  x: 325,
  y: 75,
  numPoints: 5,
  innerRadius: 20,
  outerRadius: 40,
  stroke: "black",
  fill: "lightgreen",
});

var starE = new Konva.Star({
  x: 100,
  y: 250,
  numPoints: 25,
  innerRadius: 25,
  outerRadius: 80,
  stroke: "black",
  fill: "white",
});

var starF = new Konva.Star({
  x: 300,
  y: 275,
  numPoints: 40,
  innerRadius: 5,
  outerRadius: 80,
  stroke: "black",
  fill: "black",
});

layerA.add(starA, starB, starC, starD, starE, starF);

stage.add(layerA);

Wie üblich können Sie die von Ihnen erstellten Sternformen mithilfe der Eigenschaften rotation, skale, saleX und skaleY drehen und skalieren. Ebenso können Sie die opacity eines Sterns mithilfe der opacity-Eigenschaft steuern und mithilfe der visible Eigenschaft ein- oder ausblenden.

Please accept marketing cookies to load this content.

Ringe in Konva bestehen aus einem größeren durchgezogenen Kreis und einem kleineren hohlen Kreis, der darüber gelegt wird. Der Radius des inneren Kreises wird mit der Eigenschaft innerRadius angegeben, und der Radius des äußeren Kreises wird mit der Eigenschaft outerRadius angegeben. Die x- und y-Eigenschaften steuern die Position des Mittelpunkts des Sterns.

Sie können die von Ihnen erstellten Ringe mithilfe der Eigenschaften scaleX, scaleY, scale und rotation skalieren und drehen. Beachten Sie jedoch, dass die Drehung keine Auswirkungen zu haben scheint, es sei denn, Sie haben den Ring mit unterschiedlichen Größ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 = new Konva.Layer();

var ringA = new Konva.Ring({
  x: 125,
  y: 100,
  innerRadius: 10,
  outerRadius: 50,
  stroke: "black",
  fill: "rgba(200,0,200, 1)",
});

var ringB = new Konva.Ring({
  x: 200,
  y: 100,
  innerRadius: 10,
  outerRadius: 50,
  stroke: "black",
  fill: "rgba(0, 0, 200, 0.5)",
});

var ringC = new Konva.Ring({
  x: 475,
  y: 175,
  innerRadius: 90,
  outerRadius: 100,
  stroke: "orange",
  fill: "yellow",
});

var ringD = new Konva.Ring({
  x: 325,
  y: 100,
  innerRadius: 20,
  outerRadius: 40,
  scaleY: 2,
  scaleX: 0.3,
  rotation: 45,
  stroke: "black",
  fill: "lightgreen",
});

var starA = new Konva.Star({
  x: 200,
  y: 275,
  numPoints: 20,
  innerRadius: 50,
  outerRadius: 115,
  stroke: "black",
  fill: "black",
});

var ringE = new Konva.Ring({
  x: 200,
  y: 275,
  innerRadius: 10,
  outerRadius: 90,
  stroke: "black",
  fill: "red",
});

var starB = new Konva.Star({
  x: 200,
  y: 275,
  numPoints: 10,
  innerRadius: 50,
  outerRadius: 80,
  stroke: "black",
  fill: "white",
});

var starC = new Konva.Star({
  x: 200,
  y: 275,
  numPoints: 10,
  innerRadius: 25,
  outerRadius: 50,
  stroke: "black",
  fill: "orange",
});

var ringF = new Konva.Ring({
  x: 200,
  y: 275,
  innerRadius: 10,
  outerRadius: 20,
  stroke: "black",
  fill: "white",
});

layerA.add(ringA, ringB, ringC, ringD, starA, ringE, starB, starC, ringF);

stage.add(layerA);

Im folgenden Beispiel habe ich mehrere Stern- und Ringformen zusammengelegt, um ein schönes Muster zu erstellen. Die drei Sterne und zwei Ringe im Muster sind konzentrisch. Denken Sie daran, dass Sie immer die größte Form zuerst zeichnen, wenn Sie versuchen, so etwas zu erstellen. Wenn ich später starA zur Ebene hinzugefügt hätte, hätte es alle kleineren Ringe und Sterne bedeckt und sie vor den Zuschauern versteckt.

Please accept marketing cookies to load this content.

Text und TextPath in Konva

Mit dem Objekt Konva.Text() können Sie Text auf eine Leinwand schreiben. Beim Erstellen eines Textobjekts können Sie den Wert für Schriftfamilie, Schriftgröße, Schriftstil und Schriftvariante mithilfe der Eigenschaften fontFamily, fontSize, fontStyle und fontVariant angeben. Die Standardschriftfamilie ist Arial und die Standardschriftgröße ist 12. Sie können die fontStyle-Eigenschaft auf normal, fett oder kursiv setzen. Ebenso kann fontVariant entweder auf Normal oder Smallcaps gesetzt werden.

Der tatsächliche Text, den Sie schreiben möchten, kann mithilfe der text-Eigenschaft angegeben werden. Wenn in einem mehrzeiligen Kommentar nicht genügend Platz zwischen den Zeilen vorhanden ist, können Sie ihn mit der Eigenschaft lineHeight erhöhen.

Der Punkt oben links, von dem aus Konva mit dem Schreiben des Textes beginnen soll, wird mithilfe der Eigenschaften x und y angegeben. Sie können die Breite des Texts mithilfe der Eigenschaft width begrenzen. Jeder Text, den Sie schreiben, wird standardmäßig ausgerichtet. Sie können es mit der align-Eigenschaft nach rechts oder mittig ausrichten.

var canvasWidth = 600;
var canvasHeight = 400;

var stage = new Konva.Stage({
  container: "example",
  width: canvasWidth,
  height: canvasHeight
});

var layerA = new Konva.Layer();

var textA = new Konva.Text({
  y: 25,
  width: canvasWidth,
  align: 'center',
  text: "QUOTE OF THE DAY",
  fontSize: 50,
  fontFamily: "Lato"
});

var textB = new Konva.Text({
  x: canvasWidth/10,
  y: 175,
  width: canvasWidth*8/10,
  align: 'center',
  lineHeight: 1.4,
  text: "You've gotta dance like there's nobody watching,\n Love like you'll never be hurt,\n Sing like there's nobody listening,\n And live like it's heaven on earth.",
  fontSize: 25,
  fontFamily: "Lato"
});

var rectA = new Konva.Rect({
  x: canvasWidth/10 - 10,
  y: 140,
  width: canvasWidth*8/10 + 20,
  height: 240,
  stroke: "black",
  fill: "brown"
});

var rectB = new Konva.Rect({
  x: canvasWidth/10,
  y: 150,
  width: canvasWidth*8/10,
  height: 220,
  stroke: "black",
  fill: "lightblue"
});

var starA = new Konva.Star({
  x: canvasWidth/10,
  y: 150,
  innerRadius: 40,
  outerRadius: 30,
  numPoints: 10,
  stroke: "black",
  fill: "orange"
});

layerA.add(textA, rectA, starA, rectB, textB);

stage.add(layerA);

Im obigen Beispiel sollten Sie beachten, dass ich der Ebene nach dem Hinzufügen aller anderen Elemente textB hinzugefügt habe. Auf diese Weise können wir sicherstellen, dass das tatsächliche Zitat über allen anderen Formen bleibt.

Please accept marketing cookies to load this content.

Der Text, den Sie auf die Leinwand schreiben, muss keinen geraden Linien folgen. Mithilfe der data-Eneigenschaft können Sie auch einen Pfad für den folgenden Text angeben. Der Pfad wird in Form einer SVG-Datenzeichenfolge bereitgestellt und kann Befehle zum Folgen von Linien, Kurven und Bögen enthalten.

Eine wichtige Sache, an die Sie denken sollten, ist, dass der Text, den Sie entlang eines bestimmten Pfades schreiben möchten, mit dem Objekt Konva.TextPath() erstellt werden muss. Hier ist ein Beispiel, das den Pfad für den Text in Form einer Cubic Bezier-Kurve bereitstellt.

var canvasWidth = 600;
var canvasHeight = 400;

var stage = new Konva.Stage({
  container: "example",
  width: canvasWidth,
  height: canvasHeight
});

var layerA = new Konva.Layer();

var textA = new Konva.TextPath({
  y: 25,
  align: 'center',
  data: 'M100,300 C150,100 200,50 500 60',
  text: "THIS TEXT GOES ALONG A PATH",
  fontSize: 35,
  fontFamily: "Lato",
  fill: "orange"
});

var textB = new Konva.TextPath({
  y: 28,
  align: 'center',
  data: 'M100,320 C200,200 400,400 500 80',
  text: "THIS TEXT GOES ALONG ANOTHER PATH",
  fontSize: 25,
  fontFamily: "Lato",
  fill: "green"
});

layerA.add(textA, textB);

stage.add(layerA);

Please accept marketing cookies to load this content.

Zeichnen von Bildern und Sprites mit Konva

Sie sollten jetzt in der Lage sein, eine Vielzahl von Formen mit den in diesem und dem vorherigen Lernprogramm beschriebenen Methoden zu erstellen. Manchmal ist es jedoch sinnvoller, ein Bild direkt zu verwenden, wenn Sie versuchen, eine Grafik auf die Leinwand zu zeichnen. Mit Konva können Sie Bilder mit dem Objekt Konva.Image() zeichnen.

Die Position der oberen linken Ecke eines Bildes wird durch den Wert der x- und y-Eigenschaften bestimmt. In ähnlicher Weise werden width und height mithilfe der Eigenschaften angegeben. Die Werte der Eigenschaften width und height müssen nicht den tatsächlichen Abmessungen des Bildes entsprechen. Sie können das Bild auch mithilfe der Eigenschaften rotation, skale, skaleX und skaleY skalieren oder drehen.

var canvasWidth = 600;
var canvasHeight = 400;

var stage = new Konva.Stage({
  container: "example",
  width: canvasWidth,
  height: canvasHeight
});

var layerA = new Konva.Layer();

var theImage = new Image();
theImage.src = "path/to/the/image.jpg";

theImage.onload = function() {
  var field = new Konva.Image({
    x: 35,
    y: 115,
    image: theImage,
    width: 500,
    height: 250,
    rotation: -10,
    stroke: "black",
    strokeWidth: 15
  });

  layerA.add(field);
  stage.add(layerA);
};

Es ist erwähnenswert, dass ich im obigen Code das Konva.Image() -Objekt instanziiert habe, nachdem das Bild bereits geladen wurde. Der Versuch, das Konva.Image() -Objekt zu instanziieren, bevor das Bild geladen wurde, führt zu einem Fehler. Das Bild des Feldes wurde von Pixabay aufgenommen.

Please accept marketing cookies to load this content.

Mit Konva können Sie mithilfe des Konva.Sprite() -Objekts auch Sprites auf der Leinwand rendern. Der einzige Unterschied besteht darin, dass Sie dieses Mal zusätzlich zu dem Bildschlüssel, den wir zuvor beim Rendern des Bildes verwendet haben, die animation- und animation-Tasten verwenden müssen.

Die animation-Taste akzeptiert eine Zeichenfolge, die die id der abzuspielenden Animation angibt. Der animation-Schlüssel akzeptiert ein Objekt, in dem die Animationskarte für das Sprite als Wert gespeichert ist. Mit der frameRate-Eigenschaft können Sie die Geschwindigkeit steuern, mit der eine Sprite-Animation abgespielt werden soll.

var canvasWidth = 600;
var canvasHeight = 400;

var stage = new Konva.Stage({
  container: "example",
  width: canvasWidth,
  height: canvasHeight
});

var layerA = new Konva.Layer();
var theSprite = new Image();

theSprite.src =
  "path/to/hero_spritesheet.png";

var animations = {
  standing: [0, 0, 80, 94],
  walking: [0, 94, 80, 94,
           80, 94, 80, 94,
           160, 94,  80, 94,
           240, 94, 80, 94,
           320, 94, 80, 94,
           400, 94, 80, 94],
  jumping: [0, 282, 80, 94,
           80, 282, 80, 94,
           160, 282, 80, 94]
};

theSprite.onload = function() {
  var heroA = new Konva.Sprite({
    x: 50,
    y: 50,
    image: theSprite,
    animation: 'standing',
    animations: animations,
    frameRate: 6,
    frameIndex: 0
  });
  
  var heroB = new Konva.Sprite({
    x: 50,
    y: 150,
    image: theSprite,
    animation: 'walking',
    animations: animations,
    frameRate: 6,
    frameIndex: 0
  });
  
  var heroC = new Konva.Sprite({
    x: 50,
    y: 250,
    image: theSprite,
    animation: 'walking',
    animations: animations,
    frameRate: 60,
    frameIndex: 0
  });
  
  var heroD = new Konva.Sprite({
    x: 275,
    y: 150,
    scale: 2,
    image: theSprite,
    animation: 'jumping',
    animations: animations,
    frameRate: 2,
    frameIndex: 0
  });

  layerA.add(heroA, heroB, heroC, heroD);
  stage.add(layerA);
  
  heroA.start();
  heroB.start();
  heroC.start();
  heroD.start();
};

Die Breite und Höhe unseres Helden-Sprites beträ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. Jede Animationssequenz wurde mit einer id versehen, um zu identifizieren, was der Held tut. Diese id wird später verwendet, wenn Sie Konva mitteilen möchten, welche Animation abgespielt werden soll. Genau wie im vorherigen Beispiel habe ich den Helden nach dem Laden des Bildes instanziiert, um Fehler zu vermeiden.

Das Hero Sprite-Blatt, das wir in der Demo verwenden, wurde von tokka erstellt. Ich habe das gleiche Bild auch im Tutorial Crafty Beyond the Basics: Sprites verwendet, um eine Sprite-Animation zu erstellen. Die Tutorials in dieser Serie zeigen Ihnen, wie Sie mit Crafty ein einfaches 2D-Spiel erstellen.

Zurück zu Konva: Das folgende Beispiel zeigt eine wandelnde und springende Heldenanimation. Der Held unten hat einen höheren frameRate-Wert, was den Anschein erweckt, als würde der Held mit übermenschlicher Geschwindigkeit laufen.

Please accept marketing cookies to load this content.

Abschluss

Nach Abschluss des zweiten und dritten Tutorials sollten Sie nun in der Lage sein, mit Konva viele Formen, Muster und Designs selbst zu erstellen. Der letzte Abschnitt zeigte Ihnen auch, wie Sie Bilder und Sprites auf Ihre Leinwand zeichnen. Dies sollte alle Ihre zeichnungsbezogenen Anforderungen abdecken.

Wenn Sie Fragen zu diesem Tutorial haben, helfe ich Ihnen gerne weiter. Im nächsten Tutorial erfahren Sie, wie Sie Ihre Formen mit Verläufen füllen und Schatten auf alles anwenden, was Sie auf der Leinwand zeichnen.