In Fabric.js wie ändere ich die Objektklasse, so dass alle Unterklassen ein neues benutzerdefiniertes Attribut haben?

Question

Ich suche nach einer Möglichkeit, die Basis fabric.Object Klasse mit einem benutzerdefinierten Attribut zu erweitern, das ich in JSON speichern und von JSON laden kann, das den ganzen Weg in die verschiedenen Unterklassen propagieren würde.

Speziell ich möchte ein Tiefenattribut speichern, also wenn ich die Objekte aus dem JSON laden, kann ich die entsprechende Parallaxe zum Objekt hinzufügen.

Ich stelle mir vor, die Lösung würde die Änderung des fabric.Object.prototype beinhalten. Aber ich lerne immer noch, wie man mit Prototypen arbeitet.

Hier sind einige Beispiele dafür, was ich versucht habe: http://www.sitepoint.com/fabric-js-advanced/

// create a rectangle object 
var rect = new fabric.Rect({ 
    left: 100, 
    top: 100, 
    fill: 'red', 
    width: 20, 
    height: 20 
}); 

rect.toObject = (function (toObject) { 
    return function() { 
     return fabric.util.object.extend(toObject.call(this), { 
      depth: 10 
     }); 
    }; 
})(rect.toObject); 

Dies hat eine große Aufgabe das spezifische Objekt ‚rect‘ das Attribut gewünscht wird, sowie so dass es in der toJSON() Verfahren bei Angabe . Aber es stellt es nicht für alle Objekte zur Verfügung, und wenn ich loadFromJSON() verwende, enthält es das neue Attribut nicht.

Jede Hilfe wäre willkommen!

Andere Ressourcen, die mich näher an einer Lösung bekam:

Fabric.js - how to save canvas on server with custom attributes
  - Erstellt eine Unterklasse mit den benutzerdefinierten Attributen, aber nichts erbt von ihm.

https://github.com/kangax/fabric.js/wiki/Adding-additional-object-properties-to-serialized-JSON
  - vollständig die Methoden benötigt, um umschreibt benutzerdefinierte Attribute enthalten (ich würde es vorziehen, nicht den Kern der fabricjs zu ändern)

Answer 1

Der einfachste Weg, nur wäre, um festzulegen, welche Eigenschaften Sie enthalten möchten, wenn Aufruf toJSON:

canvas.toJSON([ 'selectable', 'lockMovementX' ]); 

Aber wenn Sie möchten, um sie wirklich-wirklich mit dem Ausgang hinzufügen, können Sie Affen-Patch fabric.Object.prototype.toObject die gleiche Art und Weise es mit Rechteck getan:

fabric.Object.prototype.toObject = (function (toObject) { 
    return function() { 
     return fabric.util.object.extend(toObject.call(this), { 
      foobar: 123 
     }); 
    }; 
})(fabric.Object.prototype.toObject);