Comment ajouter et supprimer des écouteurs d’événements dans Fabric JS

L’utilisation d’écouteurs d’événements est une pratique courante lors du codage en Javascript. La bibliothèque Fabric JS ne fait pas exception et vous devrez vous lier à plusieurs événements lors de la construction de votre projet. Voici comment ajouter et supprimer des écouteurs d’événements dans Fabric JS.

Comment ajouter et supprimer des écouteurs d’événements dans Fabric JS

Dans Fabric JS, les écouteurs d’événements sont ajoutés à l’aide de on() méthode et supprimé avec la off() méthode. Il y a 26 événements vous pouvez attacher des auditeurs, ainsi que des événements personnalisés que vous pouvez créer.

L’ajout et la suppression d’extraits de code ci-dessous fonctionneront pour tous les événements ci-dessus.

Ajout d’écouteurs d’événements dans Fabric JS

Pour ajouter un écouteur d’événement, utilisez les canevas on() méthode avec l’événement comme premier paramètre et le gestionnaire d’événements comme second.

let myHandler = function(e) {
  console.log('Doing something with the event', e)
}

//This will listen for when an object is added
canvas.on('object:added', myHandler)
      
        Copied  
        
      
    

Une fois l’événement enregistré, votre gestionnaire d’événements sera déclenché à chaque déclenchement de l’événement. Pour rendre votre application dynamique, vous souhaiterez peut-être activer et désactiver les événements en fonction de l’action de l’utilisateur. Vérifiez l’extrait de code ci-dessous pour cette solution.

Si vous ajoutez un canevas Fabric JS dans un framework basé sur des composants comme VueJS, assurez-vous de toujours supprimer les gestionnaires d’événements lorsqu’un composant est détruit.

Suppression des écouteurs d’événement dans Fabric JS

Pour supprimer un écouteur d’événement, utilisez les canevas off() méthode. Le premier paramètre sera l’événement, et le deuxième paramètre sera le gestionnaire d’événements d’origine que vous avez utilisé pour créer l’écouteur.

let myHandler = function(e) {
  console.log('Doing something with the event', e)
}

//This will listen for when an object is added
canvas.on('object:added', myHandler)

//This will remove the object added event
canvas.off('object:added', myHandler)
      
        Copied  
        
      
    

Assurez-vous de déplacer vos gestionnaires d’événements dans leurs propres fonctions pour faciliter la suppression ultérieure des écouteurs d’événements.

Si vous voulez bien supprimer tous les écouteurs d’événements dans votre canevas Fabric JS, vous pouvez utiliser ce one-liner :

canvas.__eventListeners = {};
      
        Copied  
        
      
    

Création et déclenchement d’événements personnalisés dans Fabric JS

Vous pouvez créer un écouteur d’événement personnalisé en transmettant un nom personnalisé au on() méthode. Pour déclencher plus tard votre événement, vous utiliserez le trigger() méthode.

let myHandler = function(e) {
  console.log('Doing something with the event', e)
}

//This will listen for when an object is added
canvas.on('techozu:hello', myHandler)

canvas.trigger('techozu:hello', 'some data')
      
        Copied  
        
      
    

Le deuxième paramètre de la méthode de déclenchement sera les options qui seront transmises à votre gestionnaire d’événements.

J’espère que vous savez maintenant comment ajouter et supprimer des écouteurs d’événements dans Fabric JS. L’utilisation de gestionnaires d’événements vous permettra de créer une expérience beaucoup plus unique pour les utilisateurs lors de l’utilisation de votre application.

Pour plus de conseils, astuces et guides Fabric JS, veuillez consulter notre section Fabric JS.