Heim > Artikel > Web-Frontend > Wie identifiziere ich den Typ der Image-Instanz mithilfe von FabricJS?

Wie identifiziere ich den Typ der Image-Instanz mithilfe von FabricJS?

WBOYnach vorne: 2023-09-08 12:29:02949Durchsuche

In diesem Tutorial erfahren Sie, wie Sie den Typ der Image-Instanz in FabricJS identifizieren. Wir können ein Image-Objekt erstellen, indem wir eine Instanz von fabric.Image erstellen. Da es eines der Grundelemente von FabricJS ist, können wir es auch einfach anpassen, indem wir Eigenschaften wie Winkel, Deckkraft usw. anwenden. Um den Typ einer Image-Instanz zu identifizieren, verwenden wir die Methode isType.

Grammatik

isType(type: String): Boolean

Parameter

type – Dieser Parameter akzeptiert einen String, der den Typ angibt, den wir überprüfen möchten.

Verwenden Sie die isType-Methode

Beispiel

Sehen wir uns ein Codebeispiel an, um die protokollierte Ausgabe bei Verwendung der

isType-Methode zu sehen. Die isType-Methode gibt einen wahren oder falschen Wert zurück, je nachdem, ob der Typ der Instanz mit dem Typ übereinstimmt, den wir überprüfen möchten. Da die Typen übereinstimmen, wird in diesem Fall ein wahrer Wert 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 isType method</h2>
   <p>
      You can open console from dev tools and see that the logged output contains a true value
   </p>
   <canvas id="canvas"></canvas>
   <img  src="https://www.tutorialspoint.com/images/logo.png" id="img1"   style="max-width:90%" / alt="Wie identifiziere ich den Typ der Image-Instanz mithilfe von FabricJS?" >
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      
      // Initiating the image element
      var imageElement = document.getElementById("img1");
      
      // Initiate an Image object
      var image = new fabric.Image(imageElement, {
         top: 50,
         left: 110,
      });
      
      // Add it to the canvas
      canvas.add(image);
      
      // Using isType method
      console.log(
         "Is the specified type identical to an image instance? : ",
         image.isType("image")
      );
   </script>
</body>
</html>

Verwenden Sie die Methode

isType mit unterschiedlichen Werten Beispiel

In diesem Beispiel verwenden wir

isType

, um zu prüfen, ob der angegebene Kreistyp mit der Bildinstanz übereinstimmt. Da sie nicht gleich sind, wird hier 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 isType method with a different value</h2>
   <p>
      You can open console from dev tools and see that the logged output contains a false value
   </p>
   <canvas id="canvas"></canvas>
   <img  src="https://www.tutorialspoint.com/images/logo.png" id="img1"   style="max-width:90%" / alt="Wie identifiziere ich den Typ der Image-Instanz mithilfe von FabricJS?" >
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      
      // Initiating the image element
      var imageElement = document.getElementById("img1");
      
      // Initiate an Image object
      var image = new fabric.Image(imageElement, {
         top: 50,
         left: 110,
      });
      
      // Add it to the canvas
      canvas.add(image);
      
      // Using isType method
      console.log(
         "Is the specified type identical to an image instance? : ",
         image.isType("circle")
      );
   </script>
</body>
</html>

Das obige ist der detaillierte Inhalt vonWie identifiziere ich den Typ der Image-Instanz mithilfe von FabricJS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

String 对象 fabric

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Magic Strings: Probleme in JavaScriptNächster Artikel：Magic Strings: Probleme in JavaScript

In Verbindung stehende Artikel

Mehr sehen