Share
Den innledende opplæringen av serien lærte deg hvordan du tegner din første form ved hjelp av Konva. Det forklarte også hvordan lag og grupper jobber i Konva. I resten av serien vil vi fokusere på mer spesifikke emner som å lage grunnleggende og komplekse former eller legge til hendelseslyttere i forskjellige former for å gjøre grafikkets interaktive.
Denne spesielle opplæringen vil vise deg hvordan du lager grunnleggende former som rektangler, sirkler og ellipser i Konva. Du vil også lære om forskjellige attributter som kan brukes til å tilpasse utseendet på alle disse figurene basert på dine behov. Senere deler av opplæringen vil diskutere hvordan man tegner ulike typer linjer og vanlige polygoner ved hjelp av Konva.
Du kan lage rektangler i Konva ved hjelp av Konva.rect () gjenstand. Stillingen til det øverste venstre hjørnet av et rektangel kan spesifiseres ved hjelp av x og y eiendommer. På samme måte kan du angi bredden og høyden på rektangelet ved hjelp av bredde og høyde eiendommer. Alle rektanglene du tegner vil ha skarpe hjørner som standard. Du kan imidlertid gjøre dem runde ved å velge en passende verdi for cornerRadius eiendom.
Det er mulig å vise eller skjule et rektangel ved hjelp av synlig eiendom. Hvis du ikke vil gjemme et rektangel helt, men fortsatt gjøre det halvtransparent, kan du bruke opasitet eiendom. Du kan sette det til et tall mellom 0 og 1 inkludert. Formen vil ikke være synlig hvis opasiteten er satt til 0.
Du kan også rotere eller skala rektangelformene dine ved hjelp av rotasjon og skala egenskaper henholdsvis. Rotasjonen er spesifisert som et vanlig tall, men brukes i grader. Du har muligheten til å skalere et hvilket som helst rektangel på enten x- eller y-aksen uavhengig av å bruke scaleX og Scaley eiendommer.
Her er et eksempel som trekker forskjellige rektangler på et lerret ved hjelp av alle egenskapene vi nettopp har diskutert.
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: 10, y: 10, bredde: 200, høyde: 50, fyll: "gul", strekk: "svart"); var rectB = ny Konva.Rect (x: 160, y: 30, bredde: 80, høyde: 250, fyll: "oransje", strekk: "svart"); var rectC = ny Konva.Rect (x: 200, y: 160, bredde: 180, høyde: 180, cornerRadius: 10, strokeBredde: 10, opasitet: 0,8, fyll: "rødt", strekk: "svart") ; var rectD = ny Konva.Rect (x: 400, y: 20, bredde: 180, høyde: 180, skalaX: 1,8, skalaY: 0.75, rotasjon: 45, fyll: "lysegrønn", slag: "svart") ; lagA.add (rectA, rectB, rectC, rectD); stage.add (layerA);
Du bør merke seg at rektanglene er ikke trukket i den rekkefølgen de er opprettet i. I stedet blir de trukket i rekkefølgen der de ble lagt til laget. De fylle og hjerneslag Egenskaper brukes til å angi fyllings- og slagfargen henholdsvis.
Du kan opprette sirkler i Konva ved hjelp av Konva.circle () gjenstand. Denne gangen, den x og y egenskaper bestemmer midtpunktet for å tegne sirkelen. Du kan fortsatt angi en verdi for både bredde og høydeegenskaper. Disse verdiene brukes til å beregne diameteren til sirkelen som skal tegnes. En sirkel har imidlertid samme bredde og høyde. Dette betyr at verdien som er spesifisert senere, har forrang enn den som ble spesifisert tidligere i tilfelle konflikt. Med andre ord, hvis du setter bredde av en sirkel til 100 og seinere sett sin høyde til 180, vil sirkelen ha en diameter på 180 og bredden vil bli ignorert.
For å unngå forvirring kan du utelate bredde og høyde egenskaper og angi en verdi for radius av sirkelen. Husk at du må stille radius til 50 for å tegne en sirkel hvis bredde og høyde er 100.
På lignende måte kan du også lage en ellipse ved hjelp av Konva.ellipse () gjenstand. Den eneste forskjellen er at radiusegenskapen nå aksepterer et objekt med x og y egenskaper som verdi. Hvis spesifisert, vil bredden og høydeegenskapen nå bli anvendt uavhengig for å bestemme ellipsens endelige form.
var canvasWidth = 600; var canvasHeight = 400; var stadium = ny Konva.Stage (container: "example", bredde: canvasWidth, height: canvasHeight); var layerA = ny Konva.Layer (); var circA = ny Konva.Circle (x: 100, y: 100, bredde: 180, fyll: "gul", strekk: "svart"); var circB = ny Konva.Circle (x: 180, y: 150, høyde: 100, fyll: "oransje", slag: "svart"); var circC = ny Konva.Circle (x: 200, y: 275, radius: 100, opacity: 0.5, fill: "rød", slag: "svart"); var ellipA = ny Konva.Ellipse (x: 400, y: 75, bredde: 70, høyde: 100, rotasjon: -15, fyll: "lysegrønn", slag: "svart"); var ellipB = ny Konva.Ellipse (x: 400, y: 75, bredde: 80, høyde: 120, rotasjon: -15, strokevidde: 5, fyll: "hvit", strekk: "svart"); var ellipC = ny Konva.Ellipse (x: 450, y: 275, radius: x: 100, y: 50, skalaJ: 2, fyll: "fiolett", strekk: "svart"); lagA.add (sirkA, sirkB, sirkC, ellipB, ellipA, ellipC); stage.add (layerA);
Du bør merke det ellipB har større høyde og bredde i forhold til ellipA. Siden de begge har det samme x og y verdier, måtte jeg legge til ellipB til laget først for å beholde ellipA synlig. Hvis ellipB ble lagt til etter ellipA, det ville ha blitt trukket over ellipA, gjemmer det fra seerne.
Hvis du ser nøye på, vil du også se at den fiolette sirkelen egentlig er en ellipse med y radius satt til 50 og x radius satt til 100. Den har imidlertid blitt skalert med en faktor 2 i y-retningen. Skalingen øker også slagbredden, noe som gjør den to ganger bredere på toppen og bunnen av ellipsen sammenlignet med venstre og høyre kant..
Du kan bruke Konva.Line () objekt for å lage forskjellige typer linjer og kurver. Alle linjer krever at du spesifiserer punktene som linjen skal passere ved hjelp av punkter eiendom. Poengene er angitt som en matrise.
Du kan bli med på et sett med poeng som tilbys ved hjelp av punkter array for å danne et polygon ved å sette verdien av lukket tilskrive ekte. På samme måte kan du konvertere et sett med rette linjer til splines ved å sette en verdi for spenning Egenskap. En verdi på null vil resultere i rette linjer. Høyere verdier skaper kurvlinjer.
Det er mulig for deg å lage en lukket og svingete form (en blob) ved å sette en verdi for spenning eiendom samt lukking av kurven ved innstilling lukket til ekte.
Som resten av figurene som vi har diskutert, kan du angi strekkbredden for å tegne linjene ved hjelp av strokeWidth Egenskap. Du kan også spesifisere a fylle farge for lukkede former.
I det følgende eksemplet har jeg brukt det samme settet med poeng til å plotte alle figurene. Men jeg har også brukt bevege seg() Metode for å skifte hver form med en bestemt avstand for å unngå overlapping.
var canvasWidth = 600; var canvasHeight = 400; var stadium = ny Konva.Stage (container: "example", bredde: canvasWidth, height: canvasHeight); var layerA = ny Konva.Layer (); var lineA = ny Konva.Line (poeng: [50, 20, 20, 100, 80, 140, 60, 80, 200, 20], slag: "svart"); var lineB = ny Konva.Line (poeng: [50, 20, 20, 100, 80, 140, 60, 80, 200, 20] ; var lineC = ny Konva.Line (poeng: [50, 20, 20, 100, 80, 140, 60, 80, 200, 20], spenning: 0,8, slag: "blå"); var lineD = ny Konva.Line (poeng: [50, 20, 20, 100, 80, 140, 60, 80, 200, 20], spenning: 1,8, slag: "rød"); var lineE = ny Konva.Line (poeng: [50, 20, 20, 100, 80, 140, 60, 80, 200, 20], lukket: sann, spenning: 2.2, fyll: "lyseblå" svart" ); lineB.move (x: 180, y: 40); lineC.move (x: 380, y: 0); lineD.move (x: 0, y: 200); lineE.move (x: 180, y: 220); layerA.add (linjeA, linjeB, linjeC, linjeD, linjeE); stage.add (layerA);
Du bør også være oppmerksom på at de røde og blå linjene er plottet ved hjelp av det samme settet av poeng, men et annet spenning verdien endrer signifikant endringer i kurvenes endelige form.
Du kan nøye velge verdien av forskjellige punkter i punkter array for å tegne vanlige polygoner som pentagoner og sekskanter. Tegning av mer komplekse regelmessige polygoner som ottekant ved hjelp av denne metoden kan være tungvint og feilproblemer. For å unngå feil, bør du bruke Konva.RegularPolygon () gjenstand for å lage vanlige polygoner.
De x og y Egenskaper brukes til å angi midtpunktet av polygonen. De radius Egenskapen brukes til å spesifisere avstanden mellom polygonens midtpunkt og alle dets hjørner. Du kan bruke sider Egenskap for å angi antall sider som polygonen skal ha. Husk at alle sidene av en polygon opprettet ved hjelp av denne metoden vil ha like lengder. Du kan endre lengden på noen sider ved hjelp av scaleX og Scaley egenskaper, men det vil også endre slagbredden på den skalerte siden.
På samme måte som alle andre former som vi har diskutert, kan du endre strekkbredden, deaktigheten og synligheten til vanlige polygoner ved å bruke strokeWidth, opasitet, og synlighet.
var canvasWidth = 600; var canvasHeight = 400; var stadium = ny Konva.Stage (container: "example", bredde: canvasWidth, height: canvasHeight); var layerA = ny Konva.Layer (); var trekant = ny Konva.RegularPolygon (x: 150, y: 275, sider: 3, radius: 100, skalaJ: 1,6, strekk: "svart", fyll: "rgba (200,0,200, 1)",) ; var kvadrat = ny Konva.RegularPolygon (x: 60, y: 60, sider: 4, radius: 50, fyll: "rgba (200,0,0, 0,5)", strekk: "svart"); var pentagon = ny Konva.RegularPolygon (x: 160, y: 160, sider: 5, radius: 80, fyll: "rgba (0,200,0, 0,5)", slag: "svart"); var hexagon = ny Konva.RegularPolygon (x: 350, y: 120, sider: 6, radius: 80, fyll: "rgba (0,0,200, 0,5)", slag: "svart"); var octagon = ny Konva.RegularPolygon (x: 450, y: 275, sider: 8, radius: 100, fyll: "rgba (200,200,0, 0,5)", slag: "svart"); layerA.add (trekant, firkant, femkant, sekskant, ottekant); stage.add (layerA);
I denne opplæringen har vi dekket de mest grunnleggende former som Konva tillater oss å tegne på lerretet med letthet. Vi lærte også om forskjellige attributter som kan brukes til å kontrollere utseendet på alle disse figurene. De fleste av attributter er vanlige for alle former, men noen av dem er bare gjeldende på bestemte former.
.
Accentsconagua