Comment vérifier si un objet Image croise un autre objet à l'aide de FabricJS ?-js tutoriel-php.cn

Comment vérifier si un objet Image croise un autre objet à l'aide de FabricJS ?

PHPz

Libérer： 2023-09-17 12:53:02

avant

874 Les gens l'ont consulté

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

Dans ce tutoriel, nous apprendrons comment vérifier si un objet Image correspond Un autre objet utilisant FabricJS. Nous pouvons créer un objet Image en créant une instance tissu.Image. Puisqu’il s’agit d’un des éléments de base de FabricJS, on peut aussi facilement Personnalisez-le en appliquant des propriétés telles que l'angle, l'opacité, etc. Afin de vérifier si l'image Pour croiser un objet avec un autre objet, nous utilisons la méthode intersectsWithObject.

Grammaire

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

Copier après la connexion

Paramètres

other - Ce paramètre accepte un object qui spécifie l'objet que nous voulons tester.
absolute(facultatif) - Ce paramètre accepte une valeur String qui spécifie s'il faut utiliser des coordonnées sans viewportTransform. Ce paramètre est facultatif.
Calculer (facultatif) - Ce paramètre accepte une valeur booléenne qui spécifie s'il faut utiliser les coordonnées de l'emplacement actuel. Ce paramètre est facultatif.

Utilisez la méthode intersectsWithObject

Exemple

Regardons un exemple de code pour voir la sortie enregistrée lorsque intersectsWithObject Comment utiliser. La méthode intersectsWithObject vérifie si elle renvoie vrai ou faux Un objet image croise un autre objet. Ici on initialise deux rectangles Les objets sont Rectangle 1 et Rectangle 2. Puisque notre objet image est lié à Rectangle 1, renvoie vrai.

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

Copier après la connexion

Utilisez la méthode intersectsWithObject

sur différents objets

Exemple

Dans cet exemple, nous avons utilisé la méthode intersectsWithObject avec différents object pour démontrer que cette méthode peut être utilisée sur n’importe quel objet.

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

Copier après la connexion