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

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

WBOYnach vorne: 2023-08-31 17:45:07524Durchsuche

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

In diesem Tutorial erfahren wir, wie wir mit FabricJS die Komplexität einer Linie ermitteln. Das Linienelement ist eines der Grundelemente, die in FabricJS bereitgestellt werden. Es wird verwendet, um gerade Linien zu erstellen. Da Linienelemente geometrisch eindimensional sind und keine Innenräume enthalten, werden sie nie gefüllt. Wir können ein Linienobjekt erstellen, indem wir eine Instanz von fabric.Line erstellen, die x- und y-Koordinaten der Linie angeben und sie der Leinwand hinzufügen. Um die Komplexität eines Linienobjekts zu ermitteln, verwenden wir die Komplexitätsmethode. Wenn das aktuelle Objekt direkt von der Basisklasse und nicht von einer Unterklasse erbt, gibt diese Methode 1 zurück.

Syntax

 complexity(): Number

Verwendung von Komplexitätsmethoden

Beispiel

Sehen wir uns ein Codebeispiel an, um die protokollierte Ausgabe zu sehen, wenn Komplexitätsmethoden verwendet werden, um die Komplexität einer Linieninstanz zu ermitteln. Die Komplexität beträgt 1, sofern keine Unterkategorisierung vorgenommen wird.

<!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>
   <script>
      
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      
      // Initiate a Line object
      var line = new fabric.Line([70, 100, 150, 200], {
         stroke: "blue",
      });
      
      // Add it to the canvas
      canvas.add(line);
      
      // Using the complexity method
      console.log("The complexity of Line instance is: ", line.complexity());
   </script>
</body>
</html>

Vergleichen Sie verschiedene Objekte mit der Komplexitätsmethode

Beispiel

In diesem Beispiel verwenden wir die Komplexitätsmethode, um die Komplexität von Linieninstanzen und Polygoninstanzen zu vergleichen. Sie können die Konsole über die Entwicklungstools öffnen, um den Unterschied in der Komplexität zu sehen.

<!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 that the complexities are different
   </p>
   <canvas id="canvas"></canvas>
   <script>
      
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      
      // Initiate a Line object
      var line = new fabric.Line([70, 100, 150, 200], {
         stroke: "blue",
      });
      
      // 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: 300,
               top: 70,
            }
      );
      
      // Add both to the canvas
      canvas.add(line);
      canvas.add(polygon);
      
      // Using the complexity method
      console.log("The complexity of Line instance is: ", line.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 Line-Instanz mithilfe von FabricJS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

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

Vorheriger Artikel：Gewinnen Sie ein tieferes Verständnis der Grundlagen des AlgorithmusdesignsNächster Artikel：Gewinnen Sie ein tieferes Verständnis der Grundlagen des Algorithmusdesigns

In Verbindung stehende Artikel

Mehr sehen