Share
HTML5-kanalen har länge stödits av alla populära webbläsare. Du kan använda den för att teckna grafik i en webbläsare med hjälp av JavaScript. Den grafik som kan skapas på ett dukområde från enkla linjer och former till fotokompositioner och animeringar.
I denna serie kommer du att lära dig om ett mycket användbart dukbibliotek kallat Konva. Du kan använda Konva för att dra olika former på duken eller scenen. Biblioteket låter dig, bland annat, skala, rotera och animera alla dessa former och bifoga evenemangslyttare till dem.
Denna handledning kommer att fokusera på bibliotekets grundläggande begrepp samtidigt som man ger en kort översikt över olika funktioner i biblioteket. Därefter fortsätter vi vidare till mer specifika och komplexa ämnen senare. Biblioteket kom först till att bli en gaffel i det populära KineticJS-biblioteket.
Allt som du ritar med Konva kommer att kräva att du skapar en scen med Konva.Stage. Du kan ange behållarelementet i ett steg med hjälp av behållare attribut. Varje steg kräver också ett bredd- och höjdvärde som kan anges med hjälp av bredd och höjd attributen respektive.
Ett enda steg kan innehålla flera lager. Var och en av dessa lager kommer att ha två renderarna. Sceneråtergivaren används för att rita alla former som är synliga för dig på scenen. Slumpgraferen är dold från användarna. Det används för att utföra högpresterande händelsedetektering.
Ett enda lager kan innehålla flera former, grupper av olika former eller en grupp grupper. Staden, skikten, grupperna och formerna fungerar som virtuella noder som kan utformas individuellt och transformeras.
Innan vi skapar några former måste vi inkludera biblioteket i ditt projekt. Det finns flera sätt att göra detta. Om du använder pakethanterare kan du köra följande kommandon.
npm installera konva // ELLER bower install konva
Du kan också länka direkt till en miniverad version av biblioteket som finns på cdnjs och jsDelivr.
När du har installerat biblioteket kan du använda följande kod för att skapa rektangulära former 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: 75, y: 150, bredd: 200, höjd: 50, rotation: 45, fyll: "blå", stroke: "svart", strokevidde: 4); var rectB = ny Konva.Rect (x: 350, y: 50, bredd: 100, höjd: 250, cornerRadius: 50, fyll: "röd", stroke: "brun", strokevidde: 10); layerA.add (Recta); layerA.add (rectB); stage.add (layerA);
Att skriva någonting på duken är en femstegs process. Först måste du inställa ett stadium där olika former skulle ritas med Konva.Stage. Detta kräver att du anger bredden och höjden på scenen såväl som id för behållarelementet som skulle innehålla scenen. I vårt fall ritas rektanglarna inuti a div vars id är exempel.
I nästa steg måste du instansera alla lag som du vill göra på ditt stadium. Vi skapar bara ett enda lager i det här exemplet, men du kan skapa flera lager och lägga till dem alla i ett enda steg. Olika lager kan vara mycket användbara när din bakgrund består av statiska såväl som rörliga element. I sådana fall kan du lägga till de statiska elementen på ett lager och rörliga element på den andra. Eftersom du inte behöver uppdatera den statiska bakgrunden efter varje redraw kan detta drastiskt förbättra prestandan.
Efter att lagren har skapats kan du initiera olika former som rektanglar, ellipser, stjärnor och ringar som du vill visa på lagren. Slutligen måste du lägga till formerna till lagren och lagren till scenen.
Att gruppera olika former tillsammans är en bra idé när du vill hantera alla former som en enda enhet. Låt oss till exempel säga att du har skapat en bil med två cirklar för hjul och två rektangulära block för kroppen. Om du vill flytta den här bilen utan att skapa en grupp måste du individuellt översätta alla former en åt gången. En effektivare metod är att bara lägga till cirklarna och rektanglarna till en grupp och översätta dem på en gång.
För att lägga till någon form i en grupp måste du använda Lägg till() metod, precis som du gjorde när du tillsatte former till ett lager. Du kan också lägga till en grupp i en annan grupp för att skapa mer komplexa enheter. Till exempel kan du skapa en person i bilen som en grupp och lägga den personen till gruppen som representerar bilen.
I följande exempel har jag hållit sakerna enkla och skapade bara en Cara grupp. Därefter kan jag rotera och skala hela bilen på en gång.
var canvasWidth = 600; var canvasHeight = 400; var stadium = ny Konva.Stage (container: "example", bredd: canvasWidth, height: canvasHeight); var layerA = nytt Konva.Layer (); var wheelA = ny Konva.Ring (x: 130, y: 230, innerRadius: 5, yttreRadius: 30, fyll: "grå", stroke: "svart", namn: "First Wheel"); var wheelB = ny Konva.Ring (x: 270, y: 230, innerRadius: 5, yttreRadius: 30, fyll: "grå", stroke: "svart", namn: "Second Wheel"); var frameA = ny Konva.Rect (x: 80, y: 150, bredd: 240, höjd: 60, cornerRadius: 10, fyll: "röd", slag: "svart", namn: "Bottom Frame"); var frameB = ny Konva.Rect (x: 135, y: 90, bredd: 120, höjd: 60, cornerRadius: 10, fyll: "orange", slag: "svart", namn: "Top Frame"); var carA = ny Konva.Group (x: 50, y: 0, rotation: 20, skalaX: 1,2); carA.add (wheelA, wheelB, frameA, frameB); layerA.add (Cara); stage.add (layerA);
Du vet redan om lager i Konva. Layering är något annat. Som standard dras alla former som du lägger till i ett lager i den ordning de fylldes i. Det betyder att former som läggs till ett lager efter alla andra kommer att dras utöver andra former.
Konva låter dig styra den ordning i vilken formerna ritas med olika lagringsmetoder som moveToTop (), moveToBottom (), flytta upp(), flytta ner(), och zIndex ().
De moveToTop () Metoden kommer att rita den givna formen över alla andra former som har lagts till samma lager. Former ritade på ett skikt som sattes till Konva-scenen efter Skiktet på vår specifika form kvarstår fortfarande över vår form. Därför ligger indigo cirkeln i följande exempel kvar under den ljusgröna cirkeln, även efter att ha ringt moveToTop ().
De moveToBottom () Metoden kommer att rita den givna formen under alla andra former som har lagts till samma lager. Precis som moveToTop (), Formerna kommer att flytta till botten av sina egna lager och inte lagren nedanför dem.
De flytta upp() och flytta ner() metoder flyttar den form som de kallas, en position över eller under deras nuvarande position i samma lager. De zIndex () Metoden används för att ställa in indexet för en form i sitt moderlager. Till skillnad från CSS kan du inte ställa in en godtycklig zIndex värde i Konva. För ett lager med 10 former, zIndex värdet kan endast vara mellan 0 och 9 (inklusive).
I ovanstående exempel kan du se att du bara trycker på "Indigo Top" -knappen inte ritar indigo cirkeln framför alla andra, medan du trycker på "Indigo Above All Others" placerar den överst. Detta beror på att den sista knappen också flyttar skiktet som innehåller indigocirkeln till toppen.
Eftersom cirklarna kan släpas runt kan det vara en bra idé att dra dem över varandra och se hur indigocirkeln ändras när du trycker på olika knappar.
Vi har täckt några grundläggande begrepp relaterade till Konva i denna handledning. Du borde nu kunna dra några vanliga former på duken och flytta dem runt som en grupp. Handledningen visade dig också hur man trycker på en viss form upp och ner i händelse av överlappning.
JavaScript har blivit ett av de faktiska språken för att arbeta på webben. Det är inte utan sina inlärningskurvor, och det finns gott om ramar och bibliotek för att hålla dig upptagen också. Om du letar efter ytterligare resurser att studera eller använda i ditt arbete, kolla vad vi har tillgängligt på Envato Market.
Om du har några frågor relaterade till denna handledning, var god att meddela mig i kommentarerna. Nästa handledning lär dig att rita grundläggande former i Konva.
Accentsconagua