Maison > Article > interface Web > Comment définir la position de l'image du haut à l'aide de FabricJS ?

Comment définir la position de l'image du haut à l'aide de FabricJS ?

WBOYavant: 2023-09-20 22:57:041300parcourir

Comment définir la position de limage du haut à laide de FabricJS ?

Dans ce tutoriel, nous apprendrons comment définir la position d'une image à l'aide de From Top 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 définir la position de l'image du haut, nous utilisons attribut top.

Grammaire

new fabric.Image( element: HTMLImageElement | HTMLCanvasElement | HTMLVideoElement | String, { top: Number }: Object, callback: function)

Paramètres

element - Ce paramètre accepte un HTMLImageElement, HTMLCanvasElement, HTMLVideoElement ou String représentant un élément d'image. La chaîne doit être une URL et sera chargée sous forme d'image.
Options (facultatif) - Ce paramètre est un objet qui permet une personnalisation supplémentaire de notre objet. En utilisant ce paramètre, vous pouvez modifier l'origine, la largeur du trait et de nombreuses autres propriétés associées à l'objet image dont top est l'attribut.
rappel (facultatif) - Ce paramètre est la fonction à appeler après l'application du filtre final.

Touche d'option

top - Ce bien accepte un Numéro qui nous permet de fixer la distance Dessus en toile avec image.

Apparence par défaut de l'objet Image

Exemple

Regardons un exemple de code pour comprendre à quoi ressemble un objet image lorsqu'il est top Propriété non utilisée.

<!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>Default appearance of the Image object</h2>
   <p>You can see the default appearance of Image object</p>
   <canvas id="canvas"></canvas>
   <img  src="https://www.tutorialspoint.com/images/logo.png" id="img1"   style="max-width:90%" / alt="Comment définir la position de l'image du haut à l'aide de FabricJS ?" >
   <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, {
         left: 50,
      });
      
      // Add it to the canvas
      canvas.add(image);
   </script>
</body>
</html>

Passez l'attribut top comme clé avec une valeur personnalisée

Exemple

Dans cet exemple, nous attribuons la valeur 70 à l'attribut top. Cela garantira Notre objet image est placé à 70 pixels du haut.

<!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>Passing the top property as key with a custom value</h2>
   <p>
      You can see that the Image object is placed at a distance of 70px from the top
   </p>
   <canvas id="canvas"></canvas>
   <img  src="https://www.tutorialspoint.com/images/logo.png" id="img1"   style="max-width:90%" / alt="Comment définir la position de l'image du haut à l'aide de FabricJS ?" >
   <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: 70,
         left: 50,
      });
      
      // Add it to the canvas
      canvas.add(image);
   </script>
</body>
</html>

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!

String 字符串 number 对象 fabric

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Expliquer la coercition non booléenne à booléenne en JavaScript ?Article suivant：Expliquer la coercition non booléenne à booléenne en JavaScript ?

Articles Liés

Voir plus