Wie erstelle ich eine Leinwand mit FabricJS?-js-Tutorial-php.cn

Wie erstelle ich eine Leinwand mit FabricJS?

王林

Freigeben： 2023-08-22 22:01:02

nach vorne

782 Leute haben es durchsucht

Wie erstelle ich eine Leinwand mit FabricJS?

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)

Nach dem Login kopieren

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>

Nach dem Login kopieren

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(&#39;canvas&#39;);
      var canvas = new fabric.Canvas(element);
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
   </script>
</body>
</html>

Nach dem Login kopieren

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!