Bagaimana untuk menyemak sama ada objek Imej bersilang dengan objek lain menggunakan FabricJS?-tutorial js-php.cn

Bagaimana untuk menyemak sama ada objek Imej bersilang dengan objek lain menggunakan FabricJS?

PHPz

Lepaskan： 2023-09-17 12:53:02

ke hadapan

826 orang telah melayarinya

如何使用 FabricJS 检查一个 Image 对象是否与另一个对象相交？

Dalam tutorial ini kita akan belajar bagaimana untuk menyemak sama ada objek Imej sepadan Objek lain menggunakan FabricJS. Kita boleh mencipta objek Imej dengan mencipta contoh fabrik.Imej. Oleh kerana ia adalah salah satu elemen asas FabricJS, kita juga boleh dengan mudah Sesuaikan dengan menggunakan sifat seperti sudut, kelegapan dan banyak lagi. Untuk menyemak sama ada imej Untuk memotong objek dengan objek lain, kami menggunakan kaedah intersectsWithObject.

Tatabahasa

intersectsWithObject(other: Object, absolute: Boolean, calculate:Boolean ): Boolean

Salin selepas log masuk

Parameter

other - Parameter ini menerima objek yang menentukan objek yang ingin kita uji.
mutlak(pilihan) - Parameter ini menerima nilai String yang menentukan sama ada untuk menggunakan koordinat tanpa viewportTransform. Parameter ini adalah pilihan.
Kira (pilihan) - Parameter ini menerima nilai boolean yang menentukan sama ada untuk menggunakan koordinat lokasi semasa. Parameter ini adalah pilihan.

Gunakan intersectsWithObjectkaedah

Contoh

Mari kita lihat contoh kod untuk melihat output yang dilog apabila intersectsWithObject Cara menggunakan. Kaedah intersectsWithObject menyemak sama ada ia mengembalikan benar atau palsu Objek imej bersilang dengan objek lain. Di sini kita memulakan dua segi empat tepat Objek tersebut ialah Segiempat 1 dan Segiempat 2. Oleh kerana objek imej kita berkaitan dengan Segi empat tepat 1, kembali benar.

<!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 intersectsWithObject 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,
      });
      
      // Initiate a rectangle object
      var rectangleRed = new fabric.Rect({
         width: 60,
         height: 20,
         top: 40,
         left: 80,
         fill: "red",
         strokeWidth: 6,
      });
      
      // Initiate another rectangle object
      var rectangleBlue = new fabric.Rect({
         width: 20,
         height: 40,
         top: 70,
         left: 520,
         fill: "blue",
      });
      
      // Add them to the canvas
      canvas.add(image);
      canvas.add(rectangleRed);
      canvas.add(rectangleBlue);
      
      // Using intersectsWithObject method
      console.log(
         "Does the image object intersect with rectangleRed?: ",
         image.intersectsWithObject(rectangleRed)
      );
      console.log(
         "Does the image object intersect with rectangleBlue?: ",
         image.intersectsWithObject(rectangleBlue)
      );
   </script>
</body>
</html>

Salin selepas log masuk

Gunakan kaedah intersectsWithObject

pada objek yang berbeza

Contoh

Dalam contoh ini kami menggunakan kaedah intersectsWithObject bersama dengan kaedah yang berbeza objek untuk menunjukkan bahawa kaedah ini boleh digunakan pada mana-mana objek.

<!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 intersectsWithObject method with 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: 110,
      });
      
      // Initiate a triangle object
      var triangle = new fabric.Triangle({
         width: 90,
         height: 70,
         top: 40,
         left: 80,
         fill: "red",
         strokeWidth: 6,
      });
      
      // Initiate a circle object
      var circle = new fabric.Circle({
         radius: 40,
         top: 70,
         left: 520,
         fill: "blue",
      });
      
      // Add them to the canvas
      canvas.add(image);
      canvas.add(triangle);
      canvas.add(circle);
      
      // Using intersectsWithObject method
      console.log(
         "Does the image object intersect with triangle?: ",
         image.intersectsWithObject(triangle)
      );
      console.log(
         "Does the image object intersect with circle?: ",
         image.intersectsWithObject(circle)
      );
   </script>
</body>
</html>

Salin selepas log masuk

Kesimpulan

Dalam tutorial ini, kami menggunakan dua contoh untuk menunjukkan cara menyemak sama ada objek Imej Bersilang objek lain menggunakan FabricJS.

Atas ialah kandungan terperinci Bagaimana untuk menyemak sama ada objek Imej bersilang dengan objek lain menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!