Share
De introductietraining van de serie heeft je geleerd hoe je je eerste vorm kunt tekenen met Konva. Het legde ook uit hoe lagen en groepen in Konva werken. In de rest van de serie zullen we ons concentreren op meer specifieke onderwerpen, zoals het maken van eenvoudige en complexe vormen of het koppelen van gebeurtenislisteners aan verschillende vormen om uw afbeeldingen interactief te maken.
Deze specifieke tutorial laat je zien hoe je basisvormen zoals rechthoeken, cirkels en ellipsen in Konva kunt maken. Je leert ook over verschillende attributen die kunnen worden gebruikt om het uiterlijk van al deze vormen aan te passen op basis van je behoeften. Latere delen van de tutorial zullen bespreken hoe je verschillende soorten lijnen en reguliere polygonen kunt tekenen met behulp van Konva.
U kunt rechthoeken in Konva maken met behulp van de Konva.rect () voorwerp. De positie van de linkerbovenhoek van een rechthoek kan worden opgegeven met behulp van de X en Y eigenschappen. Op dezelfde manier kunt u de breedte en hoogte van de rechthoek opgeven met behulp van de breedte en hoogte eigenschappen. Alle rechthoeken die u tekent, hebben standaard scherpe hoeken. U kunt ze echter rond maken door een geschikte waarde te kiezen voor de hoekradius eigendom.
Het is mogelijk om een rechthoek te tonen of te verbergen met behulp van de zichtbaar eigendom. Als u een rechthoek niet volledig wilt verbergen maar toch semi-transparant wilt maken, kunt u de ondoorzichtigheid eigendom. U kunt dit instellen op elk getal tussen 0 en 1. De vorm zal niet zichtbaar zijn als de dekking op 0 staat.
U kunt ook uw rechthoekige vormen roteren of schalen met behulp van de omwenteling en schaal eigenschappen respectievelijk. De rotatie wordt opgegeven als een gewoon getal maar wordt in graden toegepast. U hebt de mogelijkheid om elke rechthoek op de x- of y-as onafhankelijk te schalen met behulp van de scaleX en scaleY eigenschappen.
Hier is een voorbeeld dat verschillende rechthoeken tekent op een canvas met alle eigenschappen die we net hebben besproken.
var canvasWidth = 600; var canvasHeight = 400; var stage = new Konva.Stage (container: "example", width: canvasWidth, height: canvasHeight); var layerA = nieuwe Konva.Layer (); var rectA = nieuwe Konva.Rect (x: 10, y: 10, width: 200, height: 50, fill: "yellow", stroke: "black"); var rectB = nieuwe Konva.Rect (x: 160, y: 30, width: 80, height: 250, fill: "orange", stroke: "black"); var rectC = nieuwe Konva.Rect (x: 200, y: 160, width: 180, height: 180, cornerRadius: 10, strokeWidth: 10, opacity: 0.8, fill: "red", stroke: "black") ; var rectD = nieuwe Konva.Rect (x: 400, y: 20, width: 180, height: 180, scaleX: 1.8, scaleY: 0.75, rotation: 45, fill: "lightgreen", stroke: "black") ; layerA.add (rectA, rectB, rectC, rectD); stage.add (layerA);
Merk op dat de rechthoeken zijn niet getekend in de volgorde waarin ze zijn gemaakt. In plaats daarvan worden ze getekend in de volgorde waarin ze aan de laag zijn toegevoegd. De vullen en beroerte eigenschappen worden gebruikt om respectievelijk de vul- en lijnkleur in te stellen.
U kunt cirkels in Konva maken met behulp van de Konva.circle () voorwerp. Deze keer is de X en Y eigenschappen bepalen het middelpunt voor het tekenen van de cirkel. U kunt nog steeds een waarde opgeven voor zowel de eigenschappen width en height. Deze waarden worden gebruikt om de diameter van de te tekenen cirkel te berekenen. Een cirkel heeft echter dezelfde breedte en hoogte. Dit betekent dat de later gespecificeerde waarde voorrang heeft op de waarde die eerder is opgegeven in geval van een conflict. Met andere woorden, als u de breedte van een cirkel tot 100 en later stel zijn hoogte tot 180, heeft de cirkel een diameter van 180 en wordt de breedte genegeerd.
Om verwarring te voorkomen, kunt u de breedte en hoogte eigenschappen en geef een waarde op voor de radius van de cirkel. Houd er rekening mee dat u de straal op 50 moet instellen om een cirkel te tekenen waarvan de breedte en hoogte 100 is.
Op dezelfde manier kunt u ook een ellips maken met behulp van de Konva.ellipse () voorwerp. Het enige verschil is dat de eigenschap radius nu een object accepteert met de eigenschappen x en y als waarde. Indien opgegeven, wordt de eigenschap width en height nu onafhankelijk toegepast om de uiteindelijke vorm van de ellips te bepalen.
var canvasWidth = 600; var canvasHeight = 400; var stage = new Konva.Stage (container: "example", width: canvasWidth, height: canvasHeight); var layerA = nieuwe Konva.Layer (); var circA = nieuwe Konva.Circle (x: 100, y: 100, width: 180, fill: "yellow", stroke: "black"); var circB = nieuwe Konva.Circle (x: 180, y: 150, height: 100, fill: "orange", stroke: "black"); var circC = nieuwe Konva.Circle (x: 200, y: 275, radius: 100, opacity: 0.5, fill: "red", stroke: "black"); var ellipA = nieuwe Konva.Ellipse (x: 400, y: 75, width: 70, height: 100, rotation: -15, fill: "lightgreen", stroke: "black"); var ellipB = nieuwe Konva.Ellipse (x: 400, y: 75, width: 80, height: 120, rotation: -15, strokeWidth: 5, fill: "white", stroke: "black"); var ellipC = nieuwe Konva.Ellipse (x: 450, y: 275, radius: x: 100, y: 50, scaleY: 2, fill: "violet", stroke: "black"); layerA.add (circA, circB, circC, ellipB, ellipA, ellipC); stage.add (layerA);
Dat zou je moeten opmerken ellipB heeft grotere hoogte en breedte in vergelijking met ellipA. Omdat ze allebei hetzelfde hebben X en Y waarden, ik moest toevoegen ellipB naar de laag als eerste om te houden ellipA zichtbaar. Als ellipB is toegevoegd na ellipA, het zou zijn getrokken ellipA, het verbergen van de kijkers.
Als je goed observeert, zie je ook dat de paarse cirkel eigenlijk een ellips is met Y radius ingesteld op 50 en X radius ingesteld op 100. Het is echter in de y-richting met een factor 2 geschaald. De schaalvergroting vergroot ook de streekbreedte, waardoor deze aan de boven- en onderzijde van de ellips twee keer breder is in vergelijking met de linker- en rechterrand ervan.
U kunt de Konva.Line () object om verschillende soorten lijnen en curven te maken. Voor alle regels moet u opgeven met welke punten de lijn moet worden doorgegeven met behulp van de points eigendom. De punten worden opgegeven als een array.
U kunt deelnemen aan elke verzameling punten die wordt aangeboden met behulp van de points array om een polygoon te vormen door de waarde van de Gesloten attribuut aan waar. Op dezelfde manier kunt u een reeks rechte lijnen omzetten in splines door een waarde in te stellen voor de spanning attribuut. Een waarde van nul resulteert in rechte lijnen. Hogere waarden maken gekromde lijnen.
Het is mogelijk voor u om een gesloten en ronde vorm (een blob) te creëren door een waarde in te stellen voor de spanning eigenschap en sluit de curve door in te stellen Gesloten naar waar.
Net als de rest van de vormen die we hebben besproken, kunt u de streekbreedte instellen voor het tekenen van de lijnen met behulp van de streekbreedte attribuut. U kunt ook een opgeven vullen kleur voor gesloten vormen.
In het volgende voorbeeld heb ik dezelfde set punten gebruikt om alle vormen te plotten. Ik heb echter ook het bewegen () methode om elke vorm over een bepaalde afstand te verschuiven om overlappingen te voorkomen.
var canvasWidth = 600; var canvasHeight = 400; var stage = new Konva.Stage (container: "example", width: canvasWidth, height: canvasHeight); var layerA = nieuwe Konva.Layer (); var lineA = nieuwe Konva.Line (points: [50, 20, 20, 100, 80, 140, 60, 80, 200, 20], stroke: "black"); var lineB = nieuwe Konva.Line (punten: [50, 20, 20, 100, 80, 140, 60, 80, 200, 20], gesloten: true, fill: "yellow", stroke: "black") ; var lineC = nieuwe Konva.Line (punten: [50, 20, 20, 100, 80, 140, 60, 80, 200, 20], spanning: 0.8, streek: "blauw"); var lineD = nieuwe Konva.Line (punten: [50, 20, 20, 100, 80, 140, 60, 80, 200, 20], spanning: 1.8, lijn: "rood"); var lineE = nieuwe Konva.Line (punten: [50, 20, 20, 100, 80, 140, 60, 80, 200, 20], gesloten: true, spanning: 2.2, opvulling: "lightblue", lijn: " zwart "); 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);
Je moet ook opmerken dat de rode en blauwe lijnen zijn uitgezet met dezelfde reeks punten, maar een andere spanning waarde verandert de uiteindelijke vorm van de curve aanzienlijk.
U kunt zorgvuldig de waarde van verschillende punten in de points array om regelmatige veelhoeken te tekenen, zoals vijfhoeken en zeshoeken. Complexere regelmatige polygonen zoals achthoeken tekenen met deze methode kan omslachtig en foutgevoelig zijn. Om fouten te voorkomen, moet u de Konva.RegularPolygon () object om regelmatige polygonen te maken.
De X en Y eigenschappen worden gebruikt om het midden van de polygoon te specificeren. De radius eigenschap wordt gebruikt om de afstand op te geven tussen het middelpunt van de veelhoek en alle hoekpunten. U kunt de zijden eigenschap om het aantal zijden te specificeren dat de polygoon zou moeten hebben. Houd er rekening mee dat alle zijden van een polygoon die met deze methode is gemaakt even lang zijn. U kunt de lengte van sommige kanten wijzigen met behulp van de scaleX en scaleY eigenschappen, maar ook de streekbreedte van de geschaalde zijde.
Net als alle andere vormen die we hebben besproken, kunt u de streekbreedte, -dekking en -zichtbaarheid van reguliere polygonen gebruiken streekbreedte, ondoorzichtigheid, en zichtbaarheid.
var canvasWidth = 600; var canvasHeight = 400; var stage = new Konva.Stage (container: "example", width: canvasWidth, height: canvasHeight); var layerA = nieuwe Konva.Layer (); var triangle = new Konva.RegularPolygon (x: 150, y: 275, sides: 3, radius: 100, scaleY: 1.6, stroke: "black", fill: "rgba (200,0.200, 1)",) ; var square = new Konva.RegularPolygon (x: 60, y: 60, sides: 4, radius: 50, fill: "rgba (200,0,0, 0,5)", stroke: "black"); var pentagon = nieuwe Konva.RegularPolygon (x: 160, y: 160, sides: 5, radius: 80, fill: "rgba (0,200,0, 0,5)", stroke: "black"); var hexagon = nieuwe Konva.RegularPolygon (x: 350, y: 120, sides: 6, radius: 80, fill: "rgba (0,0.200, 0,5)", stroke: "black"); var octagon = nieuwe Konva.RegularPolygon (x: 450, y: 275, sides: 8, radius: 100, fill: "rgba (200.200, 0.5)", stroke: "black"); layerA.add (driehoek, vierkant, vijfhoek, zeshoek, octagon); stage.add (layerA);
In deze zelfstudie hebben we de meest eenvoudige vormen behandeld die Konva ons toestaat met gemak op het canvas te tekenen. We hebben ook geleerd over verschillende attributen die kunnen worden gebruikt om het uiterlijk van al deze vormen te controleren. De meeste kenmerken zijn voor alle vormen hetzelfde, maar sommige zijn alleen van toepassing op specifieke vormen.
.
Accentsconagua