Share
Im zweiten Tutorial der Serie haben Sie gelernt, wie Sie mit Konva einige grundlegende Formen wie Rechtecke, Kreise und reguläre Polygone zeichnen. Im dritten Tutorial wurde beschrieben, wie Sie Konva verwenden können, um komplexere Formen wie Sterne und Ringe sowie Sprites auf die Leinwand zu zeichnen.
In diesem Lernprogramm werden wir einen Schritt weiter gehen und lernen, wie Sie Formen durch Ändern ihrer Füll- und Konturwerte unterschiedlich gestalten. Sie lernen auch, wie Sie die Deckkraft einer Form steuern und Schatten darauf anwenden. In den letzten Abschnitten erfahren Sie, wie Sie Mischmodi verwenden, um festzulegen, wie das Endergebnis aussehen soll, wenn sich verschiedene Formen überlappen.
Wir haben die verwendet füllen und Schlaganfall Eigenschaften aus dem ersten Tutorial der Serie. Wir haben sie jedoch bisher nur verwendet, um Formen mit einer durchgehenden Farbe zu füllen. Sie können eine Form auch mit Farbverläufen (sowohl linear als auch radial) sowie mit Bildern füllen. Dasselbe gilt für verschiedene Striche, die auf eine Form angewendet werden.
Es gibt zwei Möglichkeiten, eine Füllung auf verschiedene Formen anzuwenden. Sie können den Füllwert entweder mit einstellen füllen Eigenschaft, wenn eine Form zum ersten Mal in Konva erstellt wird, oder Sie können die füllen() Methode, um eine Füllung dynamisch als Reaktion auf bestimmte Ereignisse wie Hover, Klicken auf die Schaltfläche usw. anzuwenden.
Wenn Sie ein Element mit einer durchgehenden Farbe füllen, können Sie einen Wert für das Element angeben füllen Eigentum und es wird gut funktionieren. Wenn Sie einen linearen Farbverlauf verwenden, um das Innere einer Form zu füllen, müssen Sie gültige Werte für viele andere Eigenschaften angeben, z fillLinearGradientStartPoint, fillLinearGradientEndPoint, und fillLinearGradientColorStops. Die ersten beiden Eigenschaften akzeptieren Objekte, die die X- und Y-Koordinaten der Start- und Endpunkte eines Farbverlaufs angeben. Sie können die x- und y-Werte auch separat mit angeben fillLinearGradientStartPointX, fillLinearGradientStartPointY, fillLinearGradientEndPointX, und fillLinearGradientEndPointY Eigenschaften.
Radiale Farbverläufe haben auch die gleichen Eigenschaften, jedoch das Wort Linear wird durch ersetzt Radial. Zwei zusätzliche Eigenschaften in Bezug auf radiale Gradienten sind fillRadialGradientStartRadius und fillRadialGradientEndRadius.
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: 25, y: 25, Breite: 200, Höhe: 150, fillLinearGradientStartPoint: x: 0, y: 0, fillLinearGradientEndPoint: x: 200, y: 150, fillLinearGradientColorStops : [0, 'blau', 1, 'gelb'], Strich: "schwarz"); var rectB = new Konva.Rect (x: 375, y: 25, Breite: 200, Höhe: 150, fillLinearGradientStartPoint: x: 0, y: 50, fillLinearGradientEndPoint: x: 100, y: -50, fillLinearGradientColorStops: [0, 'grün', 0,1, 'gelb', 0,5, 'rot', 0,9, 'schwarz'], Strich: "schwarz"); var rectC = new Konva.Rect (x: 25, y: 200, Breite: 200, Höhe: 150, fillRadialGradientStartRadius): 0, fillRadialGradientEndRadius: 220, fillRadialGradientColorStops: [0, 'grün', 0.5, 'gelb', 0.75, 'rot', 0,9, 'schwarz'], Strich: "schwarz"); var rectD = new Konva.Rect (x: 375, y: 200, Breite: 200, Höhe: 150, fillRadialGradientStartRadius: 0, fillRadialGradientEndRadius: 150, fillRadialGradientStartPoint: x: 100, y: 75, fillRadialGradientEndPoint: x: 100, y: 75, fillRadialGradientColorStops: [0, 'blau', 0,5, 'gelb', 0,9, 'grün'], Strich: "schwarz"); layerA.add (rectA, rectB, rectC, rectD); stage.add (Schicht A);
Wenn nicht angegeben, wird davon ausgegangen, dass der Start- und Endpunkt eines radialen Gradienten ist 0,0. Aus diesem Grund stammt der radiale Verlauf im dritten Rechteck von der oberen linken Ecke. Denken Sie auch daran, dass die Start- und Endpunkte relativ zur Form selbst angegeben werden.
Genau wie bei der Füllung können Sie mit der Taste einen Wert für die Strichfarbe und die Strichbreite einstellen Schlaganfall und Strichbreite Eigenschaften, wenn eine Form zum ersten Mal instanziiert wird. Sie können beide Werte auch dynamisch mit einstellen Schlaganfall() und Strichbreite() Methoden.
Sie können Schatten auf alle mit Konva erstellten Formen mit Hilfe von vier verschiedenen Eigenschaften anwenden shadowColor, shadowOffset, shadowBlur, und shadowOpacity. Das shadowOffset Eigenschaft akzeptiert ein Objekt mit x und y Komponenten als Wert, aber Sie können auch verwenden shadowOffsetX und shadowOffsetY angeben x und y koordiniert separat. Sie haben auch die Möglichkeit, die Schatten für eine bestimmte Form mithilfe von zu aktivieren und zu deaktivieren shadowEnabled Eigentum.
Sie können die Deckkraft der Form selbst mithilfe von steuern Opazität Eigentum. Bitte beachten Sie, dass ein vollständig transparentes Objekt keinen Schatten wirft. Ähnlich, wenn Sie das eingestellt haben füllen Farbe einer Form transparent, nur der Schatten der Form Schlaganfall wird auf der Leinwand gerendert.
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: 25, y: 25, Breite: 200, Höhe: 150, cornerRadius: 5, Füllung: "orange", Deckkraft: 0,5, shadowColor: "schwarz", shadowOffset: x: -10, y: 10, shadowBlur: 10, Strich: "schwarz"); var starA = new Konva.Star (x: 400, y: 200, numPoints: 10, innerRadius: 50, outerRadius: 150, füllen: "transparent", Strich: "schwarz", Strichbreite: 5, shadowColor: "rot") , shadowOffset: x: 5, y: 5, shadowBlur: 0); layerA.add (rectA, starA); stage.add (Schicht A);
Einstellen der shadowBlur Die Eigenschaft 0 macht den Schatten so scharf wie die ursprüngliche Form. Wenn Sie diesen Wert zu hoch einstellen, verliert der Schatten die ursprüngliche Form. Sie sehen nur einen dunklen Fleck auf der Leinwand.
Ich möchte darauf hinweisen, dass Sie nach dem Instanziieren von a auch Textschatten mit denselben Eigenschaften erstellen können Konva.Text () Objekt.
Bisher überdeckte jede Überlappung zwischen den Formen die untere Form vollständig. Die einzige Möglichkeit, die untere Form sichtbar zu halten, bestand darin, alle darüber liegenden Formen teilweise transparent zu machen.
Manchmal möchten Sie, dass das Endergebnis nach der Überlappung verschiedener Formen bestimmten Regeln folgt. Zum Beispiel ist es nur möglich, die hellere oder dunklere Farbe anzuzeigen, wenn sich die Formen überlappen.
In Konva können Sie einige Werte angeben, um zu bestimmen, wie die Farben überlappender Formen mithilfe von die Farben überlagern sollen globalCompositeOperation Eigentum. Sie können die Dokumentation zu MDN lesen, um mehr über die Eigenschaft und alle möglichen Werte zu erfahren.
Im folgenden Beispiel habe ich für jedes der Rechtecke an der Ecke des zentralen Rechtecks einen anderen Mischmodus angewendet.
var canvasWidth = 600; var canvasHeight = 400; var stage = new Konva.Stage (container: "example", width: canvasWidth, height: canvasHeight); var layerA = neue Konva.Layer (); var rectCenter = new Konva.Rect (x: 225, y: 125, Breite: 150, Höhe: 150, füllen: "rgb (255, 100, 0)"); var rectA = new Konva.Rect (x: 125, y: 25, Breite: 150, Höhe: 150, füllen: "rgb (0, 200, 100)", globalCompositeOperation: "aufhellen"); var rectB = new Konva.Rect (x: 325, y: 25, Breite: 150, Höhe: 150, füllen: "rgb (0, 200, 100)", globalCompositeOperation: "darken"); var rectC = new Konva.Rect (x: 125, y: 225, Breite: 150, Höhe: 150, füllen: "rgb (0, 200, 100)", globalCompositeOperation: "hue"); var rectD = new Konva.Rect (x: 325, y: 225, Breite: 150, Höhe: 150, füllen: "rgb (0, 255, 0)", globalCompositeOperation: "xor"); layerA.add (rectCenter, rectA, rectB, rectC, rectD); stage.add (Schicht A);
Die Farbe des oberen linken Rechtecks ist rgb (0, 200, 100), und die Farbe des zentralen Rechtecks ist rgb (255, 100, 0). Wenn der erleichtern Der Mischmodus wird angewendet rgb Die Komponenten beider Farben werden einzeln verglichen, und die höheren Werte für jede Komponente werden verwendet, um die endgültige Farbe zu erhalten. In unserem Fall wird die endgültige Farbe für die obere linke Ecke rgb (255, 200, 100).
Wenn der verdunkeln Der Mischmodus wird angewendet rgb Die Komponenten beider Farben werden einzeln verglichen, und die niedrigeren Werte für jede Komponente werden verwendet, um die endgültige Farbe zu erhalten. In unserem Fall wird die Endfarbe für die rechte obere Ecke rgb (0, 100, 0).
Wenn der Farbton Wenn der Mischmodus aktiviert wird, werden Luma und Chroma der unteren Farbe mit dem Farbton der oberen Farbe kombiniert. Daher bleibt die Endfarbe immer noch grün, wird jedoch heller. Wenn der xor Wenn der Mischmodus angewendet wird, wird die Endfarbe an allen Überlappungspunkten transparent.
In diesem Lernprogramm haben wir gelernt, wie Sie eine Form mit linearen oder radialen Verläufen anstelle von Volltonfarben füllen. Wir haben auch gelernt, Schatten auf verschiedene Formen anzuwenden und sie mit der Opazität Eigentum. Im letzten Abschnitt wurde beschrieben, wie Sie Mischmodi verwenden, um die Endfarbe zu ändern, nachdem sich zwei Formen überlappen.
Wenn Sie Fragen zu diesem Tutorial haben, teilen Sie mir dies bitte in den Kommentaren mit. Das nächste und letzte Tutorial der Serie zeigt Ihnen, wie Sie Ereignisse an verschiedene Formen in Konva binden.
Accentsconagua