Wie konvertiere ich ein IText-Objekt mit FabricJS in eine datenähnliche URL-Zeichenfolge?-js-Tutorial-php.cn

Wie konvertiere ich ein IText-Objekt mit FabricJS in eine datenähnliche URL-Zeichenfolge?

王林

Freigeben： 2023-09-14 13:21:16

nach vorne

1286 Leute haben es durchsucht

如何使用 FabricJS 将 IText 对象转换为类似数据的 URL 字符串？

In diesem Tutorial lernen wir, wie man mit FabricJS ein IText-Objekt in einen datenähnlichen URL-String umwandelt. 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 mit der toDataURL-Methode ein IText-Objekt in einen datenähnlichen URL-String konvertieren.

Grammatik

toDataURL(options: Object): String

Nach dem Login kopieren

Parameter

Optionen (optional) – Dieser Parameter ist ein Objekt, das zusätzliche Anpassungen für die URL-Darstellung des IText-Objekts bereitstellt. Mit diesem Parameterformat können Qualität, Multiplikator und viele andere Eigenschaften geändert werden.

Beispiel 1

Verwenden Sie nicht den Standardwert der toDataURL-Methode

Sehen wir uns ein Codebeispiel an, um zu sehen, wie ein IText-Objekt aussieht, ohne die toDataURL-Methode zu verwenden. Bei Verwendung der toDataURL-Methode wird die URL-Darstellung des IText-Objekts zurückgegeben. In diesem Beispiel erstellen wir ein itext-Objekt und weisen ihm verschiedene Eigenschaften wie Strich, Füllung, Schatten usw. zu. Da wir jedoch nicht die toDataURL-Methode verwenden, können wir uns nicht anstelle des Standardwerts des itext-Objekts in der Konsole anmelden.

<!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 toDataURL method</h2>
   <p>You can open console from dev tools and see the logged output</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: 50,
            top: 70,
            fill: "#c70039",
            backgroundColor: "#c1dfed",
            stroke: "#c70039",
            originX: "center",
            shadow: shadow,
         }
      );

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

      // Console logging the itext object
      console.log("The itext object is as follows: ", itext);
   </script>
</body>
</html>

Nach dem Login kopieren

Beispiel 2

Verwenden Sie die toDataURL-Methode

Sehen wir uns ein Codebeispiel an, um die protokollierte Ausgabe bei Verwendung der toDataURL-Methode zu sehen. 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.

<!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</h2>
   <p> You can open console from dev tools and see the output URL. You can copy that and paste it in the address bar of a new tab to see that the image </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: 50,
            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>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWie konvertiere ich ein IText-Objekt mit FabricJS in eine datenähnliche URL-Zeichenfolge?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!