fabricjs Tutorial
Erste Schritte mit fabricjs
Suche…
Bemerkungen
fabric.js ist eine leistungsstarke und recht einfache Javascript-Bibliothek für HTML5-Canvas. Es bietet eine interaktive Plattform für die Arbeit mit der HTML5-Leinwand. Mit Stoff können Sie Objekte / Formen auf der Leinwand von einfachen geometrischen Formen bis hin zu komplexen Formen erstellen. Sie können sogar mithilfe von fabric.js mit Bildern arbeiten. fabric.js unterstützt auch Animationen. Es bietet Steuerelemente, um mit Bildern zu arbeiten, z. B. durch Ziehen, Skalieren und Drehen. Es ermöglicht das Gruppieren von Formen / Objekten, die zusammen bearbeitet werden können. Es unterstützt Ereignisse nicht nur auf das Canvas-Element, sondern auch auf Objekte. Es bietet sogar die Möglichkeit, die Leinwand in SVG oder JSON zu serialisieren und bei Bedarf wiederzuverwenden. Es unterstützt sogar das Ausführen von Fabric unter Node.js mithilfe von Jsdom- und Node-Canvas-Bibliotheken.
Installation oder Setup
Fabric.js ist wie jede andere JS-Bibliothek nur für die Leinwand spezifisch. Einfach einzurichten und loszulegen. Alles, was Sie tun müssen, ist, die fabric.js von HERE herunterzuladen und wie jedes andere JS-Archiv in Ihr Projekt aufzunehmen, zum Beispiel so, wie Sie es für jQuery tun. Dann erstellen Sie die html-Datei mit index.html wie folgt:
<head>
<script src="fabric.js"></script>
</head>
<body>
<canvas id="canvas" width="400" height="400" style="border:2px solid #000000</canvas>
<script>
var canvas = new fabric.Canvas('canvas');
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 }));
</script>
</body>
Das src-Attribut im Skript bezieht sich auf eine Datei fabric.js, die sich in demselben Ordner befindet. Sie können sie in einem anderen Ordner ablegen und einen relativen Pfad angeben. Und du bist gut zu gehen. Weitere Informationen über Fabric finden Sie auf der Offcial Page . Hier ist eine sehr einfache Demo
Hallo Welt
<canvas id="c" width="400" height="400"></canvas>
var canvas = new fabric.Canvas("c");
var text = new fabric.Textbox('Hello world From Fabric JS', {
width:250,
cursorColor :"blue",
top:10,
left:10
});
canvas.add(text)
Das Beispiel erstellt einen Text 'Hello world From Fabric JS' Verwendung von fabricjs. Demo