Wie kann ich mit FabricJS überprüfen, ob ein IText-Objekt ein bestimmtes Stilattribut hat?-js-Tutorial-php.cn

Wie kann ich mit FabricJS überprüfen, ob ein IText-Objekt ein bestimmtes Stilattribut hat?

王林

Freigeben： 2023-08-24 23:09:10

nach vorne

1393 Leute haben es durchsucht

如何使用 FabricJS 检查 IText 对象是否具有特定的样式属性？

In diesem Tutorial erfahren Sie, wie Sie mit FabricJS überprüfen, ob ein IText-Objekt ein bestimmtes Stilattribut hat. 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 styleHas-Methode verwenden, um zu prüfen, ob ein IText-Objekt ein bestimmtes Stilattribut hat.

Grammatik

styleHas(property: String, lineIndex: Number): Boolean

Nach dem Login kopieren

Parameter

property – Dieser Parameter akzeptiert einen String, der die Eigenschaft darstellt, die überprüft werden muss.
ineIndex – Dieser Parameter akzeptiert eine Number, die den Index angibt, bei dem der Stil überprüft werden soll.

Beispiel 1

Verwenden Sie die styleHas-Methode

Sehen wir uns ein Codebeispiel an, um die protokollierte Ausgabe bei Verwendung der styleHas-Methode zu sehen. In diesem Beispiel prüfen wir, ob das Füllattribut für das Zeichen im Index der Zeile 0 vorhanden ist. Da der Wert vorhanden ist, wird in der Konsole ein wahrer Wert zurückgegeben.

<!DOCTYPE html>
<html>
<head>
   <!-- Adding the Fabric JS Library-->
   <scrip src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
   <h2>Using the styleHas method</h2>
   <p>You can open console from dev tools and see that a true 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 ", {
         width: 300,
         left: 50,
         top: 70,
         fontSize: 30,
         fill: "red",
         backgroundColor: "#fedad2",
         angle: 25,
         styles: {
            0: {
               1: {
                  fill: "blue",
                  fontStyle: "bold",
               },
            },
         },
      });

      // Using the styleHas method
      console.log("Is fill property present? : ", itext.styleHas("fill", 0));

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

Nach dem Login kopieren

Beispiel 2

Verwenden Sie die styleHas-Methode, um nach nicht vorhandenen Werten zu suchen

Sehen wir uns ein Codebeispiel an, um zu sehen, wie die protokollierte Ausgabe aussieht, wenn mit der styleHas-Methode nach einem nicht vorhandenen Wert gesucht wird. In diesem Beispiel prüfen wir, ob das Attribut „fontSize“ für das Zeichen in Zeile 0 vorhanden ist. Da es nicht existiert, wird ein Fehlerwert 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 styleHas method to check for a value that is not present</h2>
   <p>You can open console from dev tools and see that a false 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 ", {
         width: 300,
         left: 50,
         top: 70,
         fontSize: 30,
         fill: "red",
         backgroundColor: "#fedad2",
         angle: 25,
         styles: {
            0: {
               1: {
                  fill: "blue",
                  fontStyle: "bold",
               },
            },
         },
      });

      // Using the styleHas method
      console.log(
         "Is font size property present? : ",
          itext.styleHas("fontSize", 0)
      );

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

Nach dem Login kopieren

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