Fabric.js: Fortgeschritten

Dieser Artikel befasst sich mit fortgeschrittenen Fabric.js -Funktionen: Gruppen, Serialisierung (und Deserialisierung) und kundenspezifische Klassenerstellung.

Schlüsselkonzepte:

• Fabric -Gruppen: Effizient verwalten mehrere Objekte als einzelne Einheit, vereinfachte Manipulation (Bewegung, Skalierung, Drehen).
• Canvas-Serialisierung (JSON): Save and Load Canvas-Zustände mit JSON, einer bandbreitfreundlicheren Methode als Bildformate.
• Custom Class Creation: Fabric.js mit maßgeschneidertem Objektverhalten und Eigenschaften, effizient serialisiert und deserialisiert.
• SVG Interoperabilität: Canvas -Elemente exportieren und SVG -Inhalte für die Flexibilität der Format in die Leinwand importieren.
• Deserialisierungsmethoden: Verwenden loadFromJSON loadFromSVG Erweiterte Objektsteuerung:
Erstellen Sie komplexe interaktive Elemente und hoch angepasste Objekte, die über grundlegende Formen jenseits der Unterklasse hinausgehen.
Gruppen:

Gruppen in Fabric.js ermöglichen das Kombinieren von Objekten zu einer einzigen Entität. (Siehe Abbildung 1). Eine beliebige Anzahl von Canvas -Objekten kann gruppiert werden, was eine einheitliche Manipulation ermöglicht. Skalierung, Rotation und Modifikation von Gruppeneigenschaften (Farbe, Transparenz, Grenzen) sind alle möglich. Fabric erstellt implizit Gruppen bei der Auswahl mehrerer Objekte.

Abbildung 1

programmatische Gruppenerstellung:

(siehe Abbildung 2 für das Ergebnis). Auf einzelne Objekte innerhalb einer Gruppe werden mithilfe der

-Methode zugegriffen und geändert.

<code class="language-javascript">var text = new fabric.Text('hello world', { fontSize: 30 });
var circle = new fabric.Circle({ radius: 100, fill: '#eef', scaleY: 0.5 });
var group = new fabric.Group([text, circle], { left: 150, top: 100, angle: -10 });
canvas.add(group);</code>

item

Abbildung 2

Gruppenobjekte ändern:

(siehe Abbildung 3). Objekte innerhalb einer Gruppe sind relativ zum Zentrum der Gruppe positioniert

<code class="language-javascript">group.item(0).set({ text: 'trololo', fill: 'white' });
group.item(1).setFill('red');</code>

Abbildung 3 left top

Erstellen einer horizontal ausgerichteten Gruppe:

(siehe Abbildung 4). Stellen Sie für Gruppen, die Bilder enthalten, sicher, dass Bilder vor dem Gruppieren vollständig geladen werden.

Abbildung 4

<code class="language-javascript">var circle1 = new fabric.Circle({ radius: 50, fill: 'red', left: 0 });
var circle2 = new fabric.Circle({ radius: 50, fill: 'green', left: 100 });
var circle3 = new fabric.Circle({ radius: 50, fill: 'blue', left: 200 });
var group = new fabric.Group([circle1, circle2, circle3], { left: 200, top: 100 });
canvas.add(group);</code>

Gruppenmethoden umfassen

, , , ,

,

und getObjects. size fügt Objekte hinzu, während die Gruppendimensionen aktualisiert werden. Das Klonen vorhandener Canvas -Objekte ist erforderlich, bevor sie einer neuen Gruppe hinzugefügt werden. contains item forEachObject Serialisierung: add remove

Fabric.js verwendet toObject und toJSON für die Serialisierung. toJSON ruft implizit toObject.

auf

Beispiel: Serialisierung einer leeren Leinwand:

<code class="language-javascript">var text = new fabric.Text('hello world', { fontSize: 30 });
var circle = new fabric.Circle({ radius: 100, fill: '#eef', scaleY: 0.5 });
var group = new fabric.Group([text, circle], { left: 150, top: 100, angle: -10 });
canvas.add(group);</code>

Hinzufügen von Objekten aktualisiert die JSON -Darstellung. toObject Gibt eine Nicht-String-Objektdarstellung zurück. Das Anpassen der Objekt -Serialisierung wird erreicht, indem die Methode toObject überschritten oder erweitert wird.

Beispiel: Erweiterung toObject:

<code class="language-javascript">group.item(0).set({ text: 'trololo', fill: 'white' });
group.item(1).setFill('red');</code>

SVG -Serialisierung verwendet die toSVG -Methode, wobei die toSVG -Methoden des einzelnen Objekts delegiert. Dies ermöglicht den Exportieren in alle SVG-kompatiblen Renderer.

Deserialisierung:

loadFromJSON und loadFromDatalessJSON laden Leinwandzustände von JSON. loadSVGFromURL und loadSVGFromString Laden aus SVG -Daten. loadFromDatalessJSON behandelt große Pfaddaten effizient, indem sie auf externe SVG -Dateien verweist.

Subklasse:

Fabric.js verwendet fabric.util.createClass für die Unterklasse. Die initialize Eigenschaft fungiert als Konstruktor. callSuper ruft übergeordnete Klassenmethoden auf.

Beispiel: Erstellen einer benutzerdefinierten Klasse:

<code class="language-javascript">var circle1 = new fabric.Circle({ radius: 50, fill: 'red', left: 0 });
var circle2 = new fabric.Circle({ radius: 50, fill: 'green', left: 100 });
var circle3 = new fabric.Circle({ radius: 50, fill: 'blue', left: 200 });
var group = new fabric.Group([circle1, circle2, circle3], { left: 200, top: 100 });
canvas.add(group);</code>

(siehe Abbildungen 8 und 9 für Beispiele für LabeledRect). Benutzerdefinierte Eigenschaften sollten in toObject und initialize.

behandelt werden

häufig gestellte Fragen (FAQs): (Die bereitgestellten FAQs sind bereits gut strukturiert und umfassend, daher sind hier keine Änderungen erforderlich.)

Die Bilder sind wie angefordert enthalten, wobei ihr ursprüngliches Format und ihre Positionen im Text beibehalten werden.

Das obige ist der detaillierte Inhalt vonFabric.js: Fortgeschritten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!