Comment redresser une image avec animation à l'aide de FabricJS ?-js tutoriel-php.cn

Comment redresser une image avec animation à l'aide de FabricJS ?

WBOY

Libérer： 2023-09-13 21:41:06

avant

964 Les gens l'ont consulté

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

Dans ce tutoriel, nous allons apprendre à redresser une image à l'aide de l'animation TissuJS. Nous pouvons créer un objet Image en créant une instance de fabric.Image. depuis C'est l'un des éléments de base de FabricJS et nous pouvons également le personnaliser facilement via l'application Angle, opacité et autres propriétés. Pour redresser l'image avec l'animation, nous utilisons Méthode fxStraighten.

Grammaire

fxStraighten(callbacks: Object): fabric.Object

Copier après la connexion

Paramètres

callbacks - Ce paramètre est un objet avec une fonction de rappel qui peut être utilisé Modifiez certaines propriétés liées à l'animation.

Utilisez la méthodede lissage

Exemple

Regardons un exemple de code pour comprendre comment un objet Image est affiché lors de l'utilisation de la méthode straighten Utilisé à la place de fxstraighten. Cela nous aidera à réaliser la différence entre eux. La méthode redresser simplement redresser fait pivoter l'objet de l'angle actuel vers 0, 90,180, 270, etc. selon celui qui est le plus proche. Cependant, fxstraighten fonctionne pour De la même manière, mais avec 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>

Copier après la connexion

Utilisez la méthode fxstraighten

Exemple

Dans cet exemple, nous avons utilisé la méthode fxstraighten pour redresser l'objet image et affiche une animation simple. L'objet image a un angle de 45 degrés, Redressez en retournant à 0 degré. En dehors de cela, la fonction onChange est Elle est appelée à chaque étape de l'animation, et la fonction onComplete n'est appelée qu'à L'animation est terminée, c'est pourquoi notre objet image finit par être mis à l'échelle Déplacez-vous horizontalement 1,5 fois et partez d'une valeur de 130.

<!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>

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!