Wie entferne ich die aktuelle Objektumwandlung aus der URL-Zeichenfolge eines IText-Objekts mithilfe von FabricJS?-js-Tutorial-php.cn

Wie entferne ich die aktuelle Objektumwandlung aus der URL-Zeichenfolge eines IText-Objekts mithilfe von FabricJS?

王林

Freigeben： 2023-09-13 19:09:04

nach vorne

1242 Leute haben es durchsucht

如何使用 FabricJS 删除 IText 对象的 URL 字符串中的当前对象转换？

In diesem Tutorial erfahren Sie, wie Sie mithilfe von FabricJS die aktuelle Objekttransformation (Skalierung, Winkel, Spiegelung, Neigung) aus der URL-Zeichenfolge eines IText-Objekts entfernen. 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 Eigenschaft withoutTransform verwenden, um die Transformation des aktuellen Objekts in der URL-Zeichenfolge des IText-Objekts zu entfernen.

Grammatik

toDataURL({ withoutTransform: Boolean }: Object): String

Nach dem Login kopieren

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 mit diesem Parameter geändert werden, wobei withoutTransform eine Eigenschaft ist.

Wahltaste

withoutTransform – Diese Eigenschaft akzeptiert einen booleschen Wert, der es uns ermöglicht, die aktuelle Objekttransformation loszuwerden. Wenn Sie ihm einen wahren Wert übergeben, gibt es im endgültigen Ausgabebild keine Skalierung, keinen Winkel, keine Drehung oder Neigung.

Beispiel 1

Verwenden Sie das withoutTransform-Attribut und übergeben Sie ihm einen falschen Wert

Sehen wir uns ein Codebeispiel an, um das Ausgabebild zu sehen, wenn ein falscher Wert an die Eigenschaft withoutTransform übergeben 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. In diesem Beispiel übergeben wir dem IText-Objekt eine ScaleY-Eigenschaft, die den vertikalen Skalierungsfaktor angibt. Unsere Ausgabe wird also vertikal skaliert. Da wir jedoch auch einen falschen Wert an die Eigenschaft withoutTransform übergeben haben, enthält unser endgültiges Ausgabebild weiterhin die Eigenschaft scaleY.

<!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 withoutTransform property and passing it a false value</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 final image contains vertical scaling </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,
            scaleY: 2,
         }
      );

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

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

Nach dem Login kopieren

Beispiel 2

Verwenden Sie das withoutTransform-Attribut und übergeben Sie ihm einen wahren Wert

Sehen wir uns ein Codebeispiel an, um zu sehen, wie das endgültige Ausgabebild eines IText-Objekts aussieht, wenn die Eigenschaft withoutTransform verwendet und ihr ein wahrer Wert übergeben wird. In diesem Fall enthält unser endgültiges Ausgabebild keine Objekttransformationen.

<!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 withoutTransform property and passing it a true value</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 final image does not contain vertical scaling </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,
            scaleY: 2,
         }
      );

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

      // Using the toDataURL method with withoutTransform
      console.log(
         itext.toDataURL({ withoutTransform: true })
      );
   </script>
</body>
</html>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWie entferne ich die aktuelle Objektumwandlung aus der URL-Zeichenfolge eines IText-Objekts mithilfe von FabricJS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!