Wie begradige ich ein Bild mit Animation mit FabricJS?-js-Tutorial-php.cn

Wie begradige ich ein Bild mit Animation mit FabricJS?

WBOY

Freigeben： 2023-09-13 21:41:06

nach vorne

935 Leute haben es durchsucht

如何使用 FabricJS 拉直带有动画的图像？

In diesem Tutorial lernen wir, wie man ein Bild mithilfe einer Animation begradigt FabricJS. Wir können ein Image-Objekt erstellen, indem wir eine Instanz von fabric.Image erstellen. seit Es ist eines der Grundelemente von FabricJS und wir können es auch einfach über die Anwendung anpassen Winkel, Deckkraft und andere Eigenschaften. Um das Bild mit Animation zu begradigen, verwenden wir fxStraighten-Methode.

Grammatik

fxStraighten(callbacks: Object): fabric.Object

Nach dem Login kopieren

Parameter

callbacks – Dieser Parameter ist ein Objekt mit einer Callback-Funktion, das verwendet werden kann Ändern Sie bestimmte Eigenschaften im Zusammenhang mit der Animation.

Verwenden Sie die Glättungsmethode

Beispiel

Schauen wir uns ein Codebeispiel an, um zu sehen, wie ein Bildobjekt angezeigt wird, wenn die Methode

straighten verwendet wird Wird anstelle von fxstraighten verwendet. Dies wird uns helfen, den Unterschied zwischen ihnen zu erkennen. Die straighten-Methode straighten dreht das Objekt lediglich vom aktuellen Winkel auf 0, 90,180, 270 usw., je nachdem, welcher Wert näher liegt. Allerdings funktioniert fxstraighten für Genauso, aber mit Animation.

<!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>Using the Straighten method</h2>
   <p>
      You can see that there is no animation but the image has been straightened
   </p>
   <canvas id="canvas"></canvas>
   <img src="https://www.tutorialspoint.com/images/logo.png" id="img1" style="display: none" />
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      
      // Initiating the image element
      var imageElement = document.getElementById("img1");
      
      // Initiate an Image object
      var image = new fabric.Image(imageElement, {
         top: 10,
         left: 110,
         skewX: 15,
         angle: 45,
      });
      
      // Add it to the canvas
      canvas.add(image);
      
      // Using the straighten method
      image.straighten();
   </script>
</body>
</html>

Nach dem Login kopieren

Verwenden Sie die

fxstraightenMethode

Beispiel

In diesem Beispiel haben wir die Methode

fxstraighten verwendet, um das Bildobjekt zu begradigen und zeigt eine einfache Animation an. Das Bildobjekt hat einen 45-Grad-Winkel, Begradigen durch Zurückdrehen auf 0 Grad. Abgesehen davon ist die onChange-Funktion Sie wird bei jedem Schritt der Animation aufgerufen, und die Funktion onComplete wird nur bei aufgerufen Die Animation ist abgeschlossen, weshalb unser Bildobjekt letztendlich skaliert wird Bewegen Sie sich 1,5 Mal horizontal und um einen Wert von 130 nach links.

<!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>Using the fxStraighten method</h2>
   <p>
      You can see that the image gets straightened while also displaying an animation
   </p>
   <canvas id="canvas"></canvas>
   <img src="https://www.tutorialspoint.com/images/logo.png" id="img1" style="display: none" />
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      
      // Initiating the image element
      var imageElement = document.getElementById("img1");
      
      // Initiate an Image object
      var image = new fabric.Image(imageElement, {
         top: 10,
         left: 110,
         skewX: 15,
         angle: 45,
      });
      
      // Add it to the canvas
      canvas.add(image);
      
      // Using fxStraighten method
      image.fxStraighten({
         onChange() {
            canvas.renderAll();
         },
         onComplete() {
            image.set("left", 130);
            image.set("scaleX", 1.5);
            canvas.renderAll();
         },
      });
   </script>
</body>
</html>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWie begradige ich ein Bild mit Animation mit FabricJS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!