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

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

WBOYnach vorne: 2023-08-29 11:57:06884Durchsuche

如何使用 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 scaling, um zu demonstrieren, wie polygonale Objekte auf die Skalierung reagieren.

Grammatik

polygon.on(“scaling”, callbackFunction);

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

Schauen wir uns ein Codebeispiel an, um zu sehen, wie ein Polygonobjekt reagiert, wenn ein Zoom-Ereignis auftritt. Wir können das Objekt skalieren, indem wir ein beliebiges Ecksteuerelement ziehen. Hier wird beim Skalieren des Objekts das Skalierungsereignis 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 scaling event</h2>
   <p>
      You can scale the polygon object and open the console from dev tools 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: 0, y: 0 },
            { x: 0, y: 50 },
            { x: 50, y: 50 },
            { x: 50, y: 0 },
         ],
         {
            left: 100,
            top: 30,
            fill: "red",
            stroke: "blue",
            strokeWidth: 3,
            objectCaching: false,
         }
      );
      
      // Adding it to the canvas
      canvas.add(polygon);
      
      // Using the scaling event
      polygon.on("scaling", () => {
         canvas.renderAll();
         console.log("The object is being scaled");
      });
   </script>
</body>
</html>

Beispiel 2: Strichfarbe beim Zoomen ändern

Schauen wir uns ein Codebeispiel an, um zu sehen, wie man die Strichfarbe ändert, wenn ein Zoom-Ereignis auftritt. Wir verwenden die Set-Methode, um die Strichfarbe des Polygons auf „Orange“ zu setzen. Wenn wir also das Objekt skalieren, ändert sich seine Strichfarbe in Orange.

<!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 stroke colour when scaling happens</h2>
   <p>
      You can see that the stroke colour changes when the polygon is scaled
   </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: 5,
            objectCaching: false,
            top: 50,
            left: 30,
            scaleX: 0.5,
            scaleY: 0.5
         }
      );

      // Adding it to the canvas
      canvas.add(polygon);

      // Using the scaling event
      polygon.on("scaling", () => {
         polygon.set("stroke", "orange")
         canvas.renderAll();
      });
   </script>
</body>
</html>

Fazit

In diesem Tutorial zeigen wir anhand von zwei einfachen Beispielen, wie man mithilfe von FabricJS dafür sorgt, dass ein Polygonobjekt auf Zoomereignisse reagiert.

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

Stellungnahme：

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

Vorheriger Artikel：Erste Schritte mit Paper.js: Animierte Bilder erstellenNächster Artikel：Erste Schritte mit Paper.js: Animierte Bilder erstellen

In Verbindung stehende Artikel

Mehr sehen