Heim > Artikel > Web-Frontend > Wie kann man mit FabricJS ein Polygonobjekt auf Rotationsereignisse reagieren lassen?

Wie kann man mit FabricJS ein Polygonobjekt auf Rotationsereignisse reagieren lassen?

WBOYnach vorne: 2023-08-31 08:05:02842Durchsuche

如何使用 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 das Ereignis rotating, um zu demonstrieren, wie man ein polygonales Objekt durch Steuerelemente auf Drehung reagieren lässt.

Grammatik

polygon.on(“rotating”, callbackFunction);

Beispiel 1: Zeigen Sie, wie ein Objekt auf Rotationsereignisse reagiert

Schauen wir uns ein Codebeispiel an, wie man ein Polygonobjekt auf ein Rotationsereignis reagieren lässt. In diesem Fall sehen wir immer dann die aufgezeichnete Ausgabe, wenn wir auf das Polygonobjekt klicken und es mit der mittleren Rotationssteuerung drehen. Dies liegt daran, dass das Rotationsereignis kontinuierlich ausgelöst wird, während sich das Objekt dreht.

<!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 rotating event</h2>
   <p>You can rotate the object to see the 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 rotating event
      polygon.on("rotating", () => {
         canvas.renderAll();
         console.log("The polygon object is rotating");
      });
   </script>
</body>
</html>

Beispiel 2: Füllfarbe ändern, wenn eine Drehung erfolgt

Schauen wir uns ein Codebeispiel an, um zu sehen, wie man die Füllfarbe ändert, wenn ein Rotate-Ereignis auftritt. Wir können die mittlere Rotationssteuerung (mtr) verwenden, um Objekte auf der Leinwand zu drehen. Wenn wir hier das Polygonobjekt mit der mtr-Steuerung drehen, ändert sich die Füllfarbe in „Grün“.

<!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>Changing the fill colour when rotate happens</h2>
   <p>
      You can see that the fill colour changes when the polygon is rotated
   </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,
            top: 50,
            left: 30, 
            scaleX: 0.5,
            scaleY: 0.5
         }
      );

      // Adding it to the canvas
      canvas.add(polygon);
      
      // Using the rotating event
      polygon.on("rotating", () => {
         polygon.set("fill", "green")
         canvas.renderAll();
      });
   </script>
</body>
</html>

Fazit

In diesem Tutorial zeigen wir anhand von zwei einfachen Beispielen, wie man mit FabricJS ein Polygonobjekt auf Rotationsereignisse reagieren lässt.

Das obige ist der detaillierte Inhalt vonWie kann man mit FabricJS ein Polygonobjekt auf Rotationsereignisse 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：Erklären Sie Promise.allSettled() und async-await in JavaScript?Nächster Artikel：Erklären Sie Promise.allSettled() und async-await in JavaScript?

In Verbindung stehende Artikel

Mehr sehen