Heim >Web-Frontend >js-Tutorial >Fügen Sie mithilfe von FabricJS Verkleinerungs- und Erweiterungsanimationen zu Polygonobjekten hinzu

Fügen Sie mithilfe von FabricJS Verkleinerungs- und Erweiterungsanimationen zu Polygonobjekten hinzu

WBOYnach vorne: 2023-09-23 22:29:021347Durchsuche

使用 FabricJS 向 Polygon 对象添加收缩和展开动画

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. Um Animationen zum Verkleinern und Erweitern hinzuzufügen, können wir die Eigenschaften scaleX und scaleY in Verbindung mit der Methode animate verwenden.

Grammatik

animate(property: String | Object, value: Number | Object):
fabric.Object | fabric.AnimationContext |
Array.<fabric.AnimationContext>

Parameter

property – Diese Eigenschaft akzeptiert einen String- oder Object-Wert, um zu bestimmen, welche Eigenschaften wir animieren möchten.
value – Diese Eigenschaft akzeptiert einen Number- oder Object-Wert, der die zu animierende Value-Eigenschaft bestimmt.

Wahltaste

scaleX: Diese Eigenschaft akzeptiert einen Number-Wert. Der zugewiesene Wert bestimmt den horizontalen Objektskalierungsfaktor. Der Standardwert ist 1.
scaleY: Diese Eigenschaft akzeptiert einen Number-Wert. Der zugewiesene Wert bestimmt den vertikalen Objektskalierungsfaktor. Der Standardwert ist 1.

Beispiel 1: Verkleinerungsanimation zu Polygonen hinzufügen

Schauen wir uns ein Codebeispiel an, um zu sehen, wie man mit der Animationsmethode eine Schrumpfanimation hinzufügt. Wir übergeben einen Wert von 0,5 an die Eigenschaften „scaleX“ und „scaleY“, wodurch das Polygon sowohl horizontal als auch vertikal die Hälfte seiner ursprünglichen Größe erhält.

<!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>Adding shrink animation to the polygon</h2>
   <p>You can see that shrink animation has been added to the polygon</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 object
      var polygon = new fabric.Polygon(
         [
            { x: 60, y: 0 },
            { x: 60, y: 60 },
            { x: 0, y: 60 },
            { x: 0, y: 0 },
         ],
         {
            fill: "#ffe4e1",
            stroke: "green",
            strokeWidth: 5,
            top: 90,
            left: 100,
         }
      );
      
      // Adding it to the canvas
      canvas.add(polygon);
      
      // Using the animate method and passing scaleX property
      polygon.animate("scaleX", "0.5", {
         onChange: canvas.renderAll.bind(canvas),
         easing: fabric.util.ease.easeInCubic,
         duration: 1000,
      });
      
      // Using the animate method and passing scaleY property
      polygon.animate("scaleY", "0.5", {
         onChange: canvas.renderAll.bind(canvas),
         easing: fabric.util.ease.easeInCubic,
         duration: 1000,
      });
   </script>
 </body>
</html>

Beispiel 2: Hinzufügen einer Entfaltungsanimation zu einem Polygon

In diesem Beispiel sehen wir, wie man mit der Methode animate eine expand-Animation hinzufügt. Da wir den Eigenschaften „scaleX“ und „scaleY“ den Wert 1,5 übergeben haben, wird das Polygonobjekt horizontal und vertikal um das 1,5-fache skaliert.

<!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>Adding expand animation to the polygon</h2>
   <p>You can see that expand animation has been added to the polygon</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 object
      var polygon = new fabric.Polygon(
         [
            { x: 60, y: 0 },
            { x: 60, y: 60 },
            { x: 0, y: 60 },
            { x: 0, y: 0 },
         ],
         {
            fill: "#ffe4e1",
            stroke: "green",
            strokeWidth: 5,
            top: 90,
            left: 100,
         }
      );
      
      // Adding it to the canvas
      canvas.add(polygon);
      
      // Using the animate method and passing scaleX property
      polygon.animate("scaleX", "1.5", {
         onChange: canvas.renderAll.bind(canvas),
         easing: fabric.util.ease.easeInCubic,
         duration: 1000,
      });
      
      // Using the animate method and passing scaleY property
      polygon.animate("scaleY", "1.5", {
         onChange: canvas.renderAll.bind(canvas),
         easing: fabric.util.ease.easeInCubic,
         duration: 1000,
      });
   </script>
</body>
</html>

Fazit

In diesem Tutorial zeigen wir anhand von zwei einfachen Beispielen, wie man mit FabricJS

Verkleinerungs- und Erweiterungsanimationen zu Polygonobjekten hinzufügt

Das obige ist der detaillierte Inhalt vonFügen Sie mithilfe von FabricJS Verkleinerungs- und Erweiterungsanimationen zu Polygonobjekten hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

String Object Property number 对象 fabric

Stellungnahme：

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

Vorheriger Artikel：So senden Sie axios delete in JavaScript an das Backend ReactJSNächster Artikel：So senden Sie axios delete in JavaScript an das Backend ReactJS

In Verbindung stehende Artikel

Mehr sehen