fabric js- La méthode toObject d'extension avec la propriété supplémentaire est manquante lors de l'enregistrement et du chargement dans canvas

Question

J'ai créé un groupe de structure avec un rectangle et du texte. Enfin, j'ajoute une propriété personnalisée 'nom' à la classe de groupe en utilisant le code ci-dessous. IAM sérialisant les données de canevas en JSON en utilisant JSON.stringify (canvas) et en envoyant la chaîne JSON à java et en enregistrant enfin la chaîne JSON dans le fichier, les propriétés personnalisées sont également enregistrées avec le fichier.

var rect1= createRect(104,166,250,15); 


     var text1 = new fabric.Text('hello', { left: rect1.get('left'), top: rect1.get('top'),fontSize: 13 }); 

     var group1=new fabric.Group([rect1,text1]); 

     group1.toObject = (function(toObject) { 
      return function() { 
      return fabric.util.object.extend(toObject.call(this), { 
       name: this.name 
      }); 
      }; 
     })(group1.toObject); 

     canvas.add(group1); 

     group1.name = 'New group'; 

Iam lecture du même fichier en utilisant Java et la charge d'essayer le JSON en toile comme celle-ci canvas.loadFromJSON (jsonVal) mes propriétés personnalisées sont manquantes. Le groupe Json avec rectangle et texte est chargé uniquement avec les propriétés par défaut.

comment charger la chaîne JSON dans la toile sans perdre les propriétés personnalisées quelqu'un peut m'aider s'il vous plaît avec ceci.

Answer 1

Selon la documentation Fabricjs https://github.com/kangax/fabric.js/wiki/Adding-additional-object-properties-to-serialized-JSON

Propriétés doivent être renvoyés de méthode toObject de fabric.Object ou de méthode toObject d'une « classe » plus spécifique.

Donc soit vous ajoutez vos propriétés à la méthode toObject de fabric.Object ou vous l'ajoutez à la la méthode toObject de fabric.Group. Vous ne pouvez pas l'ajouter à un objet en tant que groupe1, car le groupe1 n'est pas une référence valide dans la chaîne JSON au chargement.

Donc, cela devrait fonctionner (je l'ai essayé):

fabric.Group.prototype.toObject = (function(toObject) { 
      return function() { 
      return fabric.util.object.extend(toObject.call(this), { 
       name: this.name 
      }); 
      }; 
     })(fabric.Group.prototype.toObject);