Share
Efter att ha läst de två första handledningarna borde du kunna skapa vägar och några grundläggande fördefinierade former. Du bör också kunna förenkla eller plana dina vägar samt dra dem på olika lager och blanda dem ihop.
Trots att vi har kommit långt, finns det fortfarande en sak saknas. Fram till denna punkt har det inte förekommit någon interaktion mellan vår duk och användaren. Det vore trevligt om vi kunde ge användarna möjlighet att interagera med olika vägar eller rita något på egen hand. Denna handledning kommer att täcka alla grunderna för användarinteraktion, från och med verktyg variabel.
Det finns en global verktyg variabel som endast existerar i skript som innehåller hanteringsfunktioner för att interagera med antingen musen eller tangentbordet. Denna variabel ger dig tillgång till egenskaper som minDistance, vilket är det minsta avståndet efter vilket musen igen kan avfyra onMouseDrag händelse, eftersom den senast blev avfyrade. På samma sätt är egendomen maxDistance kan du ange ett maximalt avstånd efter vilket onMouseDrag händelsen måste elda igen.
Paper.js har också a ToolEvent objekt. Det är en förlängning av händelseobjektet och den enda parametern som skickas till alla mushändelseshandlare. Den innehåller all relevant information om dessa mushändelser som:
Accentsconagua
typ, som berättar om händelsen är mouseup, mousedown, mouse eller mousedrag.punkt, vilket ger dig musens position när händelsen avfyrades.delta, vilket ger dig avståndet mellan aktuell och sista musposition när händelsen avfyrades.räkna, vilket ger dig det antal gånger musevenemanget avfyrades.Artikel, vilket ger dig objektet som var närvarande vid platsen för mushändelsen. Om objektet är en del av a grupp eller förening vägen då den högsta nivån på grupp eller förening sökvägen återlämnas.lastPoint, vilket ger musens position när händelsen senast slogs.downpoint, vilket ger dig musens position i projektkoordinater när den senast klickades.Middle, vilket ger dig poängen mitt i lastPoint och punkt. Du bör hålla alla dessa i åtanke eftersom de kommer att användas ofta i de flesta av dina projekt.
Paper.js har olika hanteringsfunktioner som kallas automatiskt för att hantera olika mushändelser. De tre mushanteringsfunktionerna listas nedan.
funktion onMouseDown (händelse) // Gör något console.log ('Mus pressad!'); funktion onMouseDrag (händelse) // Gör något annat console.log ('Mouse dragged!'); funktion onMouseUp (händelse) // Gör någonting console.log ('Mouse released!'); Låt oss skapa en grundläggande demo baserad på onMouseDown och onMouseUp hanterare. Varje gång en användare trycker på en musknapp skapar vi en ny Väg och markera den punkten som början av vår Väg.
Varje gång användaren släpper musknappen lägger vi till en ny punkt som slutet av vårt Väg. Detta skapar en rak linje från den punkt där musknappen pressades till den punkt där den släpptes. Här är koden:
var aPath; funktion onMouseDown (händelse) aPath = new path (); aPath.strokeColor = 'lila'; aPath.strokeWidth = event.point.x / 10; aPath.add (event.point); funktion onMouseUp (händelse) aPath.add (event.point);
Jag har också satt strokeColor till lila och strokeWidth till en tiondel av värdet av x-koordinat med användning av event.point fast egendom. Om du försöker dra några vertikala linjer i det grå området nedan kommer du att märka att alla har en bredd som är direkt proportionell mot deras avstånd från vänster sida.
Nu, låt oss skapa några cirklar med hjälp av onMouseDrag händelse. Varje gång en draghändelse avfyras kommer vi att rita en cirkel med sitt centrum i mitten av den sista och aktuella dragpunkten. Radiets radie beror direkt på användarens draghastighet.
För att hitta mitten av vår cirkel kan vi använda Middle egendom som vi diskuterade i föregående avsnitt. För att bestämma cirkelns radie kan vi använda delta egendom och dela resultatet med 2. Här är koden som vi behöver:
tool.maxDistance = 50; tool.minDistance = 4; funktion onMouseDrag (händelse) var circle = new Path.Circle (center: event.middlePoint, radie: event.delta.length / 2); circle.fillColor = 'pink'; circle.strokeColor = 'black';
Om användaren skulle dra musen för snabbt eller för långsamt skulle cirklarna bli för stora eller för små.
Problemet kan lösas med hjälp av maxDistance och minDistance egenskaper. Om användaren drar för snabbt, kommer maxDistance egenskapen kommer att skjuta dra händelsen varje 50 pixlar. Om användarens draghastighet är för långsam, minDistance egendom kommer inte att sparkas till dess att den minsta distansgränsen som vi har angivit har uppnåtts. Du kan testa koden ovan genom att dra musen i det grå området nedan:
De händelse Objektet har tre egenskaper som du kan använda för dina interaktioner med tangentbordet. De event.key egenskapen kommer att berätta vilken tangent som trycktes och event.character egenskapen kommer att berätta för tecknet som skapades på nyckelpress. För att avgöra om det var a keyUp eller nyckel ner händelse kan du använda event typ fast egendom.
Låt oss använda dessa egenskaper tillsammans för att skapa små cirklar och flytta runt dem. Ta en titt på koden nedan:
var steg = 10; var centerPoint = ny punkt (100, 100); funktion onKeyDown (händelse) var circle = new Path.Circle (centerPoint, 3); circle.fillColor = 'pink'; circle.strokeColor = 'black'; om (event.key == 'a') centerPoint - = ny punkt (steg, 0); // Kod för andra knappar
Vi skapar en variabel steg som kommer att användas för att bestämma hur mycket cirkeln rör sig runt. Variabeln mittpunkt lagrar platsen för mitten av våra cirklar. De onKeyDown handler har koden för att hantera allt nyckel ner evenemang. Denna händelse avfyras kontinuerligt så länge som en tangent trycks in.
Detta är anledningen till att nya cirklar skapas kontinuerligt. Baserat på nyckeln trycker vi på värdet av mittpunkt för att flytta vår nyskapade cirkel till en annan plats. Du kan se koden i aktion i demo nedan:
Några nycklar, till exempel Flytta nyckel och Alternativ nyckeln, skapar inte direkt ett tecken när det trycks in. Dessa tangenter kallas modifieringsnycklar. De händelse objektet har en event.modifiers egenskap som du kan använda för att bestämma modifieringsnyckeln som trycktes. Tänk på koden nedan:
var väg; funktion onMouseDown (händelse) path = new path (); path.strokeColor = 'black'; path.strokeWidth = 2; path.add (event.point); funktion onMouseDrag (händelse) if (event.modifiers.shift) path.lastSegment.point = event.point; path.simplify (); annars path.add (event.point);
När en användare trycker på en musknapp, onMouseDown handler skapar en ny sökväg och lägger till en punkt på den. När du börjar dra, onMouseDrag handler lägger till en ny punkt på det vid varje draghändelse.
Om du drar musen med Flytta tangenttryckt, hanteraren upptäcker den med event.modifiers.shift fast egendom. I så fall ställer det i stället för att lägga till en ny punkt på varje draghändelse, justerar koordinaterna för det sista segmentet till den aktuella platsen för muspekaren. Det förenklar också den fullständiga vägen som ritades. Du kan dra musen i det grå området nedan för att se hur vägen beter sig när Flytta tangenten trycks in.
Om Shift-tangenten inte verkar fungera, beror det troligen på att duken inte har fokus. I det fallet bör du först klicka inuti det lilla vita utrymmet under duken för att ge det fokus.
Den händelsehanterare som vi diskuterade idag täcker de vanligaste interaktivitetsscenarierna. Såsom framgår av handledningen är det inte svårt att manipulera objekten i en duk baserat på användarens handlingar. Det bästa sättet att lära sig är att öva. Så jag skulle vilja föreslå att du skapar egna demo som kombinerar allt som du har lärt dig i de tre handledningarna fram till den här punkten.
Om du har några frågor angående denna handledning, vänligen meddela mig det i kommentarerna.
