Share
Se hai seguito questa serie dall'inizio, ora dovresti essere molto a tuo agio con forme, gruppi e livelli. Dovresti anche essere in grado di disegnare facilmente alcune forme di base e complesse sulla tela usando Konva. Se intendi utilizzare Konva per creare app o giochi interattivi, imparare come associare gli eventi a forme diverse sul palco è il prossimo passo logico.
In questo tutorial, imparerai come associare eventi a qualsiasi forma utilizzando Konva. Imparerai anche a conoscere la delega e la propagazione degli eventi. A volte, potrebbe essere necessario controllare la regione colpita di una forma e gli eventi di fuoco a livello di programmazione. Discuteremo anche questi due argomenti.
Puoi associare diversi eventi a qualsiasi forma creata utilizzando Konva con l'aiuto di sopra() metodo. Tutto quello che devi fare è passare il nome dell'evento come primo parametro e la funzione da eseguire quando l'evento si verifica come secondo parametro. Puoi usare Konva per rilevare MouseUp, mousedown, MouseEnter, mouseLeave, mouseover, MouseMove, clic, e DblClick. Inoltre, Konva ti consente di rilevare ruota, dragstart, DRAGMOVE, e dragend eventi.
Ecco un esempio che rileva mousedown e mouseLeave eventi su un poligono regolare (esagono). Allo stesso modo, il cerchio più piccolo è legato al mouseover e MouseUp eventi e il cerchio più grande è legato al MouseEnter, mouseLeave, e MouseMove eventi.
Accentsconagua
var canvasWidth = 600; var canvasHeight = 400; var stage = new Konva.Stage (container: "example", width: canvasWidth, height: canvasHeight); var layerA = new Konva.Layer (); var polyA = new Konva.RegularPolygon (x: 125, y: 125, lati: 6, raggio: 80, riempimento: "giallo", tratto: "nero", trattoWidth: 5); var circA = new Konva.Circle (x: 275, y: 225, height: 100, fill: "orange", stroke: "black"); var circB = new Konva.Circle (x: 475, y: 275, raggio: 100, riempimento: "rosso", tratto: "nero"); layerA.add (polyA, circA, circB); stage.add (layerA); polyA.on ("mousedown", function () polyA.sides (polyA.sides () + 1); layerA.draw ();); polyA.on ("mouseleave", function () var totalSides = polyA.sides (); if (totalSides> 3) polyA.sides (polyA.sides () - 1); layerA.draw ();) ; circA.on ("mouseover", function () circA.strokeWidth (10); layerA.draw ();); circA.on ("mouseup", function () circA.strokeWidth (5); layerA.draw ();); circB.on ("mouseenter", function () stage.container (). style.cursor = "crosshair";); circB.on ("mouseleave", function () stage.container (). style.cursor = "default";); circB.on ("mousemove", function () var pointerPos = stage.getPointerPosition (); var r = pointerPos.x% 255; var g = pointerPos.y% 255; circB.fill ("rgb (" + r + "," + g + ", 100)"); layerA.draw ();); Se un utente preme un pulsante del mouse mentre il cursore si trova all'interno del poligono regolare, aumentiamo di 1 il numero di lati del poligono. lati () il metodo può essere utilizzato senza un parametro per ottenere il numero di lati per un poligono o utilizzato con un parametro per impostare il numero di lati per un poligono. Puoi anche ottenere il numero di lati usando getSides () e impostare il numero di lati usando setSides (). I lati del poligono vengono ridotti di uno ogni volta che il cursore del mouse lascia il poligono.
Per il cerchio più piccolo, il mouseover evento viene utilizzato per impostare il valore della larghezza del tratto su 10. Il MouseUp evento cambia il valore della larghezza del tratto a 5. Tenere presente che il MouseUp l'evento deve avvenire all'interno del cerchio stesso. Ad esempio, la larghezza del tratto non cambia in 5 se si preme il pulsante del mouse all'interno del cerchio e quindi lo si rilascia solo dopo che il cursore si trova all'esterno del cerchio.
Nel caso del cerchio più grande, stiamo usando il MouseMove evento per cambiarne riempire colore. Stiamo anche cambiando il cursore del cerchio più grande usando stage.container (). style.cursor ogni volta che il cursore si sposta dentro e fuori dal cerchio.
Una cosa importante da tenere a mente è che devi chiamare il disegnare() metodo sul rispettivo livello se i listener di eventi di qualsiasi forma hanno provocato un cambiamento di attributi come colore di riempimento, larghezza del tratto, ecc. In caso contrario, le modifiche non si rifletteranno sulla tela.
Non è necessario associare un evento alla volta a una forma. È anche possibile passare una stringa delimitata da uno spazio contenente più tipi di eventi a sopra() metodo. Ciò collegherà tutti gli eventi elencati nella stringa a quella particolare forma.
Konva supporta anche le corrispondenti versioni mobili di tutti questi eventi. Ad esempio, puoi registrarti TouchStart, touchmove, touchend, rubinetto, dbltap, dragstart, DRAGMOVE, e dragend utilizzando Konva su dispositivi mobili.
Puoi anche sparare a qualcuno di questi eventi per una particolare forma o forma usando il fuoco() metodo. Allo stesso modo, Konva ti permette di sparare eventi personalizzati come lancia pietre.
Puoi rimuovere qualsiasi ascoltatore di eventi collegato a una forma con l'aiuto di off () metodo in Konva. Devi solo specificare il nome dell'evento che non vuoi ascoltare.
Puoi anche creare più associazioni di eventi per una singola forma. Ad esempio, supponiamo di avere un cerchio e di aumentare il raggio del cerchio ogni volta che il cursore del mouse lo supera, fino a un certo limite. Si potrebbe anche voler cambiare il colore di riempimento del cerchio su ogni mouseover evento.
Un'opzione è fare entrambe queste attività all'interno di una singola mouseover ascoltatore di eventi e interrompere l'aggiornamento del raggio più tardi. Un'altra opzione è crearne due mouseover ascoltatori di eventi con diversi spazi dei nomi per identificarli. In questo modo, sarai in grado di aumentare il raggio e cambiare il colore di riempimento in modo indipendente.
circA.on ("mouseover.radius", function () var curRadius = circA.radius (); if (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(); );Dovresti notare che ho aggiunto layerA.draw () dentro entrambi gli ascoltatori. Se non riesci ad aggiungerlo nel mouseover.fillcolor ascoltatore, il colore smetterà di aggiornarsi non appena il raggio diventa 150.
Invece di rimuovere un listener di eventi alla volta, puoi anche interrompere l'ascolto di tutti gli eventi associati a una forma usando il setListening () metodo. Puoi passare vero e falso a questo metodo per trasformare i listener di eventi sopra e via. Tieni presente che dovrai anche ridisegnare il grafico di successo del livello interessato chiamando il drawHit () metodo subito dopo la chiamata setListening ().
Invece di associare eventi direttamente a tutte le forme presenti su un livello, puoi anche associare un evento al livello stesso. Dopodiché, puoi determinare quale forma ha attivato l'evento usando il bersaglio proprietà dell'oggetto evento. In questo modo, Konva ti consente di delegare efficacemente eventi dal genitore ai suoi figli.
Diciamo che stai ascoltando gli eventi di clic su un cerchio disegnato su un livello in Konva. Lo stesso evento click si propaga al gruppo contenente e al layer contenente. Questo può o non può essere il comportamento previsto. Se vuoi impedire all'evento di ribollire all'interno di una forma al livello di contenimento, puoi impostare il cancelBubble proprietà per l'oggetto evento a vero.
var canvasWidth = 600; var canvasHeight = 400; var stage = new Konva.Stage (container: "example", width: canvasWidth, height: canvasHeight); var layerA = new Konva.Layer (); var circA = new Konva.Circle (x: 300, y: 200, height: 100, fill: "orange", stroke: "black", nome: "Orange Circle"); var starA = new Konva.Star (x: 125, y: 125, innerRadius: 25, outerRadius: 75, rotation: 90, fill: "blue", stroke: "black", nome: "Blue Star"); var ringA = new Konva.Ring (x: 475, y: 275, innerRadius: 25, outerRadius: 75, fill: "brown", tratto: "black", nome: "Brown Ring"); var textA = new Konva.Text (text: "", fontFamily: "Calibri", fontSize: 24, fill: "black", x: 10, y: 10); layerA.add (circA, starA, ringA, textA); stage.add (layerA); layerA.on ("click", function (e) var shapeName = e.target.attrs.name; textA.setText (shapeName); layerA.draw ();); Ho usato il nome proprietà per assegnare un nome a ciascuna delle nostre forme. Il setText () il metodo viene quindi utilizzato per modificare il testo all'interno texta al nome della forma che abbiamo appena cliccato.
Nell'esempio sopra, l'anello ha registrato un clic su di esso quando si è verificato il clic tra il cerchio interno ed esterno. E se volessi registrare il click anche all'interno del cerchio più piccolo? Konva ti permette di definire le regioni di successo personalizzate usando il hitFunc proprietà. Questa proprietà accetta una funzione come valore e questa funzione viene utilizzata per disegnare la regione di risultati personalizzati.
L'esempio seguente mostra come creare regioni di successo personalizzate. Ora dovresti essere in grado di fare clic nell'area tra i picchi delle stelle e registrare ancora un clic. Con l'aiuto delle regioni personalizzate, puoi assicurarti che gli utenti non debbano fare clic su posizioni esatte per registrare un evento click. Ciò può comportare un'esperienza utente migliore quando si ha a che fare con forme più piccole o più complesse.
var starA = new Konva.Star (x: 125, y: 125, innerRadius: 25, outerRadius: 75, rotazione: 90, riempimento: "blue", tratto: "black", nome: "Blue Star", hitFunc: function (context) context.beginPath (); context.arc (0, 0, this.getOuterRadius (), 0, Math.PI * 2, true); context.closePath (); context.fillStrokeShape (this); ); var ringA = new Konva.Ring (x: 475, y: 275, innerRadius: 25, outerRadius: 75, fill: "brown", tratto: "black", nome: "Brown Ring", hitFunc: function (context) context.beginPath (); context.arc (0, 0, this.getOuterRadius (), 0, Math.PI * 2, true); context.closePath (); context.fillStrokeShape (this););
In questo tutorial, abbiamo coperto diversi eventi mobili e desktop che puoi associare a qualsiasi forma in Konva. Puoi allegare questi eventi uno alla volta o molti di loro contemporaneamente. Konva ti consente anche di generare eventi personalizzati a livello di programmazione usando il fuoco() metodo. L'ultima sezione del tutorial ti mostra come definire le tue regioni di successo per rilevare i colpi su un'area che potrebbe essere più grande o più piccola della forma originale.
Combinando la conoscenza di questo tutorial con gli altri della serie, ora dovresti essere in grado di disegnare una varietà di forme sulla tela e consentire ai tuoi utenti di interagire con loro.
.
