Was ist fabricjs? Nutzungsvereinbarung für die Front-End-Zeichnungsbibliothek von Fabricjs (mit Code)

Der Inhalt dieses Artikels befasst sich mit der Frage, was FabricJS ist. Die Verwendung der Front-End-Zeichnungsbibliothek von fabricjs (mit Code) hat einen gewissen Referenzwert. Ich hoffe, dass sie für Sie hilfreich ist.

Im Allgemeinen ist es ein sehr leistungsfähiges Vektorzeichentool. Die offizielle Dokumentation ist ebenfalls umfangreich, aber die Dokumentenorganisation ist nicht sehr gut, und einige API-Designs sind es auch nicht konsistent. Es muss noch geklärt werden.

Canvas

Canvas ist das grundlegendste Objekt. Es ist für das -Tag gekapselt und kann alle intern gezeichneten Objekte verwalten.
Dieses Canvas-Objekt ist kein Element im DOM. Wenn Sie das DOM oder den entsprechenden Kontext steuern müssen, müssen Sie es dennoch selbst erhalten.

canvasElement = document.getElementById(canvasEle);
ctx = canvasElement.getContext("2d");

Beim Erstellen eines neuen Canvas-Objekts können Sie die Breite und Höhe angeben:

canvas = new fabric.Canvas(canvasElement, { 
            selection: false,
            width: 800,
            height:600
});

Die hier angegebene Breite und Höhe überschreibt die in CSS festgelegten Werte. Beachten Sie, dass diese Form der Objekterstellung in Fabric.js grundsätzlich ähnlich ist. Der Klassenname gibt den Typ des zu erstellenden Objekts an. Der erste Parameter sind die erforderlichen Daten und der zweite Parameter sind verschiedene Optionen.

Alle Änderungen an der Leinwand, einschließlich des Hinzufügens und Löschens von Objekten und der Änderung von Objektparametern, müssen die anzuzeigende Rendering-Methode aufrufen:

canvas.renderAll();

Grundform

Geometrische Formen wie Linie, Kreis, Rechteck usw. sind alles Grundformen.

Alle Grundformen verfügen über entsprechende Klassen, sodass ihre Position, Farbe, Größe und andere Stile über die Eigenschaften und Methoden von Klasseninstanzen gesteuert werden können. Alle Klassen erben von der Object-Klasse und verfügen über einige öffentliche Eigenschaften und Methoden.

Erstellen

Das Folgende ist ein Beispiel für das Zeichnen einer Linie (bei zwei Scheitelpunktkoordinaten):

        var line =  new fabric.Line([x1, y1, x2, y2], {
            strokeWidth: 2, //线宽
            stroke: rgba(255,0,0,0.8), //线的颜色
            selectable: false
        });
        canvas.add(line);

Ein Beispiel für das Zeichnen eines Kreises (der Scheitelpunkt und Radius sind in den Optionen), hier sind links und oben tatsächlich (x, y), was der Benennung in CSS entlehnt sein sollte.

        var circle =  new fabric.Circle({
            radius: 2,
            left: left,
            top: top,
            originX: 'center',
            originY: 'center',
            fill: rgba(0,200,0,0.8), 
            strokeWidth: 1,
            stroke: rgba(255,0,0,0.8),
            selectable: false
        };
        canvas.add(circle);

Wie Sie hier sehen können, ähnelt es dem Erstellen einer Leinwand. Der erste Parameter ist spezifisch für diese Klasse (z. B. die Start- und Endpunktkoordinaten, die beim Zeichnen einer geraden Linie übergeben werden), und der zweite Parameter ist eine allgemeine Option. Wenn es keine speziellen Parameter gibt, ist der erste Parameter direkt die allgemeine Option. Alle erstellten Formen können nur angezeigt werden, wenn sie über die Add-Methode von Canvas zur Szene hinzugefügt werden.

Control

left und top sind Eigenschaften jedes Objekts. Die Koordinaten werden durch die Parameter originX und originY bestimmt. Stellen Sie fest, dass sie der Ausrichtung in Textbearbeitungssoftware entsprechen. originX hat drei optionale Werte: links, Mitte, rechts; originY hat auch drei optionale Werte: oben, Mitte, unten.

Ihre schematischen Diagramme sind wie folgt:

http://fabricjs.com/test/misc...

Wenn Sie den Standardursprung jedes einzelnen möchten Das zu seinde Objekt Die Mitte kann wie folgt festgelegt werden:

fabric.Object.prototype.originX = fabric.Object.prototype.originY = 'center'

Breite und Höhe sind ebenfalls Attribute, auf die direkt zugegriffen werden kann. Wie der Name schon sagt, stellen sie Länge und Breite dar (alle Formen haben umlaufende Rechtecke, sodass Sie dies können). Verwenden Sie Länge und Breite, um die Größe zu steuern).

Mit Ausnahme der oben genannten Attribute, auf die direkt zugegriffen werden kann, müssen die meisten Attribute mit der get/set-Methode gelesen und geschrieben werden, wie zum Beispiel:

line.left = pointer.x;
line.top = pointer.y;
line.set('stroke', startColor);
line.set('height', 20);

Einige Artikel im Internet schreiben Zeilen .Stroke=Color, oder Formen wie line.setProperty('Stroke',Color) sind ungültig und können Ausdrücke früherer Versionen sein.

Image

Image ähnelt anderen Formen und ist eine Unterklasse von Object. Der größte Unterschied besteht darin, dass das Laden von Bilddateien asynchron erfolgt, also die Folge to Image-Vorgänge müssen in Rückrufen abgeschlossen werden.

var bkImage = fabric.Image.fromURL(imgUrl,function(img) {
    canvas.add(img);
}

Verwandte Empfehlungen:

So verwenden Sie die Zeichenbibliothek plotly.js

VML-Zeichenbrett ④ Vereinfachte Serverseite- -server.php, server.asp

Das obige ist der detaillierte Inhalt vonWas ist fabricjs? Nutzungsvereinbarung für die Front-End-Zeichnungsbibliothek von Fabricjs (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!