Comment redresser un objet Image à l'aide de FabricJS ?-js tutoriel-php.cn

Table des matières

Grammaire

Exemple

Utilisation de la méthode redresser

Maison

interface Web

js tutoriel

Comment redresser un objet Image à l'aide de FabricJS ?

Sep 14, 2023 pm 04:53 PM

如何使用 FabricJS 拉直 Image 对象？

Dans ce tutoriel, nous apprendrons comment redresserdes objets image à l'aide de FabricJS. Nous pouvons créer un objet Image en créant une instance de fabric.Image. Puisqu'il s'agit d'un Éléments de base de FabricJS, nous pouvons également le personnaliser facilement via l'application Propriétés telles que l'angle, l'opacité, etc. Pour redresser les objets image que nous utilisons LissageMéthode.

Grammaire

straighten(): fabric.Object

Copier après la connexion

Passez la valeur à la propriété d'angle sans utiliser redresser Méthode

Exemple

Regardons un exemple de code pour voir à quoi ressemble notre objet Image lorsque redresse La méthode n’est pas utilisée. La méthode redresser redresser fonctionne en faisant pivoter un objet à partir de sa position L'angle actuel est de 0, 90, 180 ou 270, etc., selon l'angle le plus proche. angle La propriété définit l'angle de rotation de l'objet en degrés. Nous précisons ici L'angle est de 45. Mais comme nous n'avons pas appliqué l'attribut redresser, l'angle de rotation Il restera 45 degrés.

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
   &lt;!-- Adding the Fabric JS Library--&gt;
   &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
   &lt;h2&gt;
      Passing the angle property a value without using the straighten method
   &lt;/h2&gt;
   &lt;p&gt;You can see that the Image object has an angle of 45 degrees&lt;/p&gt;
   &lt;canvas id="canvas"&gt;&lt;/canvas&gt;
   &lt;img src="https://www.tutorialspoint.com/images/logo.png" id="img1" style="display: none" /&gt;
   &lt;script&gt;
      // 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: 50,
         left: 110,
         angle: 45,
      });
      
      // Add it to the canvas
      canvas.add(image);
   &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

Copier après la connexion

Utilisation de la méthode redresser

Exemple

Regardons un exemple de code pour voir à quoi ressemble un objet Image lorsque redresse Méthode utilisée conjointement avec la propriété angle. Bien que nous ayons fixé l'angle Tourné à 45 degrés, notre objet image sera redressé en le faisant revenir à 0 degré car nous avons utilisé la méthode de redressement.

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
   &lt;!-- Adding the Fabric JS Library--&gt;
   &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
   &lt;h2&gt;Using the straighten method&lt;/h2&gt;
   &lt;p&gt;
      You can see that the angle of rotation is 0 degree for the image object
   &lt;/p&gt;
   &lt;canvas id="canvas"&gt;&lt;/canvas&gt;
   &lt;img src="https://www.tutorialspoint.com/images/logo.png" id="img1" style="display: none" /&gt;
   &lt;script&gt;
      // 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: 50,
         left: 110,
         angle: 45,
      });
      
      // Add it to the canvas
      canvas.add(image);
      
      // Using the straighten method
      image.straighten();
   &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

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!

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn