Heim > Artikel > Web-Frontend > Wie finde ich die Komplexität einer Image-Instanz mithilfe von FabricJS?

Wie finde ich die Komplexität einer Image-Instanz mithilfe von FabricJS?

PHPznach vorne: 2023-08-24 20:45:061089Durchsuche

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

In diesem Tutorial lernen wir, wie man die Komplexität einer Image-Instanz ermittelt Verwenden Sie FabricJS. 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 problemlos anpassen Wenden Sie Eigenschaften wie Winkel, Deckkraft usw. an. Um die Komplexität des Bildes zu finden Wir verwenden zum Beispiel die Methode Komplexität. Diese Methode gibt 1 zurück, wenn das aktuelle Objekt vorhanden ist Erben Sie direkt von der Basisklasse und nicht von Unterklassen.

Grammatik

complexity(): Number

Verwendung von Komplexitätsmethoden

Beispiel

Sehen wir uns ein Codebeispiel an, um zu sehen, wie die Ausgabe protokolliert wird, wenn die Methode

complexity verwendet wird Ruft die Komplexität einer Image-Instanz ab. Ohne Unterkategorisierung beträgt die Komplexität 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>

Verwenden Sie die Methode

Komplexität, um verschiedene Objekte zu vergleichen

Beispiel

In diesem Beispiel haben wir zum Vergleich die Methode „Komplexität“ verwendet Bildinstanzen und Polygoninstanzen. Sie können die Konsole über die Entwicklungstools öffnen Komplexität zu sehen ist anders.

<!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>

Das obige ist der detaillierte Inhalt vonWie finde ich die Komplexität einer Image-Instanz mithilfe von FabricJS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

子类继承对象 fabric

Stellungnahme：

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

Vorheriger Artikel：Wie sperre ich die vertikale Skalierung von Triangle mit FabricJS?Nächster Artikel：Wie sperre ich die vertikale Skalierung von Triangle mit FabricJS?

In Verbindung stehende Artikel

Mehr sehen