Heim > Artikel > Web-Frontend > Wie kann ich mithilfe von FabricJS überprüfen, ob ein Bildobjekt ein anderes Objekt schneidet?

Wie kann ich mithilfe von FabricJS überprüfen, ob ein Bildobjekt ein anderes Objekt schneidet?

PHPznach vorne: 2023-09-17 12:53:02804Durchsuche

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

In diesem Tutorial erfahren Sie, wie Sie prüfen, ob ein Bildobjekt übereinstimmt Ein weiteres Objekt, das FabricJS verwendet. Wir können ein Bildobjekt erstellen, indem wir eine Instanz erstellen Stoff.Bild. Da es eines der Grundelemente von FabricJS ist, können wir es auch problemlos Passen Sie es an, indem Sie Eigenschaften wie Winkel, Deckkraft und mehr anwenden. Um zu überprüfen, ob das Bild Um ein Objekt mit einem anderen Objekt zu schneiden, verwenden wir die Methode intersectsWithObject.

Grammatik

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

Parameter

other – Dieser Parameter akzeptiert ein Objekt, das das Objekt angibt, das wir testen möchten.
absolute(optional) – Dieser Parameter akzeptiert einen String -Wert, der angibt, ob Koordinaten ohne viewportTransform verwendet werden sollen. Dieser Parameter ist optional.
Calculate (optional) – Dieser Parameter akzeptiert einen booleschen-Wert, der angibt, ob die Koordinaten des aktuellen Standorts verwendet werden sollen. Dieser Parameter ist optional.

Verwenden Sie die Methode intersectsWithObject

Beispiel

Sehen wir uns ein Codebeispiel an, um die protokollierte Ausgabe zu sehen, wenn

intersectsWithObject Wie zu verwenden. Die Methode intersectsWithObject prüft, ob sie true oder false zurückgibt Ein Bildobjekt schneidet ein anderes Objekt. Hier initialisieren wir zwei Rechtecke Die Objekte sind Rechteck 1 und Rechteck 2. Da unser Bildobjekt verwandt ist mit Rechteck 1 gibt true zurück.

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

Verwenden Sie die Methode

intersectsWithObject für verschiedene Objekte Beispiel

In diesem Beispiel haben wir die Methode

intersectsWithObject

zusammen mit anderen verwendet Objekt, um zu zeigen, dass diese Methode für jedes Objekt verwendet werden kann.

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

Fazit

In diesem Tutorial zeigen wir anhand von zwei Beispielen, wie man prüft, ob ein Bildobjekt vorhanden ist Schneiden Sie ein anderes Objekt mit FabricJS.

Das obige ist der detaillierte Inhalt vonWie kann ich mithilfe von FabricJS überprüfen, ob ein Bildobjekt ein anderes Objekt schneidet?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

String 对象 fabric

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Erstellen Sie verkettete Aktionsklassen in JavaScriptNächster Artikel：Erstellen Sie verkettete Aktionsklassen in JavaScript

In Verbindung stehende Artikel

Mehr sehen