Komma igång med Paper.js Projekt och objekt

Du kanske eller kanske inte har hört talas om Paper.js. Så, låt oss börja med frågan: vad är Paper.js? Det är ett bibliotek som låter dig skapa och arbeta med vektorgrafik. Den officiella hemsidan beskriver den som den schweiziska armékniven i vektorgrafikskripting. 

Trots att biblioteket har mycket att erbjuda, är det lätt att lära sig, även om du aldrig har hört talas om det tidigare. I den här handledningen börjar jag med bibliotekets mycket grunder och fortsätter sedan till komplexa ämnen senare.

Använda PaperScript

Det finns två sätt att använda biblioteket. Du kan använda PaperScript, vilket är en förlängning av JavaScript och hjälpa till att få saker gjort lite snabbare, eller du kan bara använda vanlig gammal JavaScript.

PaperScript är bara samma gamla JavaScript som du alltid har använt. Det lägger dock till stöd för matematiska operatörer för punkt och storlek objekt. Det förenklar också installationen av händelsehanterare för Projekt, Se, och mus Verktyg objekt. 

När du fyller i PaperScript måste du använda den vanliga skripttaggen med typuppsättning till "text / papperskript". Om du laddar koden externt måste du också lägga till en 

Använda JavaScript

Om du inte är bekväm med PaperScript kan du också använda JavaScript i dina projekt. Du måste lägga till några fler rader med kod om du väljer att göra det på så vis. Det första du behöver göra är att kontrollera om DOM är redo för att du inte kommer att kunna arbeta med duken före det. Därefter kan du skapa ett projekt och en vy med hjälp av papper objekt. Alla klasserna Paper.js och objekt kommer nu att vara tillgängliga endast via papper objekt. 

Som jag påpekade tidigare måste du använda matematiska funktioner istället för operatörer när du arbetar med punkt och storlek. Koden nedan illustrerar alla dessa skillnader:

window.onload = function () var canvas = document.getElementById ('quad'); paper.setup (canvas); var sökväg = nytt papper.Path (); path.strokeColor = 'black'; var pointOne = nytt papper.Point (100, 20); var pointTwo = nytt papper.Point (-100, 100); var pointThree = new paper.Point (300, 30); path.moveTo (pointOne); path.lineTo (pointOne.add (pointTwo)); path.lineTo (pointTwo.add (pointThree)); path.lineTo (pointOne.add (pointThree)); path.closed = true; paper.view.draw (); 

Såsom framgår av kodproverna ovan är det relativt lätt att använda PaperScript när man arbetar med Paper.js. Därför kommer alla exemplen från och med nu att baseras på PaperScript.

Projekt Hierarki

Om du någonsin har använt en grafisk design applikation som Adobe Photoshop eller Illustrator, måste du vara bekant med begreppet lag. Varje skikt i dessa program har sitt eget innehåll som, i kombination med andra lager, skapar slutresultatet. Liknande lager finns också i Paper.js och kan nås med project.layers. 

Ursprungligen har varje projekt ett enda lager som är tillgängligt genom project.activeLayer. Nya objekt som du skapar läggs till i det aktuella aktiva lagret som barn. Alla barn i ett visst lager kan nås med hjälp av layer.children egenskapen hos det aktiva skiktet.

Det finns flera sätt att få tillgång till alla dessa barn. Om du bara behöver tillgång till det första och sista barnet i något objekt, kan du använda item.firstChild och item.lastChild respektive. Du kan också tilldela ett visst namn ett visst namn och sedan använda det namnet för att komma åt det senare. Låt oss säga att ett lager du jobbar med har cirka 30 barn. Det är inte praktiskt att gå över dem alla en efter en. Av detta skäl har biblioteket en layer.children.length egendom som du kan använda för att få det totala antalet barn och sedan iterera över listan med hjälp av a för slinga. 

I denna kodbit får du tillgång till olika barn som använder alla de egenskaper som vi just diskuterat:

var circleA = new path.Circle (ny punkt (45, 150), 45); var cirkelB = ny väg.cirkel (ny punkt (110, 150), 20); var circleC = ny Path.Circle (ny punkt (165, 150), 35); var circleD = ny Path.Circle (ny punkt (255, 150), 55); var circleE = ny Path.Circle (ny punkt (375, 150), 65); varcirkelF = ny väg.cirkel (ny punkt (475, 150), 35); circleC.name = 'GreenCircle'; project.activeLayer.firstChild.fillColor = 'orange'; project.activeLayer.lastChild.fillColor = 'rosa'; project.activeLayer.children [1] .fillColor = 'purple'; project.activeLayer.children ['GreenCircle']. fillColor = 'ljusgrön'; för (var i = 3; i < 5; i++)  project.activeLayer.children[i].fillColor = 'tomato'; 

Den inbäddade demo nedan visar manuset i åtgärd. Du kan verifiera att färgen på alla cirklar matchar den färg som vi tilldelade dem i koden ovan.

Du kan också använda item.parent Metod för att komma åt föräldern till ett objekt, som item.children metod som du brukade få tillgång till alla sina barn. När du skapar ett nytt objekt kommer dess förälder alltid att vara det aktuella aktiva laget av projektet. Det kan dock ändras genom att lägga till objektet som ett barn till en annan lager eller grupp. 

Innan jag går längre, låt mig förklara vad a grupp faktiskt är. För att vara ärlig, båda lager och grupp är mycket lika. En stor skillnad mellan dessa två är att alla nya objekt som du skapar läggs automatiskt till i det aktiva lagret, men när det gäller en grupp måste du själv lägga till föremålen. 

Det finns flera sätt på vilka du kan lägga till objekt i en grupp. Du kan skicka ett arrays till gruppkonstruktören och de kommer alla att läggas till i gruppens item.children array. Om du vill lägga till element i en grupp när den har skapats kan du använda item.addChild (post) fungera. Du kan också infoga ett barn i ett specifikt index med hjälp av item.insertChild (index, objekt) fungera. 

Att ta bort objekt är också lika enkelt som att lägga till dem. För att ta bort objekt från ett projekt kan du använda item.remove () fungera. Tänk på att detta inte kommer att förstöra objektet, och det kan läggas tillbaka till projektet när som helst du vill. Om objektet du tog bort hade några barn, kommer alla barn också att tas bort. Vad händer om du vill ta bort alla barn men behåll objektet intakt? Detta kan uppnås genom att använda item.removeChildren () fungera.

Förstå artiklar

Termen Artikel har dykt upp mer än några gånger i handledningen nu. Så vad är det? Allt som visas i ett Paper.js-projekt är en Artikel. Detta inkluderar skikten, banor, grupper, etc. Även om olika objekt har egenskaper som är specifika för dem, gäller andra egenskaper för dem alla.

Om du tänker dölja ett objekt från användaren kan du göra det genom att ställa in värdet item.visible till falsk. Du kan också klona något objekt med hjälp av item.clone () fungera. Den här funktionen returnerar det klonade objektet, som du kan lagra i en variabel och manipulera senare. Du kan också ändra opacitet av något objekt med hjälp av item.opacity fast egendom. Valfritt mellan 0 och 1 gör objektet genomskinligt.

Du kan också ställa in ett blandningsläge för något objekt med hjälp av item.blendMode fast egendom. Blandningsläget måste skickas som en sträng. Biblioteket ger också en item.selected egendom som, om den är inställd på Sann, skapar en visuell disposition ovanpå det elementet. Detta kan vara ganska användbart vid felsökning, eftersom det låter dig se byggandet av vägar, enskilda segmentpunkter och avgränsande lådor av objekt.

Artikeltransformationer

Objekt kan enkelt, skalas, roteras eller flyttas i ett Paper.js-projekt. I det här avsnittet kommer jag att kortfattat täcka alla dessa omvandlingar. 

För att ändra positionen för en Artikel, du kan använda dess item.position egendom och ställa in positionen till en ny punkt. Om du vill flytta ett element runt kan du göra det med hjälp av += operatör.

Du kan även skala något objekt med hjälp av item.scale (skala) fungera. Detta kommer att skala objektet runt sin mittpunkt. Du kan skala ett objekt runt en annan punkt genom att ange det som en andra parameter, som item.scale (skala, punkt). Dessutom kan biblioteket också skala upp objekt i olika vertikala och horisontella riktningar genom att skicka två siffror som parametrar, till exempel item.scale (skalaX, skalaY).

Roterande föremål liknar att skalera dem. Du kan använda item.rotate (vinkel) funktion för att rotera element runt sitt centrum. Vinkeln anges i grader och rotation sker medurs. För att rotera ett objekt runt en viss punkt kan du också skicka en punkt som en andra parameter, som item.rotate (vinkel, punkt). 

Följande kodstämpel gäller alla transformationer och manipuleringar som vi just diskuterade på tre olika rektanglar.

var rectA = ny Path.Rectangle (ny punkt (250, 70), ny storlek (120, 120)); rectA.fillColor = 'pink'; var rektB = rectA.clone (); rectB.fillColor = 'lila'; rectB.position + = ny punkt (80, 80); rectB.opacity = 0,6; rectB.blendMode = 'color-burn'; rectB.scale (1,5); rectB.rotate (45); var rectC = rectB.clone (); rectC.fillColor = 'ljusgrön'; rectC.position + = ny punkt (-180, 0); rectC.blendMode = 'color-dodge'; rectC.scale (1,5);

Koden är ganska självförklarande. Jag klonar rektangel B från rektangel A och rektangel B förvärvar alla egenskaper hos rektangel A. Detsamma gäller för rektangel B och C. 

Observera att jag har använt += operatör som jag diskuterade ovan för att flytta objekten runt. Den här operatören flyttar objekt i förhållande till sina gamla positioner istället för att använda absoluta värden.

Demon nedan visar dig det slutliga resultatet efter alla dessa omvandlingar. Du kan prova olika blandningslägen eller ändra andra egenskaper i demoen för att se hur de påverkar slutresultatet.

Slutgiltiga tankar

Som jag nämnde tidigare är Paper.js lätt att lära sig och låter dig enkelt skapa vektorgrafik. Denna handledning omfattade de grundläggande grunderna du behöver veta för att arbeta med biblioteket. Snart kommer vi att publicera nästa tutorial i serien, som kommer att diskutera vägar och geometri i detalj. 

Under tiden är det viktigt att notera att 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-marknaden.


Fram till dess föreslår jag att du skapar några grundläggande egna demos och övar vad du hittills har lärt dig. Om du har några frågor angående denna handledning, låt mig veta i kommentarerna.