Share
Seriens introduktionsövning lärde dig hur du ritar din första form med Konva. Det förklarade också hur lager och grupper arbetar i Konva. I resten av serien kommer vi att fokusera på mer specifika ämnen som att skapa grundläggande och komplexa former eller koppla händelse lyssnare till olika former för att göra din grafiska interaktiv.
Denna speciella handledning visar dig hur man skapar grundläggande former som rektanglar, cirklar och ellipser i Konva. Du kommer också att lära dig om olika attribut som kan användas för att anpassa utseendet på alla dessa former utifrån dina behov. Senare avsnitt i handledningen diskuterar hur man skriver olika typer av linjer och regelbundna polygoner med Konva.
Du kan skapa rektanglar i Konva med hjälp av Konva.rect () objekt. Positionen i det övre vänstra hörnet av en rektangel kan specificeras med hjälp av x och y egenskaper. På samma sätt kan du ange bredden och höjden på rektangeln med hjälp av bredd och höjd egenskaper. Alla rektanglar som du ritar kommer som standard att ha skarpa hörn. Du kan dock runda dem genom att välja ett lämpligt värde för hörnradie fast egendom.
Det är möjligt att visa eller gömma en rektangel med hjälp av synlig fast egendom. Om du inte vill helt dölja en rektangel men ändå göra den halvtransparent kan du använda opacitet fast egendom. Du kan ställa in det till valfritt antal mellan 0 och 1 inklusive. Formen kommer inte att vara synlig om opacitet är inställd på 0.
Du kan också rotera eller skala dina rektangelformer med hjälp av rotation och skala egenskaper respektive. Rotationen anges som ett slätt tal men tillämpas i grader. Du har möjlighet att skala en rektangel på antingen x- eller y-axeln självständigt med hjälp av scaleX och scaleY egenskaper.
Här är ett exempel som drar olika rektanglar på en duk med alla de egenskaper som vi just diskuterat.
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: 10, y: 10, bredd: 200, höjd: 50, fyll: "gul", slag: "svart"); var rectB = ny Konva.Rect (x: 160, y: 30, bredd: 80, höjd: 250, fyll: "orange", slag: "svart"); var rectC = ny Konva.Rect (x: 200, y: 160, bredd: 180, höjd: 180, hörnRadius: 10, strokeVidth: 10, opacitet: 0,8, fyll: "röd", stroke: "svart") ; var rectD = ny Konva.Rect (x: 400, y: 20, bredd: 180, höjd: 180, skalaX: 1,8, skalaY: 0.75, rotation: 45, fyll: "ljusgrön", stroke: "svart") ; skiktA.add (rectA, rectB, rectC, rectD); stage.add (layerA);
Du bör notera att rektanglarna är inte ritad i den ordning i vilken de skapas. I stället dras de i den ordning i vilken de lagts till lagret. De fylla och stroke Egenskaper används för att ställa in fyllnings- respektive slagfärgen.
Du kan skapa cirklar i Konva med hjälp av Konva.circle () objekt. Den här gången, den x och y egenskaper bestämmer mittpunkten för att rita cirkeln. Du kan fortfarande ange ett värde för både bredden och höjden. Dessa värden används för att beräkna diametern på cirkeln som ska ritas. En cirkel har dock samma bredd och höjd. Detta innebär att det angivna värdet senare har företräde framför den som angivits tidigare i händelse av konflikt. Med andra ord, om du ställer in bredd av en cirkel till 100 och senare sätta sin höjd till 180, kommer cirkeln att ha en diameter av 180 och bredden kommer att ignoreras.
För att undvika förvirring kan du utelämna bredd och höjd egenskaper och ange ett värde för radie av cirkeln. Tänk på att du måste ställa in radie till 50 för att rita en cirkel vars bredd och höjd är 100.
På ett liknande sätt kan du också skapa en ellips med hjälp av Konva.ellipse () objekt. Den enda skillnaden är att radienegenskapen nu ska acceptera ett objekt med x och y egenskaper som dess värde. Om det specificeras kommer bredden och höjden nu att appliceras oberoende för att bestämma ellipsens slutliga form.
var canvasWidth = 600; var canvasHeight = 400; var stadium = ny Konva.Stage (container: "example", bredd: canvasWidth, height: canvasHeight); var layerA = nytt Konva.Layer (); var circA = ny Konva.Circle (x: 100, y: 100, bredd: 180, fyll: "gul", slag: "svart"); var cirB = ny Konva.Circle (x: 180, y: 150, höjd: 100, fyll: "orange", slag: "svart"); var cirC = ny Konva.Circle (x: 200, y: 275, radie: 100, opacitet: 0,5, fyll: "röd", stroke: "svart"); var ellipA = ny Konva.Ellipse (x: 400, y: 75, bredd: 70, höjd: 100, rotation: -15, fyll: "ljusgrön", stroke: "svart"); var ellipB = ny Konva.Ellipse (x: 400, y: 75, bredd: 80, höjd: 120, rotation: -15, stroke Bredd: 5, fyll: "vit", slag: "svart"); var ellipC = ny Konva.Ellipse (x: 450, y: 275, radie: x: 100, y: 50, skala Y: 2, fyll: "violett", stroke: "svart"); lagerA.add (circA, circB, circC, ellipB, ellipA, ellipC); stage.add (layerA);
Du bör notera det ellipB har större höjd och bredd jämfört med ellipA. Eftersom de båda har samma x och y värden, jag var tvungen att lägga till ellipB till lagret först för att behålla ellipA synlig. Om ellipB tillsattes efter ellipA, det skulle ha dras över ellipA, gömmer det från tittarna.
Om du observerar noggrant ser du också att den violetta cirkeln faktiskt är en ellips med y radie inställd till 50 och x radie inställd på 100. Den har emellertid minskats med en faktor 2 i y-riktningen. Skalningen ökar också strokebredden, vilket gör den två gånger bredare på toppen och botten av ellipsen jämfört med dess vänstra och högra kanter.
Du kan använda Konva.Line () objekt för att skapa olika typer av linjer och kurvor. Alla linjer kräver att du anger de punkter genom vilka linjen ska passera med poäng fast egendom. Punkterna anges som en grupp.
Du kan ansluta till en uppsättning poäng som ges med hjälp av poäng array för att bilda en polygon genom att ställa in värdet av stängd tillskriva Sann. På samma sätt kan du konvertera en uppsättning raka linjer till splines genom att ange ett värde för spänning attribut. Ett värde på noll kommer att resultera i raka linjer. Högre värden skapar kurvor.
Det är möjligt för dig att skapa en sluten och kurvig form (en blob) genom att ange ett värde för spänning egendom samt stängning av kurvan genom inställning stängd till Sann.
Liksom resten av de former som vi har diskuterat kan du ställa in strokebredden för att dra linjerna med strokeWidth attribut. Du kan också ange a fylla färg för slutna former.
I följande exempel har jag använt samma uppsättning punkter för att plotta alla former. Men jag har också använt flytta() Metod för att flytta varje form med ett specifikt avstånd för att undvika överlappningar.
var canvasWidth = 600; var canvasHeight = 400; var stadium = ny Konva.Stage (container: "example", bredd: canvasWidth, height: canvasHeight); var layerA = nytt Konva.Layer (); var lineA = ny Konva.Line (poäng: [50, 20, 20, 100, 80, 140, 60, 80, 200, 20], stroke: "svart"); var lineB = ny Konva.Line (poäng: [50, 20, 20, 100, 80, 140, 60, 80, 200, 20] ; var lineC = ny Konva.Line (poäng: [50, 20, 20, 100, 80, 140, 60, 80, 200, 20], spänning: 0,8, slag: "blå"); var lineD = ny Konva.Line (poäng: [50, 20, 20, 100, 80, 140, 60, 80, 200, 20], spänning: 1,8, stroke: "röd"); var lineE = ny Konva.Line (poäng: [50, 20, 20, 100, 80, 140, 60, 80, 200, 20], stängd: sann, spänning: 2.2, fyll: "ljusblå" 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 (lineA, lineB, lineC, lineD, lineE); stage.add (layerA);
Du bör också notera att de röda och blåa linjerna är plottade med samma uppsättning punkter, men en annan spänning Värdet ändrar signifikant kurvens slutliga form.
Du kan noggrant välja värdet på olika punkter i poäng array för att rita regelbundna polygoner som pentagoner och hexagoner. Att skriva mer komplexa regelbundna polygoner som oktagoner med hjälp av denna metod kan vara besvärliga och felaktiga. För att undvika fel borde du använda Konva.RegularPolygon () objekt att skapa regelbundna polygoner.
De x och y Egenskaper används för att ange polygonens mittpunkt. De radie egendom används för att ange avståndet mellan polygonens mittpunkt och alla dess hörn. Du kan använda sidor egenskap för att ange antalet sidor som polygonen ska ha. Tänk på att alla sidor av en polygon som skapats med den här metoden kommer att ha lika långa längder. Du kan ändra längden på vissa sidor med hjälp av scaleX och scaleY egenskaper, men det kommer också att ändra strokebredden på den skalade sidan.
Precis som alla andra former som vi har diskuterat kan du ändra strokebredden, opaciteten och synligheten hos vanliga polygoner med hjälp av strokeWidth, opacitet, och synlighet.
var canvasWidth = 600; var canvasHeight = 400; var stadium = ny Konva.Stage (container: "example", bredd: canvasWidth, height: canvasHeight); var layerA = nytt Konva.Layer (); var triangel = ny Konva.RegularPolygon (x: 150, y: 275, sidor: 3, radie: 100, skalaJy: 1,6, stroke: "svart", fyll: "rgba (200,0,200, 1)" ; var kvadrat = ny Konva.RegularPolygon (x: 60, y: 60, sidor: 4, radie: 50, fyll: "rgba (200,0,0, 0,5)", slag: "svart"); var pentagon = ny Konva.RegularPolygon (x: 160, y: 160, sidor: 5, radien: 80, fyll: "rgba (0,200,0, 0,5)", slag: "svart"); var hexagon = ny Konva.RegularPolygon (x: 350, y: 120, sidor: 6, rad: 80, fyll: "rgba (0,0,200, 0,5)", slag: "svart"); var oktagon = ny Konva.RegularPolygon (x: 450, y: 275, sidor: 8, radie: 100, fyll: "rgba (200,200,0, 0,5)", slag: "svart"); layerA.add (triangel, fyrkant, femkant, sexkant, oktagon); stage.add (layerA);
I denna handledning har vi täckt de mest grundläggande formerna som Konva tillåter oss att dra på lerretet med lätthet. Vi lärde oss också om olika attribut som kan användas för att styra utseendet på alla dessa former. De flesta attributen är vanliga för alla former, men vissa av dem är endast tillämpliga på specifika former.
.
Accentsconagua