Maison > Article > interface Web > Comment identifier le type d'instance Image à l'aide de FabricJS ?

Comment identifier le type d'instance Image à l'aide de FabricJS ?

WBOYavant: 2023-09-08 12:29:02949parcourir

Comment identifier le type dinstance Image à laide de FabricJS ?

Dans ce tutoriel, nous apprendrons comment identifier le type d'instance Image dans FabricJS. Nous pouvons créer un objet Image en créant une instance de fabric.Image. Puisqu'il s'agit de l'un des éléments de base de FabricJS, nous pouvons également le personnaliser facilement en appliquant des propriétés telles que l'angle, l'opacité, etc. Pour identifier le type d'une instance Image, nous utilisons la méthode isType.

Grammaire

isType(type: String): Boolean

Paramètres

type - Ce paramètre accepte une String qui spécifie le type que nous voulons vérifier.

Utilisez la méthode isType

Exemple

Regardons un exemple de code pour voir la sortie enregistrée lors de l'utilisation de la méthode isType. La méthode isType renvoie une valeur vraie ou fausse, selon que le type de l'instance correspond au type que nous voulons vérifier. Dans ce cas, puisque les types correspondent, une valeur vraie est renvoyée.

<!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="Comment identifier le type d'instance Image à l'aide de 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>

Utilisez la méthode isType

avec différentes valeurs

Exemple

Dans cet exemple, nous utilisons isType pour vérifier si le type de cercle spécifié est le même que l'instance d'image. Ici, comme ils ne sont pas identiques, une valeur d'erreur est renvoyée.

<!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="Comment identifier le type d'instance Image à l'aide de 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>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

String 对象 fabric

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Magic Strings : problèmes en JavaScriptArticle suivant：Magic Strings : problèmes en JavaScript

Articles Liés

Voir plus