Maison > Article > interface Web > Comment vérifier si un objet Image croise un autre objet à l'aide de FabricJS ?

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

PHPzavant: 2023-09-17 12:53:02804parcourir

如何使用 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

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>

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>

Conclusion

Dans ce tutoriel, nous utilisons deux exemples pour montrer comment vérifier si un objet Image Intersection d'un autre objet à l'aide de FabricJS.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

String 对象 fabric

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Créer des classes d'actions chaînées en JavaScriptArticle suivant：Créer des classes d'actions chaînées en JavaScript

Articles Liés

Voir plus