Heim > Artikel > Web-Frontend > Wie erstelle ich eine Leinwand mit FabricJS?
Wie erstelle ich eine Leinwand mit FabricJS?
- 王林nach vorne
- 2023-08-22 22:01:02759Durchsuche
In diesem Artikel erstellen wir eine Leinwand mit FabricJS, aber vorher wollen wir verstehen, was eine Leinwand ist. Zum Zeichnen von Grafiken auf Webseiten verfügen wir über eine Web-API namens Canvas API. Diese API eignet sich gut zum Zeichnen grundlegender Formen, es wird jedoch sehr schwierig, Interaktionen hinzuzufügen oder komplexe Formen zu zeichnen. Daher entstand FabricJS, eine Bibliothek, die auf der Canvas-API aufbaut. Um FabricJS verwenden zu können, müssen Sie zunächst einen FabricJS-Canvas erstellen.
Syntax
new fabric.Canvas(element: HTMLElement|String, options: Object)
Parameter
element − Dieser Parameter ist das Element selbst, Sie können document.getElementById() oder Element selbst-ID kommt Get. Der FabricJS-Canvas wird auf diesem Element initialisiert.
options (optional) − Dieser Parameter ist ein Objekt, das eine zusätzliche Anpassung der Leinwand ermöglicht. Mit diesem Parameter können wir verschiedene Eigenschaften der Leinwand wie Farbe, Cursor, Rahmenbreite usw. ändern.
Beispiel 1
ID als String übergeben
Sehen wir uns ein Codebeispiel für die Erstellung einer Leinwand mit FabricJS an. Da FabricJS auf der Canvas-API basiert, erstellen wir ein HTML-Element mit dem
<!DOCTYPE html>
<html>
<head>
<!-- Adding the FabricJS library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js">
</script>
</head>
<body>
<h2>How to create a canvas using FabricJS</h2>
<p>Select an area inside the canvas and you will get a highlighted section.</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a Canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>Beispiel 2
Element als HTMLElement übergeben
Anstatt id direkt an die FabricJS-API zu übergeben und dieses Element dann an die FabricJS-API zu übergeben, können wir das Element mit document.getElementById() abrufen, wie unten gezeigt −
<!DOCTYPE html>
<html>
<head>
<!-- Adding the FabricJS library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js">
</script>
</head>
<body>
<h2>How to create a canvas using FabricJS</h2>
<p>Select an area inside the canvas and you will get a highlighted section.</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a Canvas instance
var element = document.getElementById('canvas');
var canvas = new fabric.Canvas(element);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>Das obige ist der detaillierte Inhalt vonWie erstelle ich eine Leinwand mit FabricJS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!