Share
I den andre opplæringen av serien lærte du å tegne noen grunnleggende former som rektangler, sirkler og vanlige polygoner ved hjelp av Konva. Den tredje opplæringen dekket hvordan du kan bruke Konva til å tegne noen mer komplekse former som stjerner og ringer så vel som sprites på lerretet.
I denne opplæringen vil vi gå et skritt videre og lære å bruke forskjellige styling til former ved å endre fyllings- og slagverdiene. Du lærer også hvordan du kontrollerer opaciteten til en form og bruker skygger på den. I de siste seksjonene lærer du hvordan du bruker blandemodi for å angi hva sluttresultatet skal se ut om ulike former overlapper.
Vi har brukt fylle og hjerneslag egenskaper fra den første opplæringen av serien. Vi har imidlertid bare brukt dem til å fylle former med en solid farge så langt. Du kan også fylle en form med gradienter (både lineær og radial) samt bilder. Det samme gjelder for ulike slag i en form.
Det er to måter å påføre en fyll på i forskjellige former. Du kan enten angi fyllingsverdien ved hjelp av fylle eiendom når en form først opprettes i Konva, eller du kan bruke fylle() metode for å påføre en fylling dynamisk som svar på noen hendelser som hover, knappeklikk osv.
Når du fyller et element med en solid farge, kan du angi en verdi for fylle eiendom og det vil fungere helt fint. Når du bruker en lineær gradient for å fylle innsiden av en form, må du angi gyldige verdier for mange andre egenskaper som fillLinearGradientStartPoint, fillLinearGradientEndPoint, og fillLinearGradientColorStops. De to første egenskapene aksepterer objekter som spesifiserer x- og y-koordinatene til start- og sluttpunktene i en gradient. Du kan også spesifisere x- og y-verdiene separat ved hjelp av fillLinearGradientStartPointX, fillLinearGradientStartPointY, fillLinearGradientEndPointX, og fillLinearGradientEndPointY eiendommer.
Radialgradienter har også samme sett med egenskaper, men ordet lineær er erstattet med radial. To ytterligere egenskaper relatert til radiale gradienter er fillRadialGradientStartRadius og fillRadialGradientEndRadius.
var canvasWidth = 600; var canvasHeight = 400; var stadium = ny Konva.Stage (container: "example", bredde: canvasWidth, height: canvasHeight); var layerA = ny Konva.Layer (); var rectA = ny Konva.Rect (x: 25, y: 25, bredde: 200, høyde: 150, fillLinearGradientStartPoint: x: 0, y: 0, fillLinearGradientEndPoint: x: 200, y: 150, fillLinearGradientColorStops : [0, 'blå', 1, 'gul'], slag: "svart"); var rectB = ny Konva.Rect (x: 375, y: 25, bredde: 200, høyde: 150, fillLinearGradientStartPoint: x: 0, y: 50, fillLinearGradientEndPoint: x: 100, y: -50 fillLinearGradientColorStops: [0, 'grønn', 0,1, 'gul', 0,5, 'rød', 0,9, 'svart'], slag: "svart"); var rectC = ny Konva.Rectius: 220, fillRadialGradientColorStops: [0, 'green', 0.5, 'yellow', 0.75, 'rød', 0,9, 'svart'], slag: "svart"); var rectD = ny Konva.Rectius: 0, fillRadialGradientEndRadius: 150, fillRadialGradientStartPoint: x: 100, y: 75, fillRadialGradientEndPoint: x: 375, y: 200, bredde: 200, høyde: 150, fillRadialGradientStartRadius: 100, y: 75, fillRadialGradientColorStops: [0, 'blå', 0,5, 'gul', 0,9, 'grønn'], slag: "svart"); lagA.add (rectA, rectB, rectC, rectD); stage.add (layerA);
Når ikke spesifisert, antas start- og sluttpunktet for en radial gradient 0,0. Det er derfor den radiale gradienten i det tredje rektangel stammer fra øverste venstre hjørne. Husk også at start- og sluttpunktene er angitt i forhold til selve formen.
På samme måte som fyllingen, kan du angi en verdi for strekkfarge og strekkbredde ved hjelp av hjerneslag og strokeWidth egenskaper når en form først blir opprettet. Du kan også dynamisk sette begge disse verdiene ved hjelp av slag () og strokewidth () fremgangsmåter.
Du kan bruke skygger til alle former som er opprettet ved hjelp av Konva ved hjelp av fire forskjellige egenskaper som kalles shadowColor, shadowOffset, shadowBlur, og shadowOpacity. De shadowOffset eiendom aksepterer en gjenstand med x og y Komponenter som verdi, men du kan også bruke shadowOffsetX og shadowOffsetY å spesifisere x og y koordinerer separat. Du har også mulighet til å aktivere og deaktivere skyggene for en bestemt form ved hjelp av shadowEnabled eiendom.
Du kan kontrollere opaciteten til selve formen ved hjelp av opasitet eiendom. Vær oppmerksom på at et helt gjennomsiktig objekt ikke vil gi noen skygge. Tilsvarende, hvis du har satt fylle fargen på en form til gjennomsiktig, bare skyggen av dens hjerneslag vil bli gjengitt på lerretet.
var canvasWidth = 600; var canvasHeight = 400; var stadium = ny Konva.Stage (container: "example", bredde: canvasWidth, height: canvasHeight); var layerA = ny Konva.Layer (); var rectA = ny Konva.Rect (x: 25, y: 25, bredde: 200, høyde: 150, cornerRadius: 5, fyll: "oransje", opacity: 0.5, shadowColor: "black", shadowOffset: x: -10, y: 10, shadowBlur: 10, slag: "svart"); var starA = ny Konva.Star (x: 400, y: 200, numPoints: 10, innerRadius: 50, outerRadius: 150, fyll: "gjennomsiktig", slag: "svart", strekkbredde: 5, shadowColor: "rød" , shadowOffset: x: 5, y: 5, shadowBlur: 0); lagA.add (rectA, starA); stage.add (layerA);
Innstilling av shadowBlur eiendom til 0 gjør skyggen så skarp som den opprinnelige formen selv. Hvis denne verdien er for høy, vil skyggen miste den opprinnelige formen; Du ser bare en mørk lapp på lerretet.
Jeg vil påpeke at du også kan lage tekstskygger med samme sett av egenskaper når du har ordnet en Konva.Text () gjenstand.
Hittil i serien skjulte noen overlapping mellom figurer helt nederst. Den eneste måten å holde bunnformen synlig på, var å gjøre alle former over den delvis gjennomsiktig.
Noen ganger vil du kanskje ha det endelige resultatet etter overlappingen av forskjellige former for å følge visse regler. For eksempel er det mulig å bare vise den lettere eller mørkere fargen i tilfeller der figurene overlapper.
Konva lar deg spesifisere noen verdier for å bestemme hvordan fargene på overlappende former skal blandes sammen ved hjelp av globalCompositeOperation eiendom. Du kan lese dokumentasjonen på MDN for å lære mer om eiendommen og alle mulige verdier i mer detalj.
I det følgende eksemplet har jeg brukt en annen blandingstilstand til hver av rektanglene plassert i hjørnet av det sentrale rektangel.
var canvasWidth = 600; var canvasHeight = 400; var stadium = ny Konva.Stage (container: "example", bredde: canvasWidth, height: canvasHeight); var layerA = ny Konva.Layer (); var rectCenter = ny Konva.Rect (x: 225, y: 125, bredde: 150, høyde: 150, fyll: "rgb (255, 100, 0)"); var rectA = ny Konva.Rect (x: 125, y: 25, bredde: 150, høyde: 150, fyll: "rgb (0, 200, 100)", globalCompositeOperation: "lighten"); var rectB = ny Konva.Rect (x: 325, y: 25, bredde: 150, høyde: 150, fyll: "rgb (0, 200, 100)", globalCompositeOperation: "darken"); var rectC = ny Konva.Rect (x: 125, y: 225, bredde: 150, høyde: 150, fyll: "rgb (0, 200, 100)", globalCompositeOperation: "nyanse"); var rectD = ny Konva.Rect (x: 325, y: 225, bredde: 150, høyde: 150, fyll: "rgb (0, 255, 0)", globalCompositeOperation: "xor"); layerA.add (rectCenter, rectA, rectB, rectC, rectD); stage.add (layerA);
Fargen på det øverste venstre rektangel er rgb (0, 200, 100), og fargen på det sentrale rektangel er rgb (255, 100, 0). Når lette blandingsmodus brukes, den rgb Komponenter av begge fargene blir sammenlignet individuelt, og de høyere verdiene for hver komponent brukes til å få den endelige fargen. I vårt tilfelle blir den endelige fargen for det øverste venstre hjørnet rgb (255, 200, 100).
Når mørkere blandingsmodus brukes, den rgb Komponenter i begge fargene sammenlignes individuelt, og de lavere verdiene for hver komponent brukes til å få den endelige fargen. I vårt tilfelle blir den endelige farge for øverste høyre hjørne rgb (0, 100, 0).
Når hue blandingsmodus påføres, luma og krom på bunnfargen kombineres med fargen på toppfargen. Derfor er den endelige farge fortsatt grønn, men blir lettere. Når xor blandingsmodus brukes, den endelige fargen blir gjennomsiktig på alle steder av overlapping.
I denne veiledningen lærte vi å fylle en form med lineære eller radiale gradienter i stedet for solide farger. Vi lærte også å bruke skygger til forskjellige former og gjøre dem delvis gjennomsiktige ved hjelp av opasitet eiendom. Den siste delen viste deg hvordan du bruker blandemodus for å endre den endelige fargen etter at to former overlapper.
Hvis du har noen spørsmål knyttet til denne opplæringen, vennligst gi beskjed i kommentarene. Neste og siste opplæring i serien vil lære deg hvordan du binder hendelser til forskjellige former i Konva.
Accentsconagua