Share
Dacă ați urmat această serie de la început, acum ar trebui să fiți foarte confortabil cu forme, grupuri și straturi. Ar trebui, de asemenea, să puteți desena cu ușurință câteva forme de bază și complexe pe panza utilizând Konva. Dacă intenționați să utilizați Konva pentru a crea o aplicație sau jocuri interactive, învățarea legării evenimentelor la diferite forme pe scenă este următorul pas logic.
În acest tutorial, veți învăța cum să legați evenimentele de orice formă utilizând Konva. De asemenea, veți afla despre delegarea și propagarea evenimentelor. Uneori, este posibil să aveți nevoie să controlați programatic regiunea loviturii unei forme, precum și evenimentele de incendiu. Vom discuta și aceste două subiecte.
Puteți lega evenimente diferite de orice formă creată folosind Konva cu ajutorul funcției pe() metodă. Tot ce trebuie să faceți este să treceți numele evenimentului ca primul parametru și funcția care trebuie executată atunci când evenimentul are loc ca al doilea parametru. Puteți folosi Konva pentru a detecta MouseUp, mousedown, mouseenter, mouseleave, mouse-ul peste, mousemove, clic, și dblclick. În plus, Konva vă permite să detectați roată, dragstart, dragmove, și dragend evenimente.
Iată un exemplu care detectează mousedown și mouseleave evenimente pe un poligon obișnuit (hexagon). În mod similar, cercul mai mic este legat de mouse-ul peste și MouseUp evenimente și cercul mai mare este legat de mouseenter, mouseleave, și mousemove evenimente.
Accentsconagua
var canvasWidth = 600; var canvasHeight = 400; vară etapă = nou Konva.Stage (container: "exemplu", lățime: canvasWidth, înălțime: canvasHeight); var stratul A = noul Konva.Layer (); var poliA = nou Konva.RegularPolygon (x: 125, y: 125, fețe: 6, rază: 80, umplere: "galben", accident vascular cerebral: "negru", lățime accidentală: 5); var circA = noul Konva.Circle (x: 275, y: 225, înălțime: 100, umplere: "portocaliu", accident vascular cerebral: "negru"); var circB = noul Konva.Circle (x: 475, y: 275, raza: 100, completați: "roșu", accident vascular cerebral: "negru"); stratul A.add (poliA, circA, circB); stage.add (layerA); polyA.on ("mousedown", funcția () polyA.sides (polyA.sides () + 1), layerA.draw ();); ()) () ()) () () () () () () ; circA.on ("mouseover", funcția () circA.strokeWidth (10); layerA.draw ();); circA.on ("mouseup", funcția () circA.strokeWidth (5); layerA.draw ();); circB.on ("mousecenter", funcție () stage.container (). style.cursor = "crosshair";); circB.on ("mouseleave", funcția () stage.container (). style.cursor = "implicit";); ("rgb (" + r + r + r + r + r + r + "," + g + ", 100)"); stratA.draw ();); Dacă un utilizator apasă orice buton al mouse-ului în timp ce cursorul se află în interiorul poligonului obișnuit, creștem numărul laturilor poligonului cu 1. laturi () metoda poate fi folosită fără un parametru pentru a obține numărul de laturi pentru un poligon sau pentru a utiliza un singur parametru pentru a seta numărul laturilor pentru un poligon. De asemenea, puteți obține numărul de laturi folosind getSides () și setați numărul de laturi care utilizează setSides (). Liniile poligonului sunt reduse cu unul ori de câte ori cursorul mouse-ului părăsește poligonul.
Pentru cercul mai mic, mouse-ul peste evenimentul este folosit pentru a seta valoarea lățimii cursei la 10. The MouseUp evenimentul modifică valoarea lățimii accidentului la 5. Rețineți că MouseUp evenimentul trebuie să aibă loc în interiorul cercului. De exemplu, lățimea cursei nu se va schimba la 5 dacă apăsați butonul mouse-ului în interiorul cercului și apoi eliberați-l numai după ce cursorul se află în afara cercului.
În cazul cercului mai mare, folosim mousemove eveniment pentru a schimba completati culoare. De asemenea, schimbăm cursorul cercului mai mare folosind stage.container (). style.cursor ori de câte ori cursorul se mișcă în și din cerc.
Un lucru important pe care ar trebui să-l țineți cont este că trebuie să-l sunați a desena() pe stratul respectiv dacă ascultătorii evenimentului pentru orice formă au avut ca rezultat o schimbare a atributelor precum culoarea de umplere, lățimea cursei etc. În caz contrar, modificările nu vor fi reflectate pe panza.
Nu trebuie să legați un eveniment la un moment dat la o formă. De asemenea, puteți trece într-un șir spațiat delimitat care conține mai multe tipuri de evenimente la pe() metodă. Aceasta va lega toate evenimentele listate în șir la acea formă particulară.
Konva sprijină, de asemenea, versiunile mobile corespunzătoare tuturor acestor evenimente. De exemplu, vă puteți înregistra touchstart, touchmove, touchend, Atingeți, dbltap, dragstart, dragmove, și dragend utilizând Konva pe dispozitive mobile.
De asemenea, puteți declanșa oricare dintre aceste evenimente pentru o anumită formă sau forme folosind foc() metodă. În mod similar, Konva vă permite să declanșați evenimente personalizate cum ar fi a arunca pietre.
Puteți elimina orice ascultători de evenimente atașați unei forme cu ajutorul funcției off () în Konva. Trebuie doar să specificați numele evenimentului pe care nu doriți să îl ascultați.
De asemenea, puteți crea mai multe legări pentru evenimente pentru o singură formă. De exemplu, să presupunem că aveți un cerc și doriți să creșteți raza cercului de fiecare dată când cursorul mouse-ului trece peste el, până la o anumită limită. S-ar putea să doriți, de asemenea, să modificați culoarea de umplere a cercului la fiecare mouse-ul peste eveniment.
O opțiune este de a face ambele aceste sarcini într-un singur mouse-ul peste ascultător de evenimente și opriți ulterior actualizarea razei. O altă opțiune este crearea a două mouse-ul peste ascultători de evenimente cu diferite spații de nume pentru a le identifica. În acest fel, veți putea crește raza și schimba culoarea de umplere independent.
circA.on ("mouseover.radius", funcția () var curRadius = circA.radius (); dacă (curRadius < 150) circA.radius(curRadius + 5); layerA.draw(); else circA.off('mouseover.radius'); ); circA.on("mouseover.fillcolor", function() var h = Math.floor(Math.random()*360); var color = "hsl(" + h + ", 60%, 60%)"; circA.fill(color); layerA.draw(); );Trebuie să rețineți că am adăugat layerA.draw () în interiorul ambilor ascultători. Dacă nu reușiți să o adăugați în interiorul mouseover.fillcolor ascultător, culoarea va înceta să se actualizeze imediat ce raza devine 150.
În loc să eliminați un singur ascultător de evenimente la un moment dat, puteți, de asemenea, să încetați să ascultați toate evenimentele legate de o formă utilizând setListening () metodă. Poți să treci Adevărat și fals la această metodă pentru a transforma ascultătorii evenimentului pe și de pe. Rețineți că va trebui, de asemenea, să repetați graficul de lovire al stratului afectat apelând drawHit () imediat dupa ce apelati setListening ().
În loc să legați evenimente direct de toate formele prezente pe un strat, puteți lega de asemenea un eveniment la stratul propriu-zis. După aceasta, puteți determina forma care a declanșat evenimentul folosind ţintă proprietatea obiectului evenimentului. În acest fel, Konva vă permite să delegeți efectiv evenimentele de la părinte către copiii săi.
Să presupunem că ascultați clic pe evenimente într-un cerc desenat pe un strat din Konva. Același eveniment de clic se propagă la grupul care conține, precum și stratul care conține. Acest lucru poate sau nu poate fi comportamentul dorit. Dacă doriți să împiedicați ca evenimentul să buleze în interiorul unei forme în stratul care conține, puteți seta cancelBubble proprietatea pentru obiectul evenimentului Adevărat.
var canvasWidth = 600; var canvasHeight = 400; vară etapă = nou Konva.Stage (container: "exemplu", lățime: canvasWidth, înălțime: canvasHeight); var stratul A = noul Konva.Layer (); var circA = noul Konva.Circle (x: 300, y: 200, înălțime: 100, umplere: "portocaliu", accident vascular cerebral: "negru", denumire: "Orange Circle"); var steaA = nou Konva.Star (x: 125, y: 125, innerRadius: 25, outerRadius: 75, rotație: 90, umplere: "albastru", accident vascular cerebral: "negru", nume: "Blue Star"); var ringA = nou Konva.Ring (x: 475, y: 275, innerRadius: 25, outerRadius: 75, umplere: "maro", accident vascular cerebral: "negru"; var textA = nou text Konva.Text (text: "", fontFamily: "Calibri", fontSize: 24, umpleți: "negru", x: 10, y: 10); stratul A.add (circA, starA, ringA, textA); stage.add (layerA); layerA.on ("faceți clic", funcția (e) var shapeName = e.target.attrs.name; textA.setText (shapeName); layerA.draw ();); Am folosit Nume proprietate pentru a atribui un nume fiecărei forme. setText () metoda este apoi utilizată pentru a schimba textul înăuntru textA la numele formei pe care tocmai am făcut clic.
În exemplul de mai sus, inelul a înregistrat un clic pe el când a apărut clic între cercul interior și cel exterior. Dacă ați fi dorit să înregistrați clicul în interiorul cercului mai mic? Konva vă permite să definiți regiuni de lovire personalizate utilizând hitFunc proprietate. Această proprietate acceptă o funcție ca valoare, iar această funcție este utilizată pentru a desena regiunea de lovire personalizată.
Următorul exemplu vă arată cum să creați regiuni personalizate de lovituri. Acum ar trebui să faceți clic în zona dintre vârfurile de stea și să înregistrați un clic. Cu ajutorul regiunilor personalizate, puteți să vă asigurați că utilizatorii dvs. nu trebuie să facă clic pe locațiile exacte pentru a înregistra un eveniment de clic. Acest lucru poate duce la o experiență mai bună a utilizatorilor atunci când se ocupă de forme mai mici sau mai complexe.
var steaA = nou Konva.Star (x: 125, y: 125, innerRadius: 25, outerRadius: 75, rotație: 90, umplere: "albastru", accident vascular cerebral: context.beginPath (); context.arc (0, 0, this.getOuterRadius (), 0, Math.PI * 2, true); context.closePath (); context.fillStrokeShape (this); ); var ringA = nou Konva.Ring (x: 475, y: 275, innerRadius: 25, outerRadius: 75, umplere: "maro", accident vascular cerebral: "negru" context.beginPath (); context.arc (0, 0, this.getOuterRadius (), 0, Math.PI * 2, true); context.closePath (); context.fillStrokeShape (this););
În acest tutorial, am abordat diverse evenimente mobile și desktop pe care le puteți lega la orice formă din Konva. Puteți atașa aceste evenimente unul câte unul sau multe dintre ele simultan. Konva vă permite, de asemenea, să vă declanșați programele personalizate utilizând programul foc() metodă. Ultima secțiune a tutorialului ți-a arătat cum să-ți definiți propriile regiuni de hit-uri pentru a detecta accesările pe o zonă care ar putea fi mai mare sau mai mică decât forma originală.
Combinând cunoștințele acestui tutorial cu alții din serie, acum ar trebui să puteți desena o varietate de forme pe panza și să le permiteți utilizatorilor să interacționeze cu ei.
.
