Comment ajouter des paramètres personnalisés à un objet Fabric JS

Fabric JS est une puissante bibliothèque de manipulation de canevas avec de nombreuses fonctions intégrées utiles pour créer une application hautement personnalisable. Si vous avez besoin d’étendre les paramètres de base d’un objet Fabric JS standard, ne cherchez pas plus loin. Voici comment ajouter des paramètres personnalisés à un objet Fabric JS.

Comment ajouter des paramètres personnalisés à un objet Fabric JS

Pour ajouter des paramètres personnalisés (ou des propriétés) à votre objet Fabric JS, ajoutez vos paramètres à l’objet initial lors de l’initialisation.

let myObject = new fabric.Rect({
  fill: 'red',
  width: 200,
  height: 200,
  specialParam: 'something here'
})

canvas.add(myObject)

      
        Copied  
        
      
    

Objets Fabric JS, qu’il s’agisse d’une image, d’une forme, d’un texte ou de toute autre chose, sont des objets JavaScript contenant des paramètres et des fonctions de base. Vous pouvez ajouter toutes les données supplémentaires que vous souhaitez à cet objet et les récupérer ultérieurement.

Comment ajouter des paramètres personnalisés à un objet Fabric JS existant

Si votre objet a déjà été initialisé et que vous devez lui ajouter des paramètres supplémentaires, vous pouvez utiliser la commande set() méthode:

let myObject = new fabric.Rect({
  fill: 'red',
  width: 200,
  height: 200
})

myObject.set({
  specialParam: 'something here'
})

canvas.add(myObject)
      
        Copied  
        
      
    

La set() peut également être utilisée pour ajouter ou modifier les paramètres de base, tels que width et height.

Comment ajouter des paramètres dynamiques à un objet Fabric JS

Si vous ajoutez des paramètres dynamiques, vous pouvez tous les ajouter en tant qu’objet dans une propriété Fabric JS :

let someDynamicData = {
  key1 = 'data1'
  key2 = 'can be anything' 
}

let myObject = new fabric.Rect({
  fill: 'red',
  width: 200,
  height: 200,
  customParams: someDynamicData
})

canvas.add(myObject)
      
        Copied  
        
      
    

Cette approche vous permettra d’ajouter n’importe quel objet à votre paramètre personnalisé unique et de récupérer l’objet entier plus tard dans votre code :

myObject.get('customParams')
      
        Copied  
        
      
    

L’ajout de tous vos paramètres personnalisés dans une seule variable est une bonne approche si vous avez beaucoup de données personnalisées ou si vos clés peuvent être dynamiques.

Comment récupérer des paramètres personnalisés dans un objet Fabric JS existant

Pour récupérer des paramètres personnalisés à partir de votre objet Fabric JS, utilisez le get() méthode avec votre clé de paramètre :

let myObject = new fabric.Rect({
  fill: 'red',
  width: 200,
  height: 200,
  specialParam: 'something here'
})

canvas.add(myObject)

let paramValue = myObject.get('specialParam')
      
        Copied  
        
      
    

La get() est une fonction Fabric JS intégrée qui analysera votre objet et récupérera l’ensemble de données dans la clé.

Vous devriez maintenant avoir une bonne compréhension de la façon d’ajouter des paramètres personnalisés à un objet Fabric JS. Sans les techniques ci-dessus, vous devrez peut-être créer un objet de recherche secondaire pour récupérer les informations client, ce qui rend votre code inutilement complexe.

Consultez notre section de codage Javascript pour plus de conseils, astuces et meilleures pratiques utiles pour votre projet JS.