Comment trouver la complexité d'une instance Image à l'aide de FabricJS ?-js tutoriel-php.cn

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

PHPz

Libérer： 2023-08-24 20:45:06

avant

1163 Les gens l'ont consulté

如何使用 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

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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!