Fabric.js ist eine Bibliothek, die das Schreiben von Canvas-Programmen vereinfacht. Fabric.js stellt Canvas das fehlende Objektmodell, den SVG-Parser, die Interaktivität und eine ganze Reihe weiterer unverzichtbarer Tools zur Verfügung. Da es sich bei Fabric.js um ein fremdes Framework handelt, ist die offizielle API unübersichtlich und zahlreich, und die meisten relevanten Dokumente sind auf Englisch und ihre Anzahl ist gering. Daher soll dieser Artikel Anfängern helfen, schnell mit Fabric.js zu beginnen Projekt und genießen Sie den Prozess des Zeichnens von Canvas.
Warum Fabric.js verwenden?Canvas bietet eine gute Canvas-Funktion, aber die API ist nicht benutzerfreundlich genug. Das Zeichnen einfacher Grafiken ist eigentlich in Ordnung, aber es ist nicht so praktisch, einige komplexe Grafiken zu zeichnen und einige komplexe Effekte zu schreiben. Zu diesem Zweck wurde Fabric.js entwickelt. Es verwendet hauptsächlich Objekte zum Schreiben von Code.
Was Fabric.js kann
Einführung von Fabric.js in das Vue-Projekt
Vorausgesetzt, Sie verwenden ES6 und Webpack in Ihrem Projekt, können Sie Fabric.js wie folgt verwenden:
1. In der Befehlszeile:
npm Stoff installieren (oder Garn Stoff hinzufügen)
2. Fügen Sie es in die .vue Datei ein
{ Stoff } aus „Stoff“ importieren 3. Beginnen Sie Ihre Fabric.js-Reise im mounted: Lebenszyklus einer einzelnen Datei in .vue
Hinweis: Das Standard-Fabric-NPM-Modul erzeugt recht große Pakete in Fabric.js, die Sie möglicherweise nicht benötigen. In diesem Fall können Sie hier oder in der Befehlszeile Ihre eigene Version erstellen.
Zeichnen Sie Grafiken Zeichnen Sie normale Grafiken1. Leinwand deklarieren
var canvas =new fabric.Canvas('main');2. Zeichnen Sie Grafiken
var rect = new fabric.Rect({ left:100,//Abstand von der linken Seite der Leinwand, in Pixel top:100,//Abstand von der Oberseite der Leinwand fill:'red',//Breite der Füllfarbe :30 ,//Die Breite des Quadrats height:30//Die Höhe des Quadrats});3. Fügen Sie der Leinwand Grafiken hinzu
canvas.add(rect);
Weitere Regelgrafiken:
var rect = new fabric.Rectvar circle = new fabric.Circlevar triangle = new fabric.TriangleVerwenden Sie die Pfadzeichnung: Zeichnen Sie mithilfe der Bewegung von Punkten und Linien. Zeichnen Sie sehr komplexe Formen durch die Anwendung von Linien, Kurven und Bögen.
In der Methode fabric.Path() stellt M den Bewegungsbefehl dar, und dieses M 00 stellt das Bewegen des Pinsels zu den Punktkoordinaten (0,0) dar.
L stellt eine Linie dar, L 200 100 bedeutet, dass mit einem Stift eine Linie von (0,0)-Koordinaten zu (200,100)-Koordinaten gezeichnet wird. z bedeutet, den Pfad der Form zu schließen.
Nachdem wir das Dreieck gezeichnet haben, können wir die Methode set() verwenden, um Position, Farbe, Winkel, Transparenz und andere Attribute des Dreiecks festzulegen.
Der spezifische Code lautet wie folgt:
var path = new fabric.Path('M 0 0 L 200 100 L 170 200 z');path.set({ left: 120, top: 120,fill:'red' });canvas.add(path); Operationen an BildernHTML-Bild einfügen
<body> <canvas id=canvas width='800' height='800'></canvas> <img src=./2.png id=img> </body> ---------- ----------- var canvas = new fabric.Canvas('canvas');//Deklarieren Sie die Leinwand var imgElement = document.getElementById('img');//Deklarieren Sie unser Bild var imgInstance = new fabric.Image(imgElement,{ //Stellen Sie die Bildposition und das Erscheinungsbild ein left:100, top:100, width:200, height:100, angle:30//Legen Sie den Drehwinkel der Grafik im Uhrzeigersinn fest}); (imgInstance) ;//Zur Leinwand hinzufügenJavaScript-Bild einfügen
var canvas = new fabric.Canvas('canvas'); fabric.Image.fromURL('./2.png', function(oImg) { oImg.scale(0.1);//Das Bild wird um das Zehnfache der Leinwand verkleinert. add(oImg }); Interaktion Interaktion mit der Leinwand canvas.add(imgInstance);//Zur Leinwand hinzufügen var canvas = new fabric.Canvas('canvas'); canvas.on('mouse:down', function(options) { console.log(options.e.clientX , options.e.clientY) })Hinweis: Häufig verwendete Überwachungsereignisse sind wie folgt:
mouse:down : wenn die Maus gedrückt wirdmouse:move : wenn sich die Maus bewegtmouse:up : Wenn die Maus angehoben wirdOperationen an Objekten auf der Leinwand
var canvas = new fabric.Canvas('canvas'); var rect = new fabric.Rect({ width: 100, height: 50, fill: 'green' }); //Wählen Sie das Listening-Ereignis aus console.log('selected aRechteck'); var circle = new fabric.Circle({ radius: 75, fill: 'blue'); }); Circle.on('selected', function() { console.log('selected a Circle'); });Hinweis: Häufig verwendete Überwachungsereignisse sind wie folgt:
after:render : nachdem die Leinwand neu gezeichnet wurdeobject:selected : Das Objekt ist ausgewähltobject:moving : Objekt bewegt sichobject:rotating : Das Objekt wird gedrehtobject:added : Das Objekt wird hinzugefügtobject:removed : Das Objekt wird entferntnew fabric.Group(): akzeptiert zwei Parameter: ein Array bestehend aus den Namen der zu kombinierenden Objekte und den gemeinsamen Attributen der kombinierten Objekte.
var canvas = new fabric.Canvas('canvas'); var circle = new fabric.Circle({//Zeichne einen Kreis, Radius: 100, Füllung: '#f00', SkalaY: 0,5, UrsprungX: 'Mitte',// Passen Sie die X-Achsenkoordinate des Mittelpunkts an. originY: 'center'//Passen Sie die Y-Achsenkoordinate des Mittelpunkts an}); var text = new fabric.Text('Hello World', {//Draw text fontSize: 30, originX: 'center', originY: 'center' }) //Combine var group = new fabric.Group([circle, text], { left: 150, top: 100, angle: 10 }) canvas.add ( Gruppe); Serialisierung und DeserialisierungSerialisierung
var canvas = new fabric.Canvas('canvas'); var rect = new fabric.Rect({ width: 100, height: 100, fill: 'red' }); .stringify(canvas.toJSON()));Deserialisierung
var canvas = new fabric.Canvas('canvas'); canvas.loadFromJSON('{objects:[{type:rect,left:50,top:50,width:20,height:20,fill:green,overlayFill:null }')SVG
var canvas = new fabric.Canvas('canvas'); var rect = new fabric.Rect({ width: 100, height: 100, fill: 'red' }); ;Referenzdokumentation: http://fabricjs.com/articles/
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.