Rumah > Artikel > hujung hadapan web > Bagaimana untuk mengenal pasti jenis contoh Imej menggunakan FabricJS?

Bagaimana untuk mengenal pasti jenis contoh Imej menggunakan FabricJS?

WBOYke hadapan: 2023-09-08 12:29:02947semak imbas

Dalam tutorial ini, kita akan belajar cara mengenal pasti jenis contoh Imej dalam FabricJS. Kita boleh mencipta objek Imej dengan mencipta contoh fabric.Image. Memandangkan ia adalah salah satu elemen asas FabricJS, kami juga boleh menyesuaikannya dengan mudah dengan menggunakan sifat seperti sudut, kelegapan, dsb. Untuk mengenal pasti jenis contoh Imej, kami menggunakan kaedah isType.

Tatabahasa

isType(type: String): Boolean

Parameter

type - Parameter ini menerima String yang menentukan jenis yang ingin kita semak.

Gunakan kaedah isType

Contoh

Mari kita lihat contoh kod untuk melihat output yang dilog apabila menggunakan kaedah isType. Kaedah isType mengembalikan nilai benar atau salah, bergantung pada sama ada jenis tika itu sepadan dengan jenis yang ingin kita semak. Dalam kes ini, memandangkan jenis sepadan, nilai sebenar dikembalikan.

<!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 isType method</h2>
   <p>
      You can open console from dev tools and see that the logged output contains a true value
   </p>
   <canvas id="canvas"></canvas>
   <img  src="https://www.tutorialspoint.com/images/logo.png" id="img1"   style="max-width:90%" / alt="Bagaimana untuk mengenal pasti jenis contoh Imej menggunakan FabricJS?" >
   <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 isType method
      console.log(
         "Is the specified type identical to an image instance? : ",
         image.isType("image")
      );
   </script>
</body>
</html>

Gunakan kaedah isType

dengan nilai yang berbeza

Contoh

Dalam contoh ini, kami menggunakan isType untuk menyemak sama ada jenis bulatan yang dinyatakan adalah sama dengan contoh imej. Di sini, kerana ia tidak sama, nilai ralat dikembalikan.

<!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 isType method with a different value</h2>
   <p>
      You can open console from dev tools and see that the logged output contains a false value
   </p>
   <canvas id="canvas"></canvas>
   <img  src="https://www.tutorialspoint.com/images/logo.png" id="img1"   style="max-width:90%" / alt="Bagaimana untuk mengenal pasti jenis contoh Imej menggunakan FabricJS?" >
   <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 isType method
      console.log(
         "Is the specified type identical to an image instance? : ",
         image.isType("circle")
      );
   </script>
</body>
</html>

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

String 对象 fabric

Kenyataan：

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

Artikel sebelumnya：Rentetan Ajaib: Masalah dalam JavaScriptArtikel seterusnya：Rentetan Ajaib: Masalah dalam JavaScript

Artikel berkaitan

Lihat lagi