Wie kann man mit FabricJS ein Polygonobjekt auf Neigungsereignisse reagieren lassen?-js-Tutorial-php.cn

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

WBOY

Freigeben： 2023-09-16 09:17:14

nach vorne

1007 Leute haben es durchsucht

如何使用 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 skewing, um zu demonstrieren, wie polygonale Objekte auf den Benutzer reagieren, wenn sie manipuliert werden. Durch die Steuerung der Neigung.

Grammatik

polygon.on("skewing", callbackFunction);

Nach dem Login kopieren

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

Schauen wir uns ein Codebeispiel an, um zu sehen, wie ein Polygonobjekt reagiert, wenn das Ereignis Tilt verwendet wird. Sie können ein Objekt horizontal und vertikal neigen, indem Sie die Umschalttaste drücken und dann das mittlere Steuerelement horizontal oder vertikal ziehen. Wenn das Objekt geneigt wird, wird das Neigungsereignis kontinuierlich ausgelöst.

<!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 skewing event</h2>
   <p>
      You can keep skewing the object while the console from dev tools is open to see the logged output
   </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 skewing event
      polygon.on("skewing", () => {
         canvas.renderAll();
         console.log("The polygon object is being skewed");
      });
   </script>
</body>
</html>

Nach dem Login kopieren

Beispiel 2: Füllfarbe ändern, wenn eine Neigung auftritt

Schauen wir uns ein Codebeispiel an, um zu sehen, wie man die Füllfarbe ändert, wenn ein Tilt-Ereignis auftritt. Wir haben die Set-Methode verwendet, einen Setter, der es uns ermöglicht, die Eigenschaft anzugeben, die wir ändern möchten. Hier ändert sich die Füllfarbe jedes Mal, wenn wir das Polygon neigen, 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 skew happens</h2>
   <p>
      You can see that the fill colour changes when the polygon is skewed
   </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 skewing event
      polygon.on("skewing", () => {
         polygon.set("fill", "green")
         canvas.renderAll();
      });
   </script>
</body>
</html>

Nach dem Login kopieren

Fazit

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

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