Share
Après avoir lu les deux premiers tutoriels, vous devriez pouvoir créer des chemins et des formes prédéfinies de base. Vous devriez aussi pouvoir simplifier ou aplatir vos chemins, les dessiner sur différents calques et les mélanger..
Même si nous avons parcouru un long chemin, il manque encore une chose. Jusqu'ici, il n'y a eu aucune interaction entre notre toile et l'utilisateur. Ce serait bien si nous pouvions donner aux utilisateurs la possibilité d'interagir avec différents chemins ou de dessiner quelque chose par eux-mêmes. Ce tutoriel couvrira toutes les bases de l’interaction utilisateur, à commencer par le outil variable.
Il y a un global outil variable qui n'existe que dans les scripts contenant des fonctions de gestionnaire permettant d'interagir avec la souris ou le clavier. Cette variable vous donne accès à des propriétés telles que minDistance, qui est la distance minimale après laquelle la souris peut à nouveau déclencher le onMouseDrag événement, depuis sa dernière mise à feu. De même, la propriété maxDistance vous permet de spécifier une distance maximale après laquelle le onMouseDrag événement doit tirer à nouveau.
Paper.js a aussi un ToolEvent objet. C'est une extension de l'objet événement et le seul paramètre transmis à tous les gestionnaires d'événements de la souris. Il contient toutes les informations pertinentes sur ces événements de souris, tels que:
Accentsconagua
type, qui vous dit si l'événement est mouseup, souris vers le bas, déplacer la souris ou mousedrag.point, qui vous donne la position de la souris lorsque l'événement a été déclenché.delta, qui vous donne la distance entre la position actuelle et la dernière souris lorsque l'événement a été déclenché.compter, ce qui vous donne le nombre de fois que l'événement souris a été déclenché.article, qui vous donne l'élément qui était présent à l'emplacement de l'événement de la souris. Si l'article fait partie d'un groupe ou composé chemin alors le plus haut niveau de groupe ou composé chemin est retourné.lastPoint, qui donne la position de la souris lors du dernier déclenchement de l'événement.downpoint, qui vous donne la position de la souris dans les coordonnées du projet lors du dernier clic.point central, ce qui vous donne le point au milieu de lastPoint et point. N'oubliez pas tout cela, car ils seront fréquemment utilisés dans la plupart de vos projets..
Paper.js a diverses fonctions de gestionnaire appelées automatiquement pour gérer différents événements de souris. Les trois fonctions du gestionnaire de souris sont énumérées ci-dessous..
function onMouseDown (event) // Fait quelque chose console.log ('Souris enfoncée!'); function onMouseDrag (event) // Autre chose console.log ('Mouse dragged!'); function onMouseUp (event) // Ne faites rien console.log ('Souris publiée!'); Créons une démo de base basée sur le onMouseDown et onMouseUp manutentionnaires. Chaque fois qu'un utilisateur appuie sur un bouton de la souris, nous créons un nouveau Chemin et marquer ce point comme le début de notre Chemin.
Chaque fois que l'utilisateur relâche le bouton de la souris, nous ajoutons un nouveau point à la fin de notre Chemin. Cela créera une ligne droite du point où le bouton de la souris a été appuyé au point où il a été relâché. Voici le code:
var aPath; fonction onMouseDown (event) aPath = new Path (); aPath.strokeColor = 'purple'; aPath.strokeWidth = event.point.x / 10; aPath.add (event.point); function onMouseUp (event) aPath.add (event.point);
J'ai aussi mis le strokeColor au violet et largeur du trait au dixième de la valeur de la coordonnée x en utilisant le event.point propriété. Si vous essayez de tracer des lignes verticales dans la zone grise ci-dessous, vous remarquerez qu'elles ont toutes une largeur directement proportionnelle à leur distance du côté gauche..
Maintenant, créons des cercles en utilisant le onMouseDrag un événement. Chaque fois qu'un événement de glissement est déclenché, nous allons tracer un cercle dont le centre est au centre du dernier et de l'actuel point de glissement. Le rayon du cercle dépendra directement de la vitesse de glissement de l'utilisateur.
Pour localiser le centre de notre cercle, nous pouvons utiliser le point central propriété que nous avons discuté dans la section précédente. Pour déterminer le rayon du cercle, on peut utiliser le delta propriété et diviser le résultat par 2. Voici le code dont nous avons besoin:
tool.maxDistance = 50; tool.minDistance = 4; function onMouseDrag (event) var circle = new Path.Circle (center: event.middlePoint, radius: event.delta.length / 2); circle.fillColor = 'pink'; circle.strokeColor = 'black';
Si l'utilisateur faisait glisser la souris trop rapidement ou trop lentement, les cercles deviendraient trop grands ou trop petits..
Ce problème peut être résolu en utilisant le maxDistance et minDistance Propriétés. Si l'utilisateur se traîne trop vite, le maxDistance propriété déclenchera l'événement drag tous les 50 pixels. Si la vitesse de déplacement de l'utilisateur est trop lente, le minDistance les propriétés ne seront pas déclenchées tant que le seuil de distance minimum spécifié ne sera pas atteint. Vous pouvez tester le code ci-dessus en faisant glisser votre souris dans la zone grise ci-dessous:
le un événement L’objet a trois propriétés que vous pouvez utiliser pour vos interactions avec le clavier. le event.key propriété vous dira quelle touche a été enfoncée, et le événement.caractère La propriété vous indiquera le caractère qui a été généré lors de l’appui sur une touche. Pour déterminer si c'était un keyup ou touche Bas événement, vous pouvez utiliser le type d'événement propriété.
Utilisons ces propriétés ensemble pour créer de minuscules cercles et les déplacer. Regardez le code ci-dessous:
var step = 10; var centerPoint = nouveau Point (100, 100); fonction onKeyDown (event) var circle = new Path.Circle (centerPoint, 3); circle.fillColor = 'pink'; circle.strokeColor = 'black'; if (event.key == 'a') centerPoint - = new Point (step, 0); // Code pour les autres clés
Nous créons une variable étape qui sera utilisé pour déterminer la vitesse à laquelle notre cercle se déplace. La variable Point central stocke l'emplacement du centre de nos cercles. le onKeyDown gestionnaire a le code pour gérer tous touche Bas événements. Cet événement est déclenché de manière continue tant qu'une touche est enfoncée.
C'est la raison pour laquelle de nouveaux cercles sont créés en permanence. En fonction de la touche enfoncée, nous modifions la valeur de Point central pour déplacer notre cercle nouvellement créé à un autre endroit. Vous pouvez voir le code en action dans la démo ci-dessous:
Certaines clés, par exemple le Décalage clé et Option touche, ne produit pas directement un caractère lorsque vous appuyez dessus. Ces touches sont appelées touches de modification. le un événement l'objet a un événement.modificateurs propriété que vous pouvez utiliser pour déterminer la touche de modification sur laquelle vous avez appuyé. Considérons le code ci-dessous:
chemin var; fonction onMouseDown (event) path = new Path (); path.strokeColor = 'black'; path.strokeWidth = 2; path.add (event.point); function onMouseDrag (event) if (event.modifiers.shift) path.lastSegment.point = event.point; path.simplify (); else chemin.add (event.point);
Chaque fois qu'un utilisateur appuie sur un bouton de la souris, le onMouseDown handler crée un nouveau chemin et y ajoute un point. Après avoir commencé à faire glisser, le onMouseDrag gestionnaire ajoute un nouveau point à chaque événement de glisser.
Si vous faites glisser la souris avec le Décalage touche, le gestionnaire le détecte avec le bouton event.modifiers.shift propriété. Dans ce cas, au lieu d’ajouter un nouveau point à chaque événement glisser, il ne fait que définir les coordonnées du dernier segment sur l’emplacement actuel du pointeur de la souris. Cela simplifie également le chemin complet qui a été tracé. Vous pouvez faire glisser votre souris dans la zone grise ci-dessous pour voir le comportement du chemin lorsque le Décalage la touche est enfoncée.
Si la touche Maj ne semble pas fonctionner, c'est probablement parce que la toile n'a pas de focus. Dans ce cas, vous devez d’abord cliquer à l’intérieur du petit espace blanc sous la toile pour la mettre au point..
Les gestionnaires d'événements dont nous avons parlé aujourd'hui couvrent les scénarios d'interactivité les plus courants. Comme le montre clairement le didacticiel, il n’est pas difficile de manipuler les éléments d’un canevas en fonction des actions de l’utilisateur. La meilleure façon d'apprendre est de pratiquer. Je voudrais donc vous suggérer de créer vos propres démos en combinant tout ce que vous avez appris dans les trois didacticiels..
Si vous avez des questions concernant ce tutoriel, merci de me le faire savoir dans les commentaires..
