Wie kann ich mithilfe von FabricJS überprüfen, ob ein IText-Objekt gefüllt ist?-js-Tutorial-php.cn

Wie kann ich mithilfe von FabricJS überprüfen, ob ein IText-Objekt gefüllt ist?

王林

Freigeben： 2023-09-12 18:13:02

nach vorne

1252 Leute haben es durchsucht

如何使用 FabricJS 检查 IText 对象是否已填充？

In diesem Tutorial erfahren Sie, wie Sie mithilfe von FabricJS überprüfen, ob ein IText-Objekt gefüllt ist. 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 mit der Methode hasFill prüfen, ob das IText-Objekt gefüllt ist.

Grammatik

hasFill()

Nach dem Login kopieren

Beispiel 1

Verwenden Sie die hasFill-Methode, wenn Sie transparente Füllung verwenden

Sehen wir uns ein Codebeispiel an, um die protokollierte Ausgabe zu sehen, wenn die Methode hasFill mit transparenter Füllung verwendet wird. Die Methode hasFill gibt true zurück, wenn das Objekt eine Füllfarbe hat. In diesem Beispiel setzen wir die Füllfarbe auf „Transparent“. Daher ist die protokollierte Ausgabe falsch.

<!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 hasFill method when transparent fill is used</h2>
   <p>You can open console from dev tools and see that the logged output is false</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: "transparent",
            fontStyle: "bold",
            backgroundColor: "#f8f4ff",
            stroke: "black",
         }
      );

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

      // Using the hasFill method
      console.log("The value is: ", itext.hasFill());
   </script>
</body>
</html>

Nach dem Login kopieren

Beispiel 2

Verwenden Sie die hasFill-Methode

Sehen wir uns ein Codebeispiel an, um die protokollierte Ausgabe bei Verwendung der Methode hasFill zu sehen. Da das IText-Objekt in diesem Fall eine Füllfarbe hat, wird true 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 hasFill 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 an itext object
         var itext = new fabric.IText(
         "Add Sample Text HereLorem ipsum dolor sit amet",{
            width: 300,
            left: 60,
            top: 70,
            fill: "#b666d2",
            fontStyle: "bold",
            backgroundColor: "#f8f4ff",
            stroke: "black",
         }
      );

      // Using the hasFill method
      console.log("The value is: ", itext.hasFill());

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

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWie kann ich mithilfe von FabricJS überprüfen, ob ein IText-Objekt gefüllt ist?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!