Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung & Design

Fabric.js – Einführung in die mächtige JavaScript-Library

Seite 2 / 3

Wie zu erwarten, haben Fabric-Objekte Eigenschaften für Positionierung (left, top), Größe (width, height), Rendern (fill, opacity, stroke, strokeWidth), Skalierung und Drehung (scaleX, scaleY, angle) und Spiegelung (flipX, flipY). Will man also ein Objekt spiegeln, muss man lediglich die flip*-Eigenschaft auf true setzen.

Ihr könnt alle diese Eigenschaften mit einer get-Methode auslesen und mit einer set-Methode setzen. Das folgende Beispiel zeigt euch, wie einige der Eigenschaften des roten Rechtecks verändert werden. Bild 5 veranschaulicht das Ergebnis.

var canvas = new fabric.Canvas('c');
...
canvas.add(rect);
rect.set('fill', 'red');
rect.set({ strokeWidth: 5, stroke: 'rgba(100,200,200,0.5)' });
rect.set('angle', 15).set('flipY', true);
Rotes, gedrehtes und hellbau eingerahmtes Rechteck gezeichnet mit Fabric
Bild 5. Rotes, gedrehtes und hellbau eingerahmtes Rechteck gezeichnet mit Fabric

Zuerst setzen wir die Füllfarbe auf „red”. In der nächsten Zeile definieren wir Werte für strokeWidth und stroke, was dem Rechteck eine 5 Pixel breite Umrandung in einem Pastellgrün verleiht. Zum Schluss ändert der Code die Eigenschaften angle (Drehwinkel) und flipY (Spiegelung an der Y-Achse). Achtet darauf, dass alle drei Zeilen verschiedene Arten der Syntax demonstrieren.

Dies zeigt uns, dass set eine Universal-Methode ist. Ihr werden sie wahrscheinlich ziemlich oft verwenden und sie ist auch für ein einfaches Handhaben gedacht. Und was ist mit get-Methoden? Es gibt eine allgemeine get-Methode und auch ein paar spezifische get*-Methoden. Um die Breite eines Objekts auszulesen, würdet ihr get('width') oder getWidth() verwenden. Um den Wert für scaleX zu bekommen, könnt ihr get('scaleX') oder getScaleX() verwenden, und so weiter. Es gibt eine Methode mit der selben Schreibweise wie getWidth oder getScaleX für jede der Objekteigenschaften, die „public” sind (stroke, strokeWidth, angle et cetera).

Ihr werdet vielleicht festgestellt haben, dass in den oberen Beispielen die Objekte gleich beim Erstellen des Objekts mit allen Eigenschaften konfiguriert, aber bei dem letzten Beispiel die Eigenschaften erst mit der set-Methode definiert wurden. Beides ist möglich und in seiner Wirkweise identisch. Ihr könnt ein Objekt entweder gleich beim Erstellen konfigurieren, oder erst nachher mit der set-Methode, wie ihr im folgenden Vergleich seht:

var rect = new fabric.Rect({ width: 10, height: 20, fill: '#f55', opacity: 0.7 });
// oder anders geschrieben, aber funktionell identisch.
var rect = new fabric.Rect();
rect.set({ width: 10, height: 20, fill: '#f55', opacity: 0.7 });

Standardwerte

An diesem Punkt fragt ihr euch vielleicht, was passiert, wenn ihr ein Objekt erstellt, ohne ihm irgendein „Konfigurationsobjekt” zu übergeben. Hat es trotzdem diese Eigenschaften?

Ja. Wenn gewisse Einstellungen während der Erstellung weggelassen werden, haben Objekte in Fabric immer eine Reihe von voreingestellten Eigenschaften. Ihr könnt den folgenden Code benutzen, um das zu sehen:

var rect = new fabric.Rect(); // Beachten Sie: Keine Eigenschaften werden per Argument Ÿbergeben. 
rect.getWidth(); // 0
rect.getHeight(); // 0
rect.getLeft(); // 0
rect.getTop(); // 0
rect.getFill(); // rgb(0,0,0)
rect.getStroke(); // null
rect.getOpacity(); // 1

Dieses Rechteck (im Code-Beispiel oben) hat nur voreingestellte Werte für seine Eigenschaften. Es ist positioniert an der Stelle 0,0, ist schwarz und komplett undurchsichtig, hat keinen Rand und keine Ausdehnung (width und height sind beide 0). Weil es keine Ausdehnung hat, könnt ihr es nicht auf dem Canvas sehen. Wenn ihr irgendwelche positiven Werte für width und height setzt, würdet ihr ein schwarzes Rechteck in der rechten oberen Ecke des Canvas sehen, genau wie in Bild 6.

Wie ein Standard-Rechteck aussieht, wenn ihm lediglich seine Größe (width, height) übergeben wurde.
Bild 6. Wie ein Standard-Rechteck aussieht, wenn ihm lediglich seine Größe (width, height) übergeben wurde.

Hierarchie und Vererbung

Fabric-Objekte existieren nicht völlig unabhängig voneinander. Sie stehen in einer ganz genauen Hierarchie. Die meisten Objekte erben von der Wurzel fabric.Object. Das Wurzelelement fabric.Object steht (mehr oder weniger) für eine zweidimensionale Form, die auf einer zweidimensionalen Canvas-Fläche positioniert ist. Es ist eine Einheit, die Eigenschaften wie left/top und width/height und eine ganze Menge anderer grafischer Charkterisika hat. Die aufgelisteten Eigenschaften für Objekte – fill, stroke, angle, opacity, flip* und so weiter – sind allen Fabric-Objekten gemein, die von fabric.Object Eigenschaften vererbt bekommen.

Die Vererbung erlaubt euch, Methoden für fabric.Object zu definieren und sie dann mit allen Kind-"Klassen" zu teilen. Wollt ihr beispielsweise eine Methode getAngleInRadians für alle Objekte haben, würdet ihr sie einfach wie folgt für fabric.Object.prototype definieren:

fabric.Object.prototype.getAngleInRadians = function() {
  return this.getAngle() / 180 * Math.PI;
};
var rect = new fabric.Rect({ angle: 45 });
rect.getAngleInRadians(); // 0.785...
var circle = new fabric.Circle({ angle: 30, radius: 10 });
circle.getAngleInRadians(); // 0.523...
circle instanceof fabric.Circle; // true
circle instanceof fabric.Object; // true

Wie ihr sehen könnt, ist die Methode sofort für alle Instanzen verfügbar.

Auch wenn Kind-„Klassen” von fabric-Object erben, werden Methoden oft oder Eigenschaften auch speziell nur für die Kind-„Klassen” definiert. Zum Beispiel braucht fabric.Circle eine Eigenschaft radius. fabric.Image braucht die Methoden getElement und setElement, um das HTML-Element <img alt="" />, wovon die Image-Instanz ursprünglich herkommt, auslesen und setzen zu können.

Canvas

Jetzt, nachdem ihr ein wenig mehr über Objekte gelernt habt, lasst uns zu Canvas zurückkehren.

Das erste, was ihr in allen Fabric-Beispielen seht, ist das Erstellen eines Canvas-Objekts – new fabric.Canvas('...'). Das fabric.Canvas Objekt dient als Wrapper um das <canvas>-Element und regelt alle Fabric-Objekte auf diesem einen Canvas. Es nimmt dazu eine ID eines HTML-Elements und liefert eine Instanz von fabric.Canvas zurück.

Ihr könnt Objekte zum Canvas hinzufügen, sie von dort auslesen oder von ihm entfernen:

var canvas = new fabric.Canvas('c');
var rect = new fabric.Rect();
canvas.add(rect); // add object
canvas.item(0); // reference fabric.Rect added earlier (first object)
canvas.getObjects(); // get all objects on canvas (rect will be first and only)
canvas.remove(rect); // remove previously-added fabric.Rect

Objekte zu regeln ist die Hauptaufgabe von fabric.Canvas, man kann aber auch einiges damit konfigurieren. Ob ihr eine Hintergrundfarbe oder ein Hintergrundbild für den gesamten Canvas definieren, alle Inhalte eines bestimmten Bereichs abschneiden, andere Werte für width und height setzen, oder den Canvas als interaktiv oder nicht interaktiv setzen müsst – all diese Optionen (und noch mehr) könnt ihr für fabric.Canvas setzen, entweder zur Zeit der Objekterstellung oder später. Der folgende Code zeigt dazu ein Beispiel:

var canvas = new fabric.Canvas('c', {
  backgroundColor: 'rgb(100,100,200)',
  selectionColor: 'blue',
  selectionLineWidth: 2
  // ...
});
// or
var canvas = new fabric.Canvas('c');
canvas.backgroundImage = 'http://...';
canvas.onFpsUpdate = function(){ /* ... */ };
// ...

Interaktivität

Eines der Features, das Fabric einzigartig macht, ist eine Ebene für Interaktivität, die auf dem Objektmodell aufsetzt. Das Objektmodell besteht, um Programmierzugang und Manipulation von Objekten auf dem Canvas zu ermöglichen, aber außerhalb – auf der Benutzerebene – gibt es eine Möglichkeit, diese Objekte mit dem Mauszeiger (oder mit Berührungen auf Geräten mit Touchscreen) zu manipulieren. Sobald ihr einen Canvas mit dem Aufruf new fabric.Canvas('...') initialisiert, ist es möglich, Objekte auszuwählen (siehe Bild 7), sie zu ziehen, zu skalieren oder zu drehen und sogar zu gruppieren (siehe Bild 8), um alle zusammen in einem Schwung zu manipulieren.

Ein rotes, gedrehtes Rechteck in ausgewähltem Zustand (Steuerelemente sichtbar)
Bild 7. Ein rotes, gedrehtes Rechteck in ausgewähltem Zustand (Steuerelemente sichtbar)

Wenn ihr dem Anwender erlauben wollt, etwas auf dem Canvas herumzuziehen – zum Beispiel ein Bild –, müsst ihr lediglich den Canvas initialisieren und ihm ein Objekt hinzufügen. Es ist kein weiteres Konfigurieren oder Einstellen notwendig.

Zur Kontrolle dieser Interaktivität könnt ihr Fabrics Boole'sche Eigenschaft selection in Zusammenhang mit dem Canvas-Objekt verwenden und sie mit der Boole'schen Eigenschaft selectable für einzelne Objekte kombinieren:

 

var canvas = new fabric.Canvas('c');
...
canvas.selection = false; // Gruppierungsmšglichkeit deaktivieren
rect.set('selectable', false); // Ein Objekt nicht auswŠhlbar machen

Was aber, wenn ihr gar keine Interaktivitätsebene wollt? In diesem Fall könnt ihr statt fabric.Canvas einfach fabric.StaticCanvas schreiben. Die Syntax zur Initialisierung ist identisch zu der von fabric.Canvas:

var staticCanvas = new fabric.StaticCanvas('c');
staticCanvas.add(
  new fabric.Rect({
    width: 10, height: 20,
    left: 100, top: 100,
    fill: 'yellow',
    angle: 30
  }));

Dies erstellt quasi eine "Light"-Version von Canvas, ohne jeglicher Logik zum Behandeln von Ereignissen. Ihr könnt immernoch mit dem Objektmodell arbeiten, mit dem ihr Objekte hinzufügt, verändert oder entfernt, sowie die Einstellungen des Canvas selbst ändern könnt. All das funktioniert noch, nur das Behandeln von Ereignissen ist nicht mehr möglich.

Gleich behandle ich in diesem Artikel die Custom-Build-Möglichkeit. Ihr seht dann, dass ihr sogar eine abgespeckte Version von Fabric erstellen könnt, wenn StaticCanvas alles ist, was ihr braucht. Dies könnte eine nette Alternative sein, wenn ihr so etwas wie Diagramme oder Bilder ohne Interaktivität, aber mit Filter für eure Anwendung braucht.

Bitte beachte unsere Community-Richtlinien

Eine Reaktion
fimbim

Die Liste der Github-Links führt zu 404ern. Ansonsten ne sehr geile Library!

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.