Share
Het HTML5-canvas wordt al heel lang door alle populaire browsers ondersteund. U kunt het gebruiken voor het tekenen van afbeeldingen in een browser met behulp van JavaScript. De afbeeldingen die op een canvas kunnen worden gemaakt, variëren van eenvoudige lijnen en vormen tot fotosamenstellingen en animaties.
In deze serie leer je over een zeer nuttige canvasbibliotheek, Konva genaamd. Je kunt Konva gebruiken om verschillende vormen op het canvas of op het podium te tekenen. In de bibliotheek kunt u onder andere al deze vormen schalen, roteren en animeren en gebeurtenislisteners eraan koppelen.
Deze tutorial zal zich concentreren op de fundamentele concepten van de bibliotheek en tegelijkertijd een kort overzicht bieden van de verschillende functies van de bibliotheek. Daarna gaan we later verder met meer specifieke en complexe onderwerpen. De bibliotheek is ontstaan als een vork van de populaire KineticJS-bibliotheek.
Alles wat u tekent met Konva vereist dat u een fase creëert met Konva.Stage. U kunt het containerelement van een fase opgeven met behulp van de houder attribuut. Elke fase vereist ook een waarde voor de breedte en de hoogte die kan worden opgegeven met behulp van de breedte en hoogte attributen respectievelijk.
Een enkele fase kan meerdere lagen bevatten. Elk van deze lagen heeft er twee renderers. De scènedefinator wordt gebruikt om alle vormen te tekenen die voor u zichtbaar zijn op het werkgebied. De hit graph-renderer is verborgen voor de gebruikers. Het wordt gebruikt voor het uitvoeren van hoogwaardige gebeurtenisdetectie.
Een enkele laag kan meerdere vormen, groepen van verschillende vormen of een groep groepen bevatten. De fase, lagen, groepen en vormen fungeren als virtuele knooppunten die individueel kunnen worden gestyled en getransformeerd.
Voordat we vormen maken, moeten we de bibliotheek opnemen in uw project. Er zijn meerdere manieren om dit te doen. Als u pakketbeheerders gebruikt, kunt u de volgende opdrachten uitvoeren.
npm install konva // OF prieel installeer konva
U kunt ook rechtstreeks linken naar een verkleinde versie van de bibliotheek die wordt gehost op cdnjs en jsDelivr.
Nadat u de bibliotheek hebt geïnstalleerd, kunt u de volgende code gebruiken om rechthoekige vormen op het canvas te maken.
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: 75, y: 150, width: 200, height: 50, rotation: 45, fill: "blue", stroke: "black", strokeWidth: 4); var rectB = nieuwe Konva.Rect (x: 350, y: 50, width: 100, height: 250, cornerRadius: 50, fill: "red", stroke: "brown", strokeWidth: 10); layerA.add (recta); layerA.add (rectB); stage.add (layerA);
Alles op het canvas tekenen is een proces in vijf stappen. Eerst moet je een stadium instantiëren waarop verschillende vormen kunnen worden getekend met Konva.Stage. Dit vereist dat u de breedte en hoogte van de stage specificeert, evenals de ID kaart voor het containerelement dat de stage zou bevatten. In ons geval worden de rechthoeken binnenin getekend div wiens ID kaart is voorbeeld.
In de volgende stap moet je alle lagen die je op je podium wilt renderen instantiëren. We maken in dit voorbeeld slechts één laag, maar u kunt meerdere lagen maken en ze allemaal aan één fase toevoegen. Verschillende lagen kunnen erg handig zijn als uw achtergrond zowel uit statische als uit bewegende elementen bestaat. In dergelijke gevallen kunt u de statische elementen op de ene laag en de bewegende elementen aan de andere toevoegen. Aangezien u de statische achtergrond na elke nieuwe trekking niet hoeft bij te werken, kan dit de prestaties drastisch verbeteren.
Nadat u de lagen hebt gemaakt, kunt u verschillende vormen initialiseren, zoals rechthoeken, ellipsen, sterren en ringen die u op de lagen wilt weergeven. Ten slotte moet je de vormen toevoegen aan de lagen en de lagen aan het podium.
Het is een goed idee om verschillende vormen samen te groeperen als u alle vormen als één geheel wilt beheren. Stel dat u een auto hebt gemaakt met twee cirkels voor wielen en twee rechthoekige blokken voor het lichaam. Als je deze auto vooruit wilt brengen zonder een groep te maken, moet je alle vormen afzonderlijk per stuk vertalen. Een efficiëntere methode is om de cirkels en de rechthoeken toe te voegen aan een groep en ze allemaal tegelijk te vertalen.
Als u een vorm aan een groep wilt toevoegen, moet u de toevoegen() methode, net als bij het toevoegen van vormen aan een laag. U kunt ook een groep aan een andere groep toevoegen om meer complexe entiteiten te maken. U kunt bijvoorbeeld een persoon in de auto als één groep maken en die persoon toevoegen aan de groep die de auto vertegenwoordigt.
In het volgende voorbeeld heb ik dingen eenvoudig gehouden en alleen een gemaakt cara groep. Daarna kan ik de hele auto in één keer draaien en schalen.
var canvasWidth = 600; var canvasHeight = 400; var stage = new Konva.Stage (container: "example", width: canvasWidth, height: canvasHeight); var layerA = nieuwe Konva.Layer (); var wheelA = nieuwe Konva.Ring (x: 130, y: 230, innerRadius: 5, outerRadius: 30, fill: "grey", stroke: "black", name: "First Wheel"); var wheelB = new Konva.Ring (x: 270, y: 230, innerRadius: 5, outerRadius: 30, fill: "grey", stroke: "black", name: "Second Wheel"); var frameA = nieuwe Konva.Rect (x: 80, y: 150, width: 240, height: 60, cornerRadius: 10, fill: "red", stroke: "black", name: "Bottom Frame"); var frameB = nieuwe Konva.Rect (x: 135, y: 90, width: 120, height: 60, cornerRadius: 10, fill: "orange", stroke: "black", name: "Topframe"); var carA = nieuwe Konva.Group (x: 50, y: 0, rotation: 20, scaleX: 1.2); carA.add (wheelA, wheelB, frameA, frameB); layerA.add (CARA); stage.add (layerA);
Je weet al van lagen in Konva. Gelaagdheid is iets anders. Standaard worden alle vormen die u toevoegt aan een laag getekend in de volgorde waarin ze zijn toegevoegd. Dit betekent dat vormen die aan een laag worden toegevoegd nadat alle andere op andere vormen zijn getekend.
Met Konva kun je de volgorde bepalen waarin de vormen worden getekend met behulp van verschillende layering-methoden zoals moveToTop (), moveToBottom (), moveUp (), Naar beneden verplaatsen(), en zIndex ().
De moveToTop () methode trekt de gegeven vorm over alle andere vormen die aan dezelfde laag zijn toegevoegd. Vormen getekend op een laag die is toegevoegd aan de Konva-fase na de laag van onze specifieke vorm blijft nog steeds boven onze vorm. Daarom blijft de indigocirkel in het volgende voorbeeld onder de lichtgroene cirkel, zelfs na het bellen moveToTop ().
De moveToBottom () methode trekt de gegeven vorm onder alle andere vormen die aan dezelfde laag zijn toegevoegd. Net als moveToTop (), de vormen verplaatsen zich naar de bodem van hun eigen lagen en niet naar de lagen eronder.
De moveUp () en Naar beneden verplaatsen() methoden verplaatsen de vorm waarop ze worden genoemd, één positie boven of onder hun huidige positie in dezelfde laag. De zIndex () methode wordt gebruikt om de index van een vorm in de bovenliggende laag in te stellen. In tegenstelling tot CSS, kunt u geen willekeurige instellen zIndex waarde in Konva. Voor een laag met 10 vormen, de zIndex waarde kan alleen tussen 0 en 9 (inclusief) zijn.
In het bovenstaande voorbeeld kun je zien dat door op de knop "Indigo Top" te drukken, de indigocirkel niet boven alle andere wordt getrokken, terwijl het indrukken van "Indigo Above All Others" bovenaan staat. Dit komt omdat de laatste knop ook de laag met de indigocirkel naar boven verplaatst.
Omdat de cirkels kunnen worden rondgesleept, kan het een goed idee zijn om ze over elkaar te slepen en te zien hoe de positie van de indigocirkel verandert wanneer u op verschillende knoppen drukt.
We hebben enkele basisbegrippen met betrekking tot Konva besproken in deze zelfstudie. Je zou nu een aantal veel voorkomende vormen op het canvas kunnen tekenen en ze als een groep kunnen verplaatsen. De tutorial liet je ook zien hoe je een bepaalde vorm omhoog of omlaag kunt duwen in geval van overlapping.
JavaScript is een van de de facto talen geworden om op het web te werken. Het is niet zonder zijn leercurven, en er zijn ook genoeg kaders en bibliotheken om je bezig te houden. Als u op zoek bent naar extra middelen om te studeren of om te gebruiken in uw werk, kijk dan wat we op Envato Market beschikbaar hebben.
Als je vragen hebt over deze tutorial, laat het me dan gerust weten in de comments. In de volgende zelfstudie leert u hoe u basisvormen tekent in Konva.
Accentsconagua