Heim > Artikel > Web-Frontend > Wie ändere ich das Format der URL-Zeichenfolge eines IText-Objekts mit FabricJS?

Wie ändere ich das Format der URL-Zeichenfolge eines IText-Objekts mit FabricJS?

WBOYnach vorne: 2023-09-07 12:45:02481Durchsuche

In diesem Tutorial erfahren Sie, wie Sie das Format einer URL-Zeichenfolge eines IText-Objekts mithilfe von FabricJS ändern. Die IText-Klasse wurde in FabricJS Version 1.4 eingeführt, die Fabric.Text erweitert und zum Erstellen von IText-Instanzen verwendet wird. IText-Instanzen geben uns die Freiheit, ohne zusätzliche Konfiguration neuen Text auszuwählen, auszuschneiden, einzufügen oder hinzuzufügen. Es gibt auch verschiedene unterstützte Tastenkombinationen und Maus-/Touch-Kombinationen, um Text interaktiv zu gestalten, die in Text nicht verfügbar sind.

Mit der auf IText basierenden Textbox können wir jedoch die Größe des Textrechtecks ändern und es automatisch umbrechen. Dies ist bei IText nicht der Fall, da sich die Höhe nicht anhand von Zeilenumbrüchen anpasst. Wir können IText-Objekte mithilfe verschiedener Eigenschaften manipulieren. Ebenso können wir die Formateigenschaft verwenden, um das Format der URL-Zeichenfolge des IText-Objekts zu ändern.

Grammatik

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

Parameter

Optionen (optional) – Dieser Parameter ist ein Objekt, das zusätzliche Anpassungen für die URL-Darstellung des IText-Objekts bereitstellt. Höhe, Masse, Multiplikator und viele andere Eigenschaften können mit diesem Parameter geändert werden, wobei Format die 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“.

Beispiel 1

Verwenden Sie nicht den Standardwert des Formatattributs

Sehen wir uns ein Codebeispiel an, um die protokollierte Ausgabe zu sehen, wenn die toDataURL-Methode ohne Verwendung des Formatattributs verwendet wird. Sobald wir die Konsole über die Entwicklungstools öffnen, können wir die URL-Darstellung des IText-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 IText 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 shadow object
      var shadow = new fabric.Shadow({
         blur: 25,
         color: "grey",
         offsetX: 12,
         offsetY: 15,
      });

      // Initiate an itext object
      var itext = new fabric.IText(
         "Add sample text here.Lorem ipsum dolor sit amet consectetur adipiscing.",{
            width: 300,
            left: 60,
            top: 70,
            fill: "#c70039",
            backgroundColor: "#c1dfed",
            stroke: "#c70039",
            originX: "center",
            shadow: shadow,
         }
      );

      // Add it to the canvas
      canvas.add(itext);

      // Using the toDataURL method
      console.log(itext.toDataURL());
   </script>
</body>
</html>

Beispiel 2

Verwenden Sie die toDataURL-Methode und das Formatattribut

Sehen wir uns ein Codebeispiel an, um zu sehen, wie ein IText-Objekt aussieht, wenn die toDataURL-Methode 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 IText 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 shadow object
      var shadow = new fabric.Shadow({
         blur: 25,
         color: "grey",
         offsetX: 12,
         offsetY: 15,
      });

      // Initiate an itext object
      var itext = new fabric.IText(
         "Add sample text here.Lorem ipsum dolor sit amet consectetur adipiscing.",{
            width: 300,
            left: 60,
            top: 70,
            fill: "#c70039",
            backgroundColor: "#c1dfed",
            stroke: "#c70039",
            originX: "center",
            shadow: shadow,
         }
      );

      // Add it to the canvas
      canvas.add(itext);

      // Using the toDataURL method
      console.log(itext.toDataURL({format: "jpeg"}));
   </script>
</body>
</html>

Das obige ist der detaillierte Inhalt vonWie ändere ich das Format der URL-Zeichenfolge eines IText-Objekts mit FabricJS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

String format 字符串对象 fabric

Stellungnahme：

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

Vorheriger Artikel：Wie lege ich einen benutzerdefinierten Schlüssel fest, um die einheitliche Skalierung auf der FabricJS-Leinwand zu aktivieren/deaktivieren?Nächster Artikel：Wie lege ich einen benutzerdefinierten Schlüssel fest, um die einheitliche Skalierung auf der FabricJS-Leinwand zu aktivieren/deaktivieren?

In Verbindung stehende Artikel

Mehr sehen