Share
După ce ați citit primele două tutoriale, ar trebui să puteți crea căi și câteva forme predefinite de bază. De asemenea, ar trebui să vă puteți simplifica sau aplatiza căile, precum și să le atrageți pe diferite straturi și să le îmbinați împreună.
Chiar dacă am parcurs un drum lung, mai lipsește un lucru. Până în acest moment, nu a existat nici o interacțiune între pânza noastră și utilizatorul. Ar fi frumos dacă am putea oferi utilizatorilor posibilitatea de a interacționa cu diferite căi sau de a atrage ceva de unul singur. Acest tutorial va acoperi toate elementele de bază ale interacțiunii utilizatorilor, începând cu instrument variabil.
Există un nivel global instrument care există numai în scripturi care conțin funcții de manipulare pentru a interacționa fie cu mouse-ul, fie cu tastatura. Această variabilă vă oferă acces la proprietăți precum minDistance, care este distanța minimă după care șoarecele poate declanșa din nou onMouseDrag eveniment, deoarece a fost concediat ultima dată. În mod similar, proprietatea maxDistance vă permite să specificați o distanță maximă după care onMouseDrag evenimentul trebuie să tragă din nou.
Paper.js are de asemenea a ToolEvent obiect. Este o extensie a obiectului de eveniment și singurul parametru care este transmis la toate serverele de evenimente ale mouse-ului. Acesta conține toate informațiile relevante despre aceste evenimente ale mouse-ului, cum ar fi:
Accentsconagua
tip, care vă spune dacă evenimentul este MouseUp, mousedown, mousemove sau mousedrag.punct, care vă oferă poziția mouse-ului când evenimentul a fost dat afară.deltă, care vă oferă distanța dintre poziția actuală și ultima a mouse-ului când a fost declanșat evenimentul.numara, care vă oferă numărul de descărcări ale evenimentului mouse-ului.articol, care vă oferă elementul care a fost prezent la locul evenimentului mouse-ului. Dacă elementul face parte dintr-un grup sau compus cale, apoi nivelul cel mai de sus al grup sau compus calea este returnată.LASTPOINT, care dă poziția mouse-ului când evenimentul a fost concediat ultima dată.downPoint, care vă oferă poziția mouse-ului în coordonatele proiectului atunci când a fost ultima dată clicată.middlePoint, care vă oferă punctul în mijlocul LASTPOINT și punct. Ar trebui să țineți cont de toate acestea, deoarece acestea vor fi utilizate frecvent în majoritatea proiectelor dvs..
Paper.js are diferite funcții de manipulare care sunt numite automat pentru a face față diferitelor evenimente ale mouse-ului. Cele trei funcții de manipulare a mouse-ului sunt enumerate mai jos.
function onMouseDown (eveniment) // Face ceva console.log ('Mouse pressed!'); funcția onMouseDrag (eveniment) // Efectuați altceva console.log ('Mouse dragged!'); funcția onMouseUp (eveniment) // Efectuați orice console.log ('Mouse released!'); Să creați un demo de bază bazat pe onmousedown și onmouseup stivuitoare. De fiecare dată când un utilizator apasă un buton al mouse-ului, vom crea un nou cale și marcați acest punct ca fiind începutul nostru cale.
De fiecare dată când utilizatorul eliberează butonul mouse-ului, vom adăuga un punct nou ca sfârșitul lui cale. Aceasta va crea o linie dreaptă din punctul în care a fost apăsat butonul mouse-ului până în punctul în care a fost eliberat. Iată codul:
var aPath; funcția onMouseDown (eveniment) aPath = cale nouă (); aPath.strokeColor = 'violet'; aPath.strokeWidth = event.point.x / 10; aPath.add (event.point); funcția onMouseUp (eveniment) aPath.add (event.point);
De asemenea, am setat strokeColor la violet și strokeWidth la o zecime din valoarea coordonatei x folosind event.point proprietate. Dacă încercați să desenați niște linii verticale în zona gri, de mai jos, veți observa că toate au o lățime direct proporțională cu distanța față de partea stângă.
Acum, să creăm câteva cercuri utilizând onMouseDrag eveniment. De fiecare dată când se declanșează un eveniment de tragere, vom desena un cerc cu centrul în punctul de mijloc al ultimului punct de tracțiune curent. Raza cercului va depinde direct de viteza de tragere a utilizatorului.
Pentru a localiza centrul cercului nostru, putem folosi middlePoint proprietate pe care am discutat-o în secțiunea anterioară. Pentru a determina raza cercului, putem folosi deltă proprietatea și împărțiți rezultatul cu 2. Aici este codul de care avem nevoie:
tool.maxDistance = 50; tool.minDistance = 4; funcția onMouseDrag (eveniment) var circle = calea Cercului nou (center: event.middlePoint, rază: event.delta.length / 2); circle.fillColor = "roz"; circle.strokeColor = 'negru';
Dacă utilizatorul trebuia să tragă mouse-ul prea repede sau prea încet, cercurile ar deveni prea mari sau prea mici.
Această problemă poate fi rezolvată prin utilizarea funcției maxDistance și minDistance proprietăți. Dacă utilizatorul trage prea repede, maxDistance proprietatea va trage evenimentul de tragere la fiecare 50 de pixeli. Dacă viteza de tragere a utilizatorului este prea lentă, minDistance proprietatea nu va fi declanșată până când nu a fost atins pragul de distanță minim pe care l-am specificat. Puteți testa codul de mai sus prin glisarea mouse-ului în zona gri mai jos:
eveniment Obiectul are trei proprietăți pe care le puteți utiliza pentru interacțiunile cu tastatura. event.key proprietatea vă va spune ce cheie a fost apăsată și event.character proprietate vă va spune caracterul care a fost generat la apăsarea de taste. Pentru a determina dacă a fost a keyup sau Tasta în jos eveniment, puteți utiliza tip de eveniment proprietate.
Să folosim împreună aceste proprietăți pentru a crea cercuri mici și a le muta în jurul lor. Uitați-vă la codul de mai jos:
var pas = 10; var centerPoint = punct nou (100, 100); funcția onKeyDown (eveniment) var circle = calea nouă Cerc (centerPoint, 3); circle.fillColor = "roz"; circle.strokeColor = 'negru'; dacă (event.key == 'a') centerPoint - = punct nou (pas, 0); // Cod pentru alte chei
Creăm o variabilă Etapa care va fi folosit pentru a determina viteza cu care se deplasează cercul nostru. Variabila punctul central stochează locația centrului cercurilor noastre. onkeydown handler are codul pentru a manipula toate Tasta în jos evenimente. Acest eveniment este declanșat continuu atâta timp cât este apăsată o tastă.
Acesta este motivul pentru care cercurile noi sunt create în mod continuu. În funcție de tasta apăsată, schimbăm valoarea punctul central pentru a muta cercul nou creat într-o altă locație. Puteți vedea codul în acțiune în demo-ul de mai jos:
Unele taste, de exemplu Schimb cheie și Opțiune , nu produceți direct un caracter atunci când este apăsat. Aceste chei sunt numite chei de modificare. eveniment obiect are un event.modifiers proprietate pe care o puteți utiliza pentru a determina cheia de modificator care a fost apăsată. Luați în considerare codul de mai jos:
cale var; funcția onMouseDown (eveniment) path = new Path (); path.strokeColor = 'negru'; path.strokeWidth = 2; path.add (event.point); funcția onMouseDrag (eveniment) if (event.modifiers.shift) path.lastSegment.point = event.point; path.simplify (); altceva path.add (event.point);
Ori de câte ori un utilizator apasă un buton al mouse - ului, onmousedown handler creează o nouă cale și adaugă un punct la ea. După ce începeți să trageți, onMouseDrag handler adaugă un punct nou la acesta la fiecare eveniment de tragere.
Dacă trageți mouse-ul cu Schimb apăsat pe tasta, dispozitivul de tratare îl detectează cu event.modifiers.shift proprietate. În acest caz, în loc să adăugați un nou punct la fiecare eveniment de tragere, acesta stabilește doar coordonatele ultimului segment în locația curentă a indicatorului mouse-ului. De asemenea, simplifică calea completă care a fost trasă. Puteți glisa mouse-ul în zona gri mai jos pentru a vedea cum se comportă calea atunci când Schimb este apăsată tasta.
Dacă tasta Shift nu pare să funcționeze, probabil că panza nu are focalizare. În acest caz, trebuie să faceți clic mai întâi în interiorul micului spațiu alb sub pânză pentru a-i acorda atenție.
Operatorii de evenimente pe care le-am discutat astăzi acoperă cele mai comune scenarii de interactivitate. După cum reiese din tutorial, nu este greu să manipulezi elementele dintr-o pânză pe baza acțiunilor unui utilizator. Cel mai bun mod de a învăța este prin practicare. Deci, aș dori să vă sugerez să creați propriile dvs. demo-uri combinând tot ceea ce ați învățat în cele trei tutoriale până la acest punct.
Dacă aveți întrebări cu privire la acest tutorial, vă rugăm să ne anunțați în comentarii.
