Heim > Artikel > Web-Frontend > Wie stelle ich den Zoom-Multiplikator in der URL-Zeichenfolge eines IText-Objekts mithilfe von FabricJS ein?

Wie stelle ich den Zoom-Multiplikator in der URL-Zeichenfolge eines IText-Objekts mithilfe von FabricJS ein?

PHPznach vorne: 2023-08-24 17:01:161223Durchsuche

如何使用 FabricJS 在 IText 对象的 URL 字符串中设置缩放倍数？

In diesem Tutorial erfahren Sie, wie Sie mit FabricJS den Zoom-Multiplikator im URL-String eines IText-Objekts festlegen. 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 mithilfe der Eigenschaft multiplier einen Skalierungsmultiplikator in der URL-Zeichenfolge des IText-Objekts festlegen.

Grammatik

toDataURL({ multiplier: Number }: Object): String

Parameter

Optionen (optional) – Dieser Parameter ist ein Objekt, das zusätzliche Anpassungen an der URL-Darstellung des IText-Objekts ermöglicht. Höhe, Qualität, Format und viele andere Eigenschaften können über diesen Parameter geändert werden, wobei der Multiplikator die Eigenschaft ist.

Wahltaste

multiplier – Diese Eigenschaft akzeptiert einen Number-Wert, der den Multiplikator darstellt, mit dem das endgültige IText-Ausgabebild skaliert wird. Der Standardwert ist 1.

Beispiel 1

Verwenden Sie kein Multiplikatorattribut

Sehen wir uns ein Codebeispiel an, um das Ausgabebild zu sehen, wenn das Multiplikatorattribut nicht 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 Multiplikatorattribut nicht verwenden, wird der Standardmultiplikatorwert verwendet, der 1 ist.

<!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>Without using the multiplier property</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: 310,
            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

Multiplikatorattribut verwenden

Sehen wir uns ein Codebeispiel an, um zu sehen, wie das endgültige Ausgabebild eines IText-Objekts aussieht, wenn das Multiplikatorattribut verwendet wird. In diesem Fall haben wir ihm den Wert 2 übergeben. Das endgültige Bild wird also zweimal in x- und y-Richtung skaliert.

<!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 multiplier property</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 the final 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: 310,
            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({ multiplier: 2 }));
   </script>
</body>
</html>

Das obige ist der detaillierte Inhalt vonWie stelle ich den Zoom-Multiplikator in der URL-Zeichenfolge eines IText-Objekts mithilfe von FabricJS ein?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

字符串 number 对象 fabric

Stellungnahme：

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

Vorheriger Artikel：FabricJS – Bestimmen Sie, ob für ein Polygonobjekt zuerst Füllung oder Strich gezeichnet werden soll?Nächster Artikel：FabricJS – Bestimmen Sie, ob für ein Polygonobjekt zuerst Füllung oder Strich gezeichnet werden soll?

In Verbindung stehende Artikel

Mehr sehen