Share
I serieens andra handledning lärde du dig att rita några grundläggande former som rektanglar, cirklar och regelbundna polygoner med Konva. Den tredje handledningen täckte hur du kan använda Konva för att dra några mer komplexa former som stjärnor och ringar samt sprites på duken.
I denna handledning kommer vi att gå ett steg längre och lära oss hur du applicerar olika styling till former genom att ändra deras fyllnings- och strokevärden. Du kommer också att lära dig hur man kontrollerar opacitet av en form och tillämpar skuggor på den. I de sista sektionerna kommer du att lära dig hur du använder blandningslägen för att ange vad slutresultatet ska se ut om olika former överlappar varandra.
Vi har använt fylla och stroke egenskaper från serieens första handledning. Vi har dock bara använt dem för att fylla former med en solid färg hittills. Du kan också fylla i form med gradienter (både linjär och radiell) samt bilder. Detsamma gäller för olika slag som appliceras på en form.
Det finns två sätt att applicera en fyllning till olika former. Du kan antingen ange fyllnadsvärde med hjälp av fylla egenskap när en form skapas först i Konva, eller du kan använda fylla() metod för att applicera en fyllning dynamiskt som svar på vissa händelser som svävar, knappklick, etc..
När du fyller ett element med en fast färg kan du ange ett värde för fylla egendom och det kommer att fungera bra. När du använder en linjär gradient för att fylla inuti en form måste du ange giltiga värden för många andra egenskaper som fillLinearGradientStartPoint, fillLinearGradientEndPoint, och fillLinearGradientColorStops. De två första egenskaperna accepterar objekt som anger x- och y-koordinaterna för start- och slutpunkterna för en gradient. Du kan också ange x- och y-värdena separat med hjälp av fillLinearGradientStartPointX, fillLinearGradientStartPointY, fillLinearGradientEndPointX, och fillLinearGradientEndPointY egenskaper.
Radiella gradienter har också samma uppsättning egenskaper, men ordet Linjär ersätts med Radiell. Två ytterligare egenskaper relaterade till radiella gradienter är fillRadialGradientStartRadius och fillRadialGradientEndRadius.
var canvasWidth = 600; var canvasHeight = 400; var stadium = ny Konva.Stage (container: "example", bredd: canvasWidth, height: canvasHeight); var layerA = nytt Konva.Layer (); var rectA = ny Konva.Rect (x: 25, y: 25, bredd: 200, höjd: 150, fillLinearGradientStartPoint: x: 0, y: 0, fillLinearGradientEndPoint: x: 200, y: 150, fillLinearGradientColorStops : [0, 'blå', 1, 'gul'], stroke: "svart"); var rectB = ny Konva.Rect (x: 375, y: 25, bredd: 200, höjd: 150, fillLinearGradientStartPoint: x: 0, y: 50, fillLinearGradientEndPoint: x: 100, y: -50 fillLinearGradientColorStops: [0, 'grön', 0,1, 'gul', 0,5, 'röd', 0,9, 'svart'], streck: "svart"); var rectC = ny Konva.Rectius: 0, fillRadialGradientEndRadius: 220, fillRadialGradientColorStops: [0, 'grön', 0,5, 'gul', 0,75, bredd: 200, höjd: 150, fillRadialGradientStartRadius: 'rött', 0,9, 'svart'], stroke: "svart"); var rectD = new Konva.Rectius: 150, fillRadialGradientStartPoint: x: 100, y: 75, fillRadialGradientEndPoint: x: 375, y: 200, bredd: 200, höjd: 150, fillRadialGradientStartRadius: 0, fillRadialGradientEndRadius: 100, y: 75, fillRadialGradientColorStops: [0, 'blå', 0,5, 'gul', 0,9, 'grön'], slag: "svart"); skiktA.add (rectA, rectB, rectC, rectD); stage.add (layerA);
När det inte anges, antas start- och slutpunkten för en radiell gradient vara 0,0. Det är därför den radiella gradienten i den tredje rektangeln härstammar från det övre vänstra hörnet. Kom också ihåg att start- och slutpunkterna anges i förhållande till själva formen.
Precis som fyllningen kan du ställa in ett värde för strokefärg och slagbredd med stroke och strokeWidth egenskaper när en form initieras först. Du kan också dynamiskt ställa in båda dessa värden med hjälp av stroke() och strokewidth () metoder.
Du kan använda skuggor till alla former som skapats med Konva med hjälp av fyra olika egenskaper som heter Shadow, shadowOffset, shadowBlur, och shadowOpacity. De shadowOffset egendom accepterar ett objekt med x och y komponenter som dess värde, men du kan också använda shadowOffsetX och shadowOffsetY att ange x och y koordinerar separat. Du har också möjlighet att aktivera och inaktivera skuggorna för en viss form med hjälp av shadowEnabled fast egendom.
Du kan styra opaciteten hos formen själv med hjälp av opacitet fast egendom. Observera att ett helt transparent objekt inte kommer att skuta någon skugga. På samma sätt, om du har ställt in fylla Färgen på en form till transparent, bara skuggan av dess stroke kommer att göras på duken.
var canvasWidth = 600; var canvasHeight = 400; var stadium = ny Konva.Stage (container: "example", bredd: canvasWidth, height: canvasHeight); var layerA = nytt Konva.Layer (); var rectA = ny Konva.Rect (x: 25, y: 25, bredd: 200, höjd: 150, hörnRadius: 5, fyll: "orange", opacitet: 0,5, shadowColor: "black", shadowOffset: x: -10, y: 10, shadowBlur: 10, slag: "svart"); var starA = ny Konva.Star (x: 400, y: 200, numPoäng: 10, innerRadius: 50, yttreRadius: 150, fyll: "transparent", stroke: "svart", stroke Bredd: 5, skuggaColor: "röd" , shadowOffset: x: 5, y: 5, shadowBlur: 0); skiktA.add (rectA, starA); stage.add (layerA);
Ställa in shadowBlur egenskap till 0 gör skuggan så skarp som den ursprungliga formen själv. Om detta värde är för högt kommer skuggan att förlora den ursprungliga formen; Du kommer bara se en mörk lapp på duken.
Jag vill påpeka att du också kan skapa textskuggor med samma uppsättning egenskaper när du har instanserat en Konva.Text () objekt.
Hittills i serien gömde överlapp mellan former helt bottenformen helt. Det enda sättet att hålla bottenformen synlig var att göra alla former över det delvis genomskinliga.
Ibland kanske du vill ha det slutliga resultatet efter överlappningen av olika former för att följa vissa regler. Det är exempelvis möjligt att bara visa den ljusare eller mörkare färgen i fall där formerna överlappar varandra.
Konva tillåter dig att ange några värden för att bestämma hur färgerna på överlappande former ska blandas ihop med globalCompositeOperation fast egendom. Du kan läsa dokumentationen på MDN för att få mer information om fastigheten och alla möjliga värden.
I det följande exemplet har jag applicerat ett annat blandningsläge till var och en av rektanglarna placerade i hörnet av den centrala rektangeln.
var canvasWidth = 600; var canvasHeight = 400; var stadium = ny Konva.Stage (container: "example", bredd: canvasWidth, height: canvasHeight); var layerA = nytt Konva.Layer (); var rectCenter = ny Konva.Rect (x: 225, y: 125, bredd: 150, höjd: 150, fyll: "rgb (255, 100, 0)"); var rectA = ny Konva.Rect (x: 125, y: 25, bredd: 150, höjd: 150, fyll: "rgb (0, 200, 100)", globalCompositeOperation: "lighten"); var rectB = ny Konva.Rect (x: 325, y: 25, bredd: 150, höjd: 150, fyll: "rgb (0, 200, 100)", globalCompositeOperation: "darken"); var rectC = ny Konva.Rect (x: 125, y: 225, bredd: 150, höjd: 150, fyll: "rgb (0, 200, 100)", globalCompositeOperation: "nyans"); var rectD = ny Konva.Rect (x: 325, y: 225, bredd: 150, höjd: 150, fyll: "rgb (0, 255, 0)", globalCompositeOperation: "xor"); layerA.add (rectCenter, rectA, rectB, rectC, rectD); stage.add (layerA);
Färgen på den övre vänstra rektangeln är rgb (0, 200, 100), och den centrala rektanglets färg är rgb (255, 100, 0). När lätta blandningsläge tillämpas, rgb Komponenterna i båda färgerna jämförs individuellt, och de högre värdena för varje komponent används för att få den slutliga färgen. I vårt fall blir den sista färgen till det övre vänstra hörnet rgb (255, 200, 100).
När mörkna blandningsläge tillämpas, rgb Komponenterna i båda färgerna jämförs individuellt, och de lägre värdena för varje komponent används för att få den slutliga färgen. I vårt fall blir den sista färgen till det övre högra hörnet rgb (0, 100, 0).
När nyans blandningsläge appliceras, luma och krom på bottenfärgen kombineras med topptonens färg. Det är därför den slutliga färgen fortfarande är grön men blir lättare. När xor blandningsläge appliceras, den slutliga färgen blir transparent på alla överlappningsplatser.
I denna handledning lärde vi oss hur vi fyller en form med linjära eller radiella gradienter i stället för soliga färger. Vi lärde oss också att applicera skuggor till olika former och göra dem delvis transparenta med hjälp av opacitet fast egendom. Det sista avsnittet visade dig hur man använder blandningslägen för att ändra den slutliga färgen efter två överlappningar.
Om du har några frågor relaterade till denna handledning, var god och låt mig veta i kommentarerna. Nästa och sista handledning i serien kommer att lära dig hur man binder händelser till olika former i Konva.
Accentsconagua