Rumah > Artikel > hujung hadapan web > Bagaimana untuk mencari kerumitan contoh Imej menggunakan FabricJS?

Bagaimana untuk mencari kerumitan contoh Imej menggunakan FabricJS?

PHPzke hadapan: 2023-08-24 20:45:061089semak imbas

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

在本教程中，我们将学习如何查找 Image 实例的复杂度 使用 FabricJS。我们可以通过创建fabric.Image的实例来创建一个Image对象。由于它是FabricJS的基本元素之一，我们也可以轻松地自定义它应用角度、不透明度等属性。为了找到图像的复杂度 例如，我们使用复杂性方法。如果当前对象是此方法将返回 1 直接从基类继承，而不是从子类继承。

语法

complexity(): Number

使用复杂性方法

示例

让我们看一个代码示例，看看使用complexity方法时记录的输出获取 Image 实例的复杂度。除非进行子分类，否则复杂度为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>

使用复杂度方法来比较不同的对象

示例

在此示例中，我们使用了复杂度方法来比较图像实例和多边形实例。您可以从开发工具打开控制台看到复杂性是不同的。

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

Atas ialah kandungan terperinci Bagaimana untuk mencari kerumitan contoh Imej menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

子类继承对象 fabric

Kenyataan：

Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel sebelumnya：Bagaimana untuk mengunci penskalaan menegak Segitiga menggunakan FabricJS?Artikel seterusnya：Bagaimana untuk mengunci penskalaan menegak Segitiga menggunakan FabricJS?

Artikel berkaitan

Lihat lagi