Share
Si vous suivez cette série depuis le début, vous devriez maintenant être très à l'aise avec les formes, les groupes et les calques. Vous devez également être en mesure de dessiner facilement des formes simples et complexes sur la toile à l’aide de Konva. Si vous envisagez d'utiliser Konva pour créer des applications ou des jeux interactifs, la prochaine étape logique consiste à apprendre à lier des événements à différentes formes sur la scène..
Dans ce didacticiel, vous apprendrez à lier des événements à n’importe quelle forme à l’aide de Konva. Vous apprendrez également à propos de la délégation et de la propagation d'événements. Parfois, vous aurez peut-être besoin de contrôler la région touchée d'une forme ainsi que de déclencher des événements par programmation. Nous discuterons de ces deux sujets aussi.
Vous pouvez lier différents événements à n’importe quelle forme créée avec Konva à l’aide de la sur() méthode. Tout ce que vous avez à faire est de passer le nom de l'événement en tant que premier paramètre et la fonction à exécuter lorsque l'événement se produit en tant que second paramètre. Vous pouvez utiliser Konva pour détecter mouseup, souris vers le bas, mouseenter, laisser la souris, passer la souris, déplacer la souris, Cliquez sur, et dblclick. De plus, Konva vous permet de détecter roue, dragstart, dragmove, et dragend événements.
Voici un exemple qui détecte souris vers le bas et laisser la souris événements sur un polygone régulier (hexagone). De même, le petit cercle est lié à la passer la souris et mouseup les événements et le grand cercle est lié à la mouseenter, laisser la souris, et déplacer la souris événements.
Accentsconagua
var canvasWidth = 600; var canvasHeight = 400; var stage = new Konva.Stage (conteneur: "exemple", largeur: canvasWidth, hauteur: canvasHeight); var layerA = new Konva.Layer (); var polyA = nouveau Konva.RegularPolygon (x: 125, y: 125, côtés: 6, rayon: 80, remplissage: "jaune", contour: "noir", contour: largeur: 5); var circA = new Konva.Circle (x: 275, y: 225, hauteur: 100, remplissage: "orange", contour: "noir"); var circB = new Konva.Circle (x: 475, y: 275, rayon: 100, remplissage: "rouge", contour: "noir"); coucheAadd (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 = "réticule";); 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 (" + "," + g + ", 100)"); layerA.draw ();); Si un utilisateur appuie sur n’importe quel bouton de la souris alors que le curseur est à l’intérieur du polygone régulier, nous augmentons le nombre de côtés du polygone de 1. côtés() Cette méthode peut être utilisée sans paramètre pour obtenir le nombre de côtés d’un polygone ou avec un paramètre pour définir le nombre de côtés d’un polygone. Vous pouvez également obtenir le nombre de côtés en utilisant getSides () et définir le nombre de côtés en utilisant setSides (). Les côtés du polygone sont réduits de un chaque fois que le curseur de la souris quitte le polygone.
Pour le plus petit cercle, le passer la souris event est utilisé pour définir la valeur de la largeur du trait sur 10. Le paramètre mouseup event modifie la valeur de la largeur de trait sur 5. N'oubliez pas que le mouseup événement doit se produire à l'intérieur du cercle lui-même. Par exemple, la largeur du trait ne changera pas à 5 si vous appuyez sur le bouton de la souris à l’intérieur du cercle, puis ne le relâchez que lorsque le curseur se trouve en dehors du cercle..
Dans le cas du grand cercle, nous utilisons le déplacer la souris événement pour changer sa remplir Couleur. Nous changeons également le curseur du grand cercle en utilisant stage.container (). style.cursor chaque fois que le curseur entre et sort du cercle.
Une chose importante à garder à l’esprit est que vous devez appeler le dessiner() méthode sur le calque respectif si les écouteurs d'événements de n'importe quelle forme ont entraîné un changement d'attributs comme la couleur de remplissage, la largeur du trait, etc. Sinon, les modifications ne seront pas répercutées sur le canevas..
Vous n'avez pas à lier un événement à la fois à une forme. Vous pouvez également transmettre une chaîne délimitée par des espaces contenant plusieurs types d’événements. sur() méthode. Cela liera tous les événements listés dans la chaîne à cette forme particulière.
Konva prend également en charge les versions mobiles correspondantes de tous ces événements. Par exemple, vous pouvez vous inscrire touchstart, toucher, toucher, robinet, dbltap, dragstart, dragmove, et dragend utiliser Konva sur des appareils mobiles.
Vous pouvez également déclencher n'importe lequel de ces événements pour une ou plusieurs formes à l'aide de la touche Feu() méthode. De même, Konva vous permet de déclencher des événements personnalisés tels que lancer des pierres.
Vous pouvez supprimer tout écouteur d’événement attaché à une forme à l’aide de la de() méthode à Konva. Il vous suffit de spécifier le nom de l'événement que vous ne souhaitez pas écouter..
Vous pouvez également créer plusieurs liaisons d'événement pour une seule forme. Par exemple, supposons que vous ayez un cercle et que vous souhaitiez en augmenter le rayon chaque fois que le curseur de la souris le survole, jusqu'à une certaine limite. Vous pouvez également modifier la couleur de remplissage du cercle à chaque passer la souris un événement.
Une option consiste à effectuer ces deux tâches dans une seule passer la souris écouteur d'événement et arrêtez de mettre à jour le rayon ultérieurement. Une autre option consiste à créer deux passer la souris des écouteurs d’événements avec différents espaces de noms pour les identifier. De cette façon, vous pourrez augmenter le rayon et changer la couleur de remplissage indépendamment.
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(); );Vous devriez noter que j'ai ajouté layerA.draw () à l'intérieur des deux auditeurs. Si vous ne parvenez pas à l'ajouter à l'intérieur du mouseover.fillcolor auditeur, la couleur cesse de se mettre à jour dès que le rayon devient 150.
Au lieu de supprimer un écouteur d'événement à la fois, vous pouvez également arrêter d'écouter tous les événements liés à une forme à l'aide de la commande setListening () méthode. Tu peux passer vrai et faux à cette méthode afin de transformer les auditeurs d'événements sur et de. N'oubliez pas que vous devrez également redessiner le graphe de hit de la couche affectée en appelant le drawHit () méthode juste après votre appel setListening ().
Au lieu de lier des événements directement à toutes les formes présentes sur un calque, vous pouvez également lier un événement au calque lui-même. Après cela, vous pouvez déterminer quelle forme a déclenché l'événement à l'aide du bouton cible propriété de l'objet événement. De cette façon, Konva vous permet de déléguer efficacement des événements du parent à ses enfants..
Supposons que vous écoutiez des événements de clic sur un cercle dessiné sur un calque de Konva. Le même événement de clic se propage au groupe contenant ainsi qu'au calque contenant. Cela peut ou peut ne pas être le comportement souhaité. Si vous souhaitez empêcher la propagation de l’événement à l’intérieur d’une forme dans le calque qui le contient, vous pouvez définir la cancelBubble propriété de l'objet événement vrai.
var canvasWidth = 600; var canvasHeight = 400; var stage = new Konva.Stage (conteneur: "exemple", largeur: canvasWidth, hauteur: canvasHeight); var layerA = new Konva.Layer (); var circA = nouveau Konva.Circle (x: 300, y: 200, hauteur: 100, remplissage: "orange", contour: "noir", nom: "cercle orange"); var starA = nouveau Konva.Star (x: 125, y: 125, innerRadius: 25, outerRadius: 75, rotation: 90, remplissage: "bleu", contour: "noir", nom: "étoile bleue"); var ringA = nouveau Konva.Ring (x: 475, y: 275, innerRadius: 25, outerRadius: 75, remplissage: "marron", trait: "noir", nom: "anneau brun"); var textA = new Konva.Text (text: "", fontFamily: "Calibri", fontSize: 24, remplissez: "noir", x: 10, y: 10); layerA.add (circA, starA, ringA, textA); stage.add (layerA); layerAon ("clic", fonction (e) var nomde forme = e.target.attrs.name; textA.setText (nom de forme); layerA.draw ();); J'ai utilisé le prénom propriété d'attribuer un nom à chacune de nos formes. le Définir le texte() La méthode est ensuite utilisée pour changer le texte à l'intérieur textA au nom de la forme sur laquelle nous venons de cliquer.
Dans l'exemple ci-dessus, l'anneau a enregistré un clic dessus lorsque le clic s'est produit entre les cercles intérieur et extérieur. Et si vous vouliez enregistrer le clic à l'intérieur du petit cercle également? Konva vous permet de définir des zones de contact personnalisées à l'aide du hitFunc propriété. Cette propriété accepte une fonction comme valeur et cette fonction est utilisée pour dessiner la région touchée personnalisée..
L'exemple suivant montre comment créer des zones de contact personnalisées. Vous devriez maintenant pouvoir cliquer dans la zone située entre les pointes d'étoiles tout en enregistrant un clic. À l'aide de zones d'accès personnalisées, vous pouvez vous assurer que vos utilisateurs n'ont pas à cliquer sur les emplacements exacts pour enregistrer un événement de clic. Cela peut améliorer l'expérience de l'utilisateur lorsqu'il s'agit de formes plus petites ou plus complexes.
var starA = nouveau Konva.Star (x: 125, y: 125, innerRadius: 25, outerRadius: 75, rotation: 90, remplissage: "bleu", trait: "noir", nom: "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 = nouveau Konva.Ring (x: 475, y: 275, innerRadius: 25, outerRadius: 75, remplissage: "marron", trait: "noir", nom: "marron anneau", hitFunc: fonction (contexte) context.beginPath (); context.arc (0, 0, this.getOuterRadius (), 0, Math.PI * 2, true); context.closePath (); context.fillStrokeShape (this););
Dans ce didacticiel, nous avons couvert différents événements mobiles et de bureau que vous pouvez lier à n’importe quelle forme dans Konva. Vous pouvez associer ces événements un à un ou plusieurs à la fois. Konva vous permet également de déclencher par programmation vos propres événements personnalisés à l'aide du Feu() méthode. La dernière section du didacticiel vous a montré comment définir vos propres zones de hit afin de détecter les hits sur une zone pouvant être plus grande ou plus petite que la forme d'origine..
En combinant les connaissances de ce didacticiel avec celles de la série, vous devriez maintenant être en mesure de dessiner diverses formes sur la toile et de permettre à vos utilisateurs d’interagir avec elles..
.
