Share
In de tweede zelfstudie van de serie heb je met Konva enkele basisvormen zoals rechthoeken, cirkels en regelmatige polygonen getekend. De derde zelfstudie behandelde hoe je Konva kunt gebruiken om een aantal meer complexe vormen te tekenen, zoals sterren en ringen, evenals sprites op het canvas.
In deze zelfstudie gaan we een stap verder en leren we hoe we verschillende vormen op vormen kunnen toepassen door hun opvul- en lijnwaarden te wijzigen. Je leert ook hoe je de dekking van een vorm kunt regelen en er schaduwen op kunt toepassen. In de laatste secties leert u hoe u mengmodi gebruikt om op te geven hoe het eindresultaat eruit moet zien als verschillende vormen elkaar overlappen.
We hebben de vullen en beroerte eigenschappen uit de eerste zelfstudie van de serie. We hebben ze echter tot nu toe alleen gebruikt om vormen met een effen kleur te vullen. U kunt ook een vorm met hellingen (zowel lineair als radiaal) en afbeeldingen vullen. Hetzelfde geldt voor verschillende lijnen die op een vorm worden toegepast.
Er zijn twee manieren om een vulling toe te passen op verschillende vormen. U kunt de vulwaarde instellen met behulp van de vullen eigenschap wanneer een vorm voor het eerst wordt gemaakt in Konva, of u kunt de vullen() methode om een vulling dynamisch toe te passen in reactie op sommige gebeurtenissen, zoals zweven, klikken op de knop, enzovoort.
Wanneer u een element met een effen kleur vult, kunt u een waarde opgeven voor de vullen eigendom en het zal prima werken. Wanneer u een lineair verloop gebruikt om de binnenkant van een vorm te vullen, moet u geldige waarden opgeven voor veel andere eigenschappen zoals fillLinearGradientStartPoint, fillLinearGradientEndPoint, en fillLinearGradientColorStops. De eerste twee eigenschappen accepteren objecten die de x- en y-coördinaten van de begin- en eindpunten van een verloop aangeven. U kunt ook de x- en y-waarden afzonderlijk opgeven met behulp van de fillLinearGradientStartPointX, fillLinearGradientStartPointY, fillLinearGradientEndPointX, en fillLinearGradientEndPointY eigenschappen.
Radiale verlopen hebben ook dezelfde set eigenschappen, maar het woord Lineair is vervangen door Radial. Twee extra eigenschappen gerelateerd aan radiale verlopen zijn fillRadialGradientStartRadius en fillRadialGradientEndRadius.
var canvasWidth = 600; var canvasHeight = 400; var stage = new Konva.Stage (container: "example", width: canvasWidth, height: canvasHeight); var layerA = nieuwe Konva.Layer (); var rectA = nieuwe Konva.Rect (x: 25, y: 25, width: 200, height: 150, fillLinearGradientStartPoint: x: 0, y: 0, fillLinearGradientEndPoint: x: 200, y: 150, fillLinearGradientColorStops : [0, 'blauw', 1, 'geel'], streek: "zwart"); var rectB = new Konva.Rect (x: 375, y: 25, width: 200, height: 150, fillLinearGradientStartPoint: x: 0, y: 50, fillLinearGradientEndPoint: x: 100, y: -50, fillLinearGradientColorStops: [0, 'groen', 0.1, 'geel', 0.5, 'rood', 0.9, 'zwart'], streek: "zwart"); var rectC = nieuwe Konva.Rect (x: 25, y: 200, width: 200, height: 150, fillRadialGradientStartRadius: 0, fillRadialGradientEndRadius: 220, fillRadialGradientColorStops: [0, 'green', 0.5, 'yellow', 0.75, 'rood', 0.9, 'zwart'], streek: "zwart"); var rectD = new Konva.Rect (x: 375, y: 200, width: 200, height: 150, fillRadialGradientStartRadius: 0, fillRadialGradientEndRadius: 150, fillRadialGradientStartPoint: x: 100, y: 75, fillRadialGradientEndPoint: x: 100, y: 75, fillRadialGradientColorStops: [0, 'blue', 0.5, 'yellow', 0.9, 'green'], stroke: "black"); layerA.add (rectA, rectB, rectC, rectD); stage.add (layerA);
Indien niet gespecificeerd, wordt verondersteld dat het start- en eindpunt van een radiale gradiënt zijn 0,0. Dit is de reden waarom de radiale gradiënt in de derde rechthoek afkomstig is van de linkerbovenhoek. Onthoud ook dat de begin- en eindpunten zijn opgegeven ten opzichte van de vorm zelf.
Net als de vulling kunt u een waarde voor de streekkleur en streekbreedte instellen met behulp van de beroerte en streekbreedte eigenschappen wanneer een vorm voor het eerst wordt geïnstantieerd. U kunt deze beide waarden ook dynamisch dynamisch instellen met behulp van de beroerte() en streekbreedte() methoden.
U kunt schaduwen toepassen op elke vorm die met behulp van Konva is gemaakt met behulp van vier verschillende eigenschappen schaduwkleur, shadowOffset, shadowBlur, en shadowOpacity. De shadowOffset property accepteert een object met X en Y componenten als waarde, maar u kunt ook gebruiken shadowOffsetX en shadowOffsetY om het te specificeren X en Y coördineert afzonderlijk. U hebt ook de mogelijkheid om de schaduwen voor een bepaalde vorm in en uit te schakelen met behulp van de shadowEnabled eigendom.
U kunt de dekking van de vorm zelf regelen met behulp van de ondoorzichtigheid eigendom. Houd er rekening mee dat een volledig transparant object geen schaduw werpt. Evenzo, als u de. Hebt ingesteld vullen kleur van een vorm naar transparant, alleen de schaduw ervan beroerte wordt weergegeven op het canvas.
var canvasWidth = 600; var canvasHeight = 400; var stage = new Konva.Stage (container: "example", width: canvasWidth, height: canvasHeight); var layerA = nieuwe Konva.Layer (); var rectA = nieuwe Konva.Rect (x: 25, y: 25, width: 200, height: 150, cornerRadius: 5, fill: "orange", opacity: 0.5, shadowColor: "black", shadowOffset: x: -10, y: 10, shadowBlur: 10, lijn: "zwart"); var starA = nieuwe Konva.Star (x: 400, y: 200, numPoints: 10, innerRadius: 50, outerRadius: 150, fill: "transparent", stroke: "black", strokeWidth: 5, shadowColor: "red" , shadowOffset: x: 5, y: 5, shadowBlur: 0); layerA.add (rectA, starA); stage.add (layerA);
Het instellen van shadowBlur eigenschap tot 0 maakt de schaduw zo scherp als de oorspronkelijke vorm zelf. Als u deze waarde te hoog instelt, verliest de schaduw de oorspronkelijke vorm; je ziet alleen een donkere patch op het canvas.
Ik wil erop wijzen dat je ook tekstschaduwen kunt maken met dezelfde set eigenschappen als je eenmaal een a hebt gemaakt Konva.Text () voorwerp.
Tot nu toe in de serie verborg elke overlapping tussen vormen de onderste vorm volledig. De enige manier om de onderste vorm zichtbaar te houden, was om alle vormen erover gedeeltelijk transparant te maken.
Soms wilt u misschien dat het eindresultaat na het overlappen van verschillende vormen bepaalde regels volgt. Het is bijvoorbeeld mogelijk om alleen de lichtere of donkerdere kleur weer te geven in gevallen waarin de vormen elkaar overlappen.
Met Konva kunt u enkele waarden opgeven om te bepalen hoe de kleuren van overlappende vormen moeten worden samengevoegd met behulp van de globalCompositeOperation eigendom. U kunt de documentatie op MDN lezen om meer te weten te komen over het eigendom en alle mogelijke waarden.
In het volgende voorbeeld heb ik een andere overvloeimodus toegepast op elk van de rechthoeken die in de hoek van de centrale rechthoek zijn geplaatst.
var canvasWidth = 600; var canvasHeight = 400; var stage = new Konva.Stage (container: "example", width: canvasWidth, height: canvasHeight); var layerA = nieuwe Konva.Layer (); var rectCenter = nieuwe Konva.Rect (x: 225, y: 125, width: 150, height: 150, fill: "rgb (255, 100, 0)"); var rectA = new Konva.Rect (x: 125, y: 25, width: 150, height: 150, fill: "rgb (0, 200, 100)", globalCompositeOperation: "lighten"); var rectB = new Konva.Rect (x: 325, y: 25, width: 150, height: 150, fill: "rgb (0, 200, 100)", globalCompositeOperation: "darken"); var rectC = nieuwe Konva.Rect (x: 125, y: 225, width: 150, height: 150, fill: "rgb (0, 200, 100)", globalCompositeOperation: "hue"); var rectD = new Konva.Rect (x: 325, y: 225, width: 150, height: 150, fill: "rgb (0, 255, 0)", globalCompositeOperation: "xor"); layerA.add (rectCenter, rectA, rectB, rectC, rectD); stage.add (layerA);
De kleur van de linkerbovenhoek is rgb (0, 200, 100), en de kleur van de centrale rechthoek is rgb (255, 100, 0). Wanneer de verlichten mengmodus wordt toegepast, de rgb componenten van beide kleuren worden afzonderlijk vergeleken en de hogere waarden voor elke component worden gebruikt om de uiteindelijke kleur te krijgen. In ons geval wordt de uiteindelijke kleur voor de linkerbovenhoek rgb (255, 200, 100).
Wanneer de verduisteren mengmodus wordt toegepast, de rgb componenten van beide kleuren worden afzonderlijk vergeleken en de laagste waarden voor elke component worden gebruikt om de uiteindelijke kleur te krijgen. In ons geval wordt de uiteindelijke kleur voor de rechterbovenhoek rgb (0, 100, 0).
Wanneer de tint mengmodus wordt toegepast, de luma en chroma van de onderste kleur worden gecombineerd met de tint van de bovenste kleur. Dit is de reden waarom de uiteindelijke kleur nog steeds groen is, maar lichter wordt. Wanneer de xor de mengmodus wordt toegepast, de uiteindelijke kleur wordt transparant op alle overlappende plaatsen.
In deze zelfstudie leerden we hoe we een vorm konden vullen met lineaire of radiale verlopen in plaats van vaste kleuren. We hebben ook geleerd hoe je schaduwen op verschillende vormen toepast en ze gedeeltelijk transparant maakt met de ondoorzichtigheid eigendom. In het laatste gedeelte werd uitgelegd hoe u mengmodi moest gebruiken om de uiteindelijke kleur te wijzigen nadat twee vormen elkaar overlappen.
Als je nog vragen hebt over deze tutorial, laat het me dan weten in de comments. In de volgende en laatste zelfstudie van de serie leert u hoe u gebeurtenissen aan verschillende vormen in Konva kunt binden.
Accentsconagua