Wie erhalte ich mit FabricJS die aktuelle Farbe des Zeichens am Cursor in IText?-js-Tutorial-php.cn

Wie erhalte ich mit FabricJS die aktuelle Farbe des Zeichens am Cursor in IText?

WBOY

Freigeben： 2023-09-13 15:37:02

nach vorne

1176 Leute haben es durchsucht

Wie erhalte ich mit FabricJS die aktuelle Farbe des Zeichens am Cursor in IText?

In diesem Tutorial erfahren Sie, wie Sie mithilfe von FabricJS die aktuelle Farbe des Zeichens am Cursor in IText ermitteln. 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 Farbe des Cursorzeichens mit der Methode getCurrentCharColor ermitteln. Wenn das itext-Objekt jedoch ein Muster, einen Farbverlauf oder eine Füllung aufweist, wird die Farbe des Zeichens am aktuellen Cursor zurückgegeben. Die Standardfüllfarbe für itext-Objekte ist rgb(0,0,0), was der Farbe „Schwarz“ entspricht. Wenn daher nichts angegeben wird, wird rgb(0,0,0) als aufgezeichnete Ausgabe zurückgegeben.

Grammatik

getCurrentCharColor(): String | fabric.Gradient | fabric.Pattern

Nach dem Login kopieren

Beispiel 1

Verwenden Sie die Methode getCurrentCharColor, um den Standardwert abzurufen

Schauen wir uns ein Codebeispiel an, um zu sehen, wie sich die Methode getCurrentCharColor verhält, wenn keine Füllfarbe bereitgestellt wird. Die protokollierte Ausgabe gibt die Standardzeichenfarbe zurück.

<!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 getCurrentCharColor method to get default value</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 an itext object
      var itext = new fabric.IText(
         "Add sample text here.Lorem ipsum dolor sit amet",{
            width: 300,
            left: 60,
            top: 70,
         }
      );

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

      // Using getCurrentCharColor method
      console.log("The current character colour is: ",
      itext.getCurrentCharColor());
   </script>
</body>
</html>

Nach dem Login kopieren

Beispiel 2

Verwenden Sie die getCurrentCharColor-Methode für ein itext-Objekt mit Auffüllung

Sehen wir uns ein Codebeispiel an, um die protokollierte Ausgabe bei Verwendung von Padding zu sehen. Wie wir sehen können, wird die Farbe der Füllung zurückgegeben.

<!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 getCurrentCharColor method for an itext object with fill</h2>
   <p>You can open console from dev tools and see the logged output for fill</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 here.Lorem ipsum dolor sit amet",{
            width: 300,
            left: 60,
            top: 70,
            fill: "red",
         }
      );

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

      // Using getCurrentCharColor method
      console.log(
         "The current character colour is: ",
         itext.getCurrentCharColor()
      );
   </script>
</body>
</html>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWie erhalte ich mit FabricJS die aktuelle Farbe des Zeichens am Cursor in IText?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!