Heim > Artikel > Web-Frontend > Wie kann man mit FabricJS ein Polygonobjekt auf ausgewählte und nicht ausgewählte Ereignisse reagieren lassen?

Wie kann man mit FabricJS ein Polygonobjekt auf ausgewählte und nicht ausgewählte Ereignisse reagieren lassen?

WBOYnach vorne: 2023-09-21 09:41:111374Durchsuche

如何使用 FabricJS 使多边形对象对选定和取消选定事件做出反应？

Wir können ein Polygon-Objekt erstellen, indem wir eine Instanz von fabric.Polygon erstellen. Ein Polygonobjekt kann als jede geschlossene Form charakterisiert werden, die aus einer Reihe verbundener gerader Liniensegmente besteht. Da es eines der Grundelemente von FabricJS ist, können wir es auch einfach anpassen, indem wir Eigenschaften wie Winkel, Deckkraft usw. anwenden. Wir verwenden die Ereignisse selected und deselected, um zu demonstrieren, wie ein Polygonobjekt auf die Auswahl und Aufhebung der Auswahl von Objekten durch den Benutzer reagieren kann.

Grammatik

polygon.on("selected", callbackFunction);
polygon.on("deselected", callbackFunction);

Beispiel 1: Zeigen Sie, wie ein Objekt auf ausgewählte Ereignisse reagiert

Schauen wir uns ein Codebeispiel an, wie man ein Polygonobjekt auf das ausgewählte-Ereignis reagieren lässt. Durch Klicken auf das Objekt wird das selected-Ereignis ausgelöst, das die Callback-Funktion ausführt. In diesem Fall ändert sich jedes Mal, wenn wir auf das Polygonobjekt klicken, seine Füllfarbe und die aufgezeichnete Ausgabe wird angezeigt.

<!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>Displaying how the object reacts to the selected event</h2>
   <p>Select the object to see the event callback function fired</p>
   <canvas id="canvas"></canvas>
   <script>
      
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      
      // Initiate a polygon instance
      var polygon = new fabric.Polygon(
         [
            { x: 500, y: 20 },
            { x: 550, y: 60 },
            { x: 550, y: 200 },
            { x: 350, y: 200 },
            { x: 350, y: 60 },
            { x: 500, y: 20 },
         ],
         {
            fill: "black",
            stroke: "blue",
            strokeWidth: 2,
            objectCaching: false,
         }
      );
      
      // Adding it to the canvas
      canvas.add(polygon);
      
      // Using the selected event
      polygon.on("selected", () => {
         polygon.fill = "blue";
         canvas.renderAll();
         console.log("The polygon object is selected");
      });
   </script>
</body>
</html>

Beispiel 2: Zeigen Sie, wie ein Objekt auf Abwahlereignisse reagiert

Sehen wir uns ein Codebeispiel an, um zu sehen, wie man ein Polygon-Objekt auf das Deselect-Ereignis reagieren lässt. Hier wird das Ereignis ausgelöst, sobald die Auswahl des Polygonobjekts aufgehoben wird, wodurch sich auch die Füllfarbe ändert.

<!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>Displaying how the object reacts to the deselected event</h2>
   <p>Deselect the object to see the event callback function fired</p>
   <canvas id="canvas"></canvas>
   <script>
      
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      
      // Initiate a polygon instance
      var polygon = new fabric.Polygon(
         [
            { x: 500, y: 20 },
            { x: 550, y: 60 },
            { x: 550, y: 200 },
            { x: 350, y: 200 },
            { x: 350, y: 60 },
            { x: 500, y: 20 },
         ],
         {
            fill: "red",
            stroke: "blue",
            strokeWidth: 2,
            objectCaching: false,
         }
      );
      
      // Adding it to the canvas 
      canvas.add(polygon);
      
      // Using the deselected event
      polygon.on("deselected", () => {
         polygon.fill = "black";
         canvas.renderAll();
         console.log("The polygon object is deselected");
      });
   </script>
</body>
</html>

Fazit

In diesem Tutorial zeigen wir anhand von zwei einfachen Beispielen, wie man mit FabricJS ein Polygonobjekt auf ausgewählte und nicht ausgewählte Ereignisse reagieren lässt.

Das obige ist der detaillierte Inhalt vonWie kann man mit FabricJS ein Polygonobjekt auf ausgewählte und nicht ausgewählte Ereignisse reagieren lassen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

回调函数对象事件 fabric

Stellungnahme：

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

Vorheriger Artikel：Wie stelle ich die Füllfarbe eines Rechtecks mit FabricJS ein?Nächster Artikel：Wie stelle ich die Füllfarbe eines Rechtecks mit FabricJS ein?

In Verbindung stehende Artikel

Mehr sehen