Share
HTML5-lerretet har blitt støttet av alle populære nettlesere i lang tid nå. Du kan bruke den til å tegne grafikk i en nettleser ved hjelp av JavaScript. Grafikken som kan opprettes på et lerret, spenner fra enkle linjer og former til bildesammensetninger og animasjoner.
I denne serien lærer du om et veldig nyttig lerretsbibliotek som heter Konva. Du kan bruke Konva til å tegne forskjellige former på lerretet eller scenen. Biblioteket gir deg mulighet til å skalere, rotere og animere alle disse figurene og legge til hendelseslyttere til dem.
Denne opplæringen vil fokusere på de grunnleggende konseptene i biblioteket mens du gir en kort oversikt over ulike funksjoner i biblioteket. Etter det vil vi gå videre til mer spesifikke og komplekse emner senere. Biblioteket kom først til virkelighet som en gaffel av det populære KineticJS-biblioteket.
Alt du tegner med Konva vil kreve at du oppretter et stadium ved hjelp av Konva.Stage. Du kan angi beholderelementet i et scenen ved hjelp av container Egenskap. Hvert trinn krever også en bredde- og høydeverdi som kan spesifiseres ved hjelp av bredde og høyde attributter henholdsvis.
En enkelt fase kan inneholde flere lag. Hvert av disse lagene har to spillere. Sceneregisteren brukes til å tegne alle former som er synlige for deg på scenen. Slår grafen gjengivelsen er skjult fra brukerne. Det brukes til å utføre høykvalitets hendelsesdeteksjon.
Et enkeltlag kan inneholde flere former, grupper av forskjellige former eller en gruppe grupper. Scenen, lagene, gruppene og figurene fungerer som virtuelle noder som kan være individuelt stylet og transformert.
Før vi lager noen former, må vi inkludere biblioteket i prosjektet. Det er flere måter å gjøre dette på. Hvis du bruker pakkeadministratorer, kan du kjøre følgende kommandoer.
npm installere konva // OR bower install konva
Du kan også koble direkte til en minifisert versjon av biblioteket som er hostet på cdnjs og jsDelivr.
Når du har installert biblioteket, kan du bruke følgende kode for å lage rektangulære former 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: 75, y: 150, bredde: 200, høyde: 50, rotasjon: 45, fyll: "blå", strekk: "svart", strekkbredde: 4); var rectB = ny Konva.Rect (x: 350, y: 50, bredde: 100, høyde: 250, cornerRadius: 50, fyll: "rød", strekk: "brun", strekkbredde: 10); layerA.add (recta); layerA.add (rectB); stage.add (layerA);
Tegne alt på lerretet er en fem-trinns prosess. Først må du sette opp et scenen der forskjellige figurer skal tegnes ved hjelp av Konva.Stage. Dette krever at du spesifiserer bredden og høyden på scenen så vel som id for beholderelementet som vil inneholde scenen. I vårt tilfelle trekkes rektanglene inn i a div hvem sin id er eksempel.
I neste trinn må du instantiere alle lagene du vil gjengi på scenen din. Vi lager bare et enkelt lag i dette eksemplet, men du kan opprette flere lag og legge dem alle sammen i ett enkelt trinn. Ulike lag kan være svært nyttig når bakgrunnen din består av statiske og bevegelige elementer. I slike tilfeller kan du legge til de statiske elementene på ett lag og bevegelige elementer på den andre. Siden du ikke trenger å oppdatere den statiske bakgrunnen etter hver omdirigering, kan dette drastisk forbedre ytelsen.
Etter lagring av lagene kan du initialisere forskjellige former som rektangler, ellipser, stjerner og ringer du vil vise på lagene. Til slutt må du legge til figurene til lagene og lagene til scenen.
Å gruppere ulike former sammen er en god ide når du vil styre alle former som en enkelt enhet. For eksempel, la oss si at du har opprettet en bil med to sirkler for hjul og to rektangulære blokker for kroppen. Hvis du vil flytte denne bilen fremover uten å opprette en gruppe, må du oversette alle bildene en om gangen. En mer effektiv metode er å bare legge til sirkler og rektangler til en gruppe og oversette dem alle samtidig.
For å legge til noen form for en gruppe, må du bruke Legg til() metode, akkurat som du gjorde da du lagde figurer til et lag. Du kan også legge til en gruppe i en annen gruppe for å lage mer komplekse enheter. For eksempel kan du opprette en person i bilen som en gruppe og legge den personen til gruppen som representerer bilen.
I det følgende eksemplet har jeg holdt ting enkelt og bare opprettet a CARA gruppe. Etter det kan jeg rotere og skala hele bilen på en gang.
var canvasWidth = 600; var canvasHeight = 400; var stadium = ny Konva.Stage (container: "example", bredde: canvasWidth, height: canvasHeight); var layerA = ny Konva.Layer (); var wheelA = ny Konva.Ring (x: 130, y: 230, innerRadius: 5, outerRadius: 30, fyll: "grå", slag: "svart", navn: "Førstehjul"); var wheelB = ny Konva.Ring (x: 270, y: 230, innerRadius: 5, outerRadius: 30, fyll: "grå", slag: "svart", navn: "Second Wheel"); var frameA = ny Konva.Rect (x: 80, y: 150, bredde: 240, høyde: 60, cornerRadius: 10, fyll: "rødt", slag: "svart", navn: "Bunnramme"); var frameB = ny Konva.Rect (x: 135, y: 90, bredde: 120, høyde: 60, hjørneRadius: 10, fyll: "oransje", strekk: "svart", navn: "Toppramme"); var carA = ny Konva.Group (x: 50, y: 0, rotasjon: 20, skalaX: 1,2); carA.add (wheelA, wheelB, frameA, frameB); layerA.add (Cara); stage.add (layerA);
Du vet allerede om lag i Konva. Layering er noe annerledes. Som standard blir alle former du legger til et lag, trukket i den rekkefølgen de ble lagt til. Dette betyr at figurer legges til et lag etter at alle andre vil bli tegnet på toppen av andre former.
Konva lar deg kontrollere rekkefølgen der figurene er tegnet ved hjelp av forskjellige lagringsmetoder som moveToTop (), moveToBottom (), Flytte opp(), moveDown (), og zIndex ().
De moveToTop () Metoden vil tegne gitt form over alle andre former som er lagt til samme lag. Figurer tegnet på et lag som ble lagt til Konva-scenen etter laget av vår spesifikke form vil fortsatt forbli over vår form. Dette er grunnen til at indigo-sirkelen i følgende eksempel forblir under den lysegrønne sirkelen, selv etter å ha ringt moveToTop ().
De moveToBottom () Metoden vil tegne gitt form under alle andre former som er lagt til samme lag. Akkurat som moveToTop (), Formene flytter seg til bunnen av sine egne lag og ikke lagene under dem.
De Flytte opp() og moveDown () metoder beveger den formen de kalles på, en posisjon over eller under deres nåværende stilling i samme lag. De zIndex () Metoden brukes til å sette indeksen for en form i sitt overordnede lag. I motsetning til CSS, kan du ikke angi en vilkårlig zIndex verdi i Konva. For et lag med 10 figurer, vil zIndex verdien kan bare være mellom 0 og 9 (inkludert).
I eksempelet ovenfor kan du se at du bare trykker på "Indigo Top" -knappen ikke tegner indigo sirkelen over alle andre, mens du trykker på "Indigo Over all Others" vil plassere den øverst. Dette skyldes at den siste knappen også beveger laget som inneholder indigo-sirkelen til toppen.
Siden sirklene kan trekkes rundt, kan det være lurt å dra dem over hverandre og se hvordan stillingen til indigo-sirkelen endres når du trykker på forskjellige knapper.
Vi har dekket noen grunnleggende begreper knyttet til Konva i denne opplæringen. Du bør nå kunne tegne noen vanlige former på lerretet og flytte dem rundt som en gruppe. Opplæringen viste deg også hvordan du skyver en bestemt form opp eller ned i tilfelle overlapping.
JavaScript har blitt et av de de facto språkene som fungerer på nettet. Det er ikke uten sine lærekurver, og det er nok av rammer og biblioteker for å holde deg opptatt også. Hvis du leter etter flere ressurser for å studere eller bruke i arbeidet ditt, sjekk ut hva vi har tilgjengelig på Envato Market.
Hvis du har spørsmål knyttet til denne opplæringen, kan du gjerne gi meg beskjed i kommentarene. Den neste opplæringen vil lære deg hvordan du tegner grunnleggende former i Konva.
Accentsconagua