Maison >interface Web >js tutoriel >Comment trouver la complexité d'une instance Image à l'aide de FabricJS ?

Comment trouver la complexité d'une instance Image à l'aide de FabricJS ?

PHPzavant: 2023-08-24 20:45:061157parcourir

如何使用 FabricJS 查找 Image 实例的复杂度？

Dans ce tutoriel, nous apprendrons comment trouver la complexité d'une instance d'image Utilisez 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. Appliquez des propriétés telles que l'angle, l'opacité, etc. Afin de trouver la complexité de l'image Par exemple, nous utilisons la méthode Complexity. Cette méthode renverra 1 si l'objet actuel est Héritez directement de la classe de base plutôt que des sous-classes.

Grammaire

complexity(): Number

Utilisation des méthodes Complexité

Exemple

Regardons un exemple de code pour voir la sortie enregistrée lors de l'utilisation de la méthode complexité Obtient la complexité d’une instance Image. Sauf sous-catégorisation, la complexité est 1.

<!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 complexity method</h2>
   <p>You can open console from dev tools and see the logged output</p>
   <canvas id="canvas"></canvas>
   <img src="https://www.tutorialspoint.com/images/logo.png" id="img1" style="display: none" />
   <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 the complexity method
      console.log("The complexity of Image instance is: ", image.complexity());
   </script>
</body>
</html>

Utilisez la méthode Complexité pour comparer différents objets

Exemple

Dans cet exemple, nous avons utilisé la méthode Complexité pour comparer Instances d’image et instances de polygones. Vous pouvez ouvrir la console depuis les outils de développement Voir la complexité est différent.

<!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 complexity method to compare different objects</h2>
   <p>You can open console from dev tools and see the logged output</p>
   <canvas id="canvas"></canvas>
   <img src="https://www.tutorialspoint.com/images/logo.png" id="img1" style="display: none" />
   <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: 50,
      });
      
      // Initiate a Polygon object
      var polygon = new fabric.Polyline(
         [
            { x: 50, y: 30 },
            { x: 105, y: 10 },
            { x: 160, y: 30 },
            { x: 100, y: 150 },
         ],
         {
            fill: "red",
            left: 450,
            top: 70,
         }
      );
      
      // Add them both to the canvas
      canvas.add(image);
      canvas.add(polygon);
      
      // Using the complexity method
      console.log("The complexity of Image instance is: ", image.complexity());
      console.log(
         "The complexity of Polygon instance is: ",
         polygon.complexity()
      );
   </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!

子类继承对象 fabric

Déclaration：

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

Article précédent：Comment verrouiller la mise à l'échelle verticale de Triangle à l'aide de FabricJS ?Article suivant：Comment verrouiller la mise à l'échelle verticale de Triangle à l'aide de FabricJS ?

Articles Liés

Voir plus