Heim > Artikel > Web-Frontend > Wie erhalte ich mit FabricJS den aktuell ausgewählten Stil im Text?

Wie erhalte ich mit FabricJS den aktuell ausgewählten Stil im Text?

WBOYnach vorne: 2023-08-24 11:33:10875Durchsuche

如何使用 FabricJS 获取文本中当前选择的样式？

In diesem Tutorial erfahren Sie, wie Sie mit FabricJS den Stil des aktuell ausgewählten Texts ermitteln. Wir können Text auf der Leinwand anzeigen, indem wir eine Instanz von Fabric.Text hinzufügen. Es ermöglicht uns nicht nur das Verschieben, Skalieren und Ändern der Textabmessungen, sondern bietet auch zusätzliche Funktionen wie Textausrichtung, Textdekoration und Zeilenhöhe, die über die Eigenschaften textAlign, underline bzw. lineHeight verfügbar sind. Wir können die aktuell ausgewählten Stile auch mit der Methode getSelectionStyles finden.

Grammatik

getSelectionStyles(startIndexopt, endIndexopt, completeopt)

Parameter

startIndexopt – Dieser Parameter akzeptiert eine Nummer, die den Startindex angibt, um den Stil zu erhalten.
endIndexopt – Dieser Parameter akzeptiert eine Number, die den Endindex des Abrufens des Stils darstellt.
completeopt – Dieser Parameter akzeptiert einen Booleschen-Wert, der bestimmt, ob der vollständige Stil erhalten werden soll.

Beispiel 1

Verwenden Sie die getSelectionStyles-Methode

Sehen wir uns ein Codebeispiel an, um die protokollierte Ausgabe bei Verwendung der getSelectionStyles-Methode zu sehen. In diesem Fall werden Stile vom 0. Index bis zum 4. Index angezeigt.

<!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 getSelectionStyles method</h2>
   <p>You can open console from dev tools and see that the value is being displayed in the console</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 text object
      var text = new fabric.Text("Add sampletext here", {
         width: 300,
         fill: "green",
         fontWeight: "bold",
      });

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

      // Using getSelectionStyles method
      console.log("The style is", text.getSelectionStyles(0, 5, true));
   </script>
</body>
</html>

Beispiel 2

Verwenden Sie die getSelectionStyles-Methode und übergeben Sie verschiedene Werte

Sehen wir uns ein Codebeispiel an, um die protokollierte Ausgabe zu sehen, wenn der getSelectionStyles-Methode unterschiedliche Werte übergeben werden. In diesem Fall enthält die aufgezeichnete Ausgabe die Zeichenstile am 4. und 5. Index.

<!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 getSelectionStyles method and passing different values</h2>
   <p>You can open console from dev tools and see that the value is being displayed in the console</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 text object
      var text = new fabric.Text("Add sampletext here", {
         width: 300,
         fill: "green",
         fontWeight: "bold",
         styles: {
            0: {
               5: {
                  fontSize: 55,
                  fill: "blue",
                  fontStyle: "oblique",
               },
               4: {
                  fontSize: 45,
                  fill: "pink",
                  fontWeight: "bold",
               },
            },
         },
      });

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

      // Using getSelectionStyles method
      console.log("The style is", text.getSelectionStyles(4, 6, true));
   </script>
</body>
</html>

Das obige ist der detaillierte Inhalt vonWie erhalte ich mit FabricJS den aktuell ausgewählten Stil im Text?. 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：Verwenden Sie JavaScript, um Ihre Website optisch zu verbessern?Nächster Artikel：Verwenden Sie JavaScript, um Ihre Website optisch zu verbessern?

In Verbindung stehende Artikel

Mehr sehen