Heim > Artikel > Web-Frontend > FabricJS – Wie ändere ich das Format der URL-Zeichenfolge eines Linienobjekts?

FabricJS – Wie ändere ich das Format der URL-Zeichenfolge eines Linienobjekts?

王林nach vorne: 2023-08-30 10:13:05657Durchsuche

FabricJS – 如何更改 Line 对象的 URL 字符串的格式？

In diesem Tutorial lernen wir, wie man das Format einer URL-Zeichenfolge eines Line-Objekts mit FabricJS ändert. Das Linienelement ist eines der Grundelemente, die in FabricJS bereitgestellt werden. Es wird verwendet, um gerade Linien zu erstellen. Da Linienelemente geometrisch eindimensional sind und keine Innenräume enthalten, werden sie nie gefüllt. Wir können ein Linienobjekt erstellen, indem wir eine Instanz von Fabric.Line erstellen, die x- und y-Koordinaten der Linie angeben und sie der Leinwand hinzufügen. Um das Format der URL-Zeichenfolge eines Linienobjekts zu ändern, verwenden wir die Formateigenschaft.

Grammatik

toDataURL({ format: String }: Object): String

Parameter

Options (optional) – Dieser Parameter ist ein Objekt, das zusätzliche Anpassungen an der URL-Darstellung des Line-Objekts ermöglicht. Höhe, Masse, Multiplikator und viele andere Eigenschaften können mit diesem Parameter geändert werden, von dem Format eine Eigenschaft ist.

Wahltaste

format – Diese Eigenschaft akzeptiert einen String-Wert, der es uns ermöglicht, das Format des Ausgabebildes zu definieren. Akzeptierte Werte sind „jpeg“ oder „png“. Der Standardwert ist „png“.

Verwenden Sie nicht den Standardwert des Attributs format

Beispiel

Sehen wir uns ein Codebeispiel an, um die protokollierte Ausgabe zu sehen, wenn die toDataURL-Methode ohne Verwendung des Attributs format verwendet wird. Sobald wir die Konsole über die Entwicklungstools öffnen, können wir die URL-Darstellung des Line-Objekts sehen. Wir können die URL kopieren und in die Adressleiste eines neuen Tabs einfügen, um die endgültige Ausgabe zu sehen. Da wir das Format des Bildes nicht angegeben haben, basiert es auf dem festgelegten Standardwert „png“.

<!DOCTYPE html>
<html>
<head>
   <!-- Adding the Fabric JS Library-->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
   <h2>Default value without using the format property</h2>
   <p>
   You can open console from dev tools and see that the URL representation of the Line object has a "png" format by default
   </p>
   <canvas id="canvas"></canvas>
   <script>
      
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      
      // Initiate a Line object
      var line = new fabric.Line([200, 100, 100, 40], {
         stroke: "blue",
         strokeWidth: 20,
         angle: 70,
      });
      
      // Add it to the canvas
      canvas.add(line);
      
      // Using the toDataURL method
      console.log(line.toDataURL());
   </script>
</body>
</html>

Verwenden Sie die Methode toDataURL und das Formatattribut

Beispiel

Sehen wir uns ein Codebeispiel an, um zu sehen, wie ein Line-Objekt aussieht, wenn die Methode toDataURL mit der Formateigenschaft verwendet wird. In diesem Fall können wir das Format des endgültigen Bildes angeben. Da der hier zugewiesene Wert „jpeg“ ist, liegt das endgültige Bild im „jpeg“-Format vor.

<!DOCTYPE html>
<html>
<head>
   <!-- Adding the Fabric JS Library-->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
   <h2>Using the toDataURL method along with format property</h2>
   <p>
   You can open console from dev tools and see that the URL representation of the Line object has a "jpeg" format now
   </p>
   <canvas id="canvas"></canvas>
   <script>
      
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      
      // Initiate a Line object
      var line = new fabric.Line([200, 100, 100, 40], {
         stroke: "blue",
         strokeWidth: 20,
         angle: 70,
      });
      
      // Add it to the canvas
      canvas.add(line);
      
      // Using the toDataURL method
      console.log(line.toDataURL({format: "jpeg"}));
   </script>
</body>
</html>

Das obige ist der detaillierte Inhalt vonFabricJS – Wie ändere ich das Format der URL-Zeichenfolge eines Linienobjekts?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Implementierung eines binären Suchbaums in JavaScriptNächster Artikel：Implementierung eines binären Suchbaums in JavaScript

In Verbindung stehende Artikel

Mehr sehen