Heim > Artikel > Web-Frontend > Wie begradige ich IText-Objekte mit FabricJS?

Wie begradige ich IText-Objekte mit FabricJS?

王林nach vorne: 2023-08-25 09:09:061421Durchsuche

如何使用 FabricJS 拉直 IText 对象？

In diesem Tutorial lernen wir, wie man IText-Objekte mit FabricJS geraderichtet. 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 IText-Objekte mit der Straighten-Methode begradigen.

Grammatik

straighten(): fabric.Object

Beispiel 1

Wert an die Winkeleigenschaft übergeben, ohne die Straighten-Methode zu verwenden

Sehen wir uns ein Codebeispiel an, um zu sehen, wie ein IText-Objekt aussieht, ohne die Straighten-Methode zu verwenden. Die Methode „Begradigen“ richtet ein Objekt gerade aus, indem sie es von seinem aktuellen Winkel auf einen Winkel von 0, 90, 180 oder 270 dreht, je nachdem, welcher Winkel näher liegt. Die Winkeleigenschaft legt den Drehwinkel des Objekts in Grad fest. Hier geben wir den Winkel mit 45 Grad an. Da wir die Eigenschaft „Begradigen“ jedoch nicht angewendet haben, bleibt der Drehwinkel bei 45 Grad.

<!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>Passing the angle property a value without using the straighten method</h2>
   <p>You can see that the itext object has an angle of 45 degrees</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 an itext object
      var itext = new fabric.IText("Add Sample Text HereLorem ipsum ", {
         width: 300,
         left: 210,
         top: 70,
         fontSize: 30,
         fill: "#b666d2",
         backgroundColor: "#f8f4ff",
         angle: 45,
      });

      // Add it to the canvas
      canvas.add(itext);
   </script>
</body>
</html>

Beispiel 2

Verwenden Sie die Glättungsmethode

Sehen wir uns ein Codebeispiel an, um zu sehen, wie ein IText-Objekt aussieht, wenn die Straighten-Methode in Verbindung mit der Angle-Eigenschaft verwendet wird. Obwohl wir den Drehwinkel auf 45 Grad eingestellt haben, wird unser itext-Objekt begradigt, indem es wieder auf 0 Grad gedreht wird, da wir die Straighten-Methode verwendet haben.

<!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 straighten method</h2>
   <p>You can see that the angle of rotation is 0 degree for the itext object</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 an itext object
      var itext = new fabric.IText("Add Sample Text HereLorem ipsum ", {
         width: 300,
         left: 210,
         top: 70,
         fontSize: 30,
         fill: "#b666d2",
         backgroundColor: "#f8f4ff",
         angle: 45,
      });

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

      // Using the straighten method
      itext.straighten();
   </script>
</body>
</html>

Das obige ist der detaillierte Inhalt vonWie begradige ich IText-Objekte mit FabricJS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

对象 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 kann ich mithilfe von JavaScript überprüfen, ob ein Datum weniger als eine Stunde zurückliegt?Nächster Artikel：Wie kann ich mithilfe von JavaScript überprüfen, ob ein Datum weniger als eine Stunde zurückliegt?

In Verbindung stehende Artikel

Mehr sehen