Comment définir les propriétés d'un objet image à partir des options à l'aide de FabricJS ?-js tutoriel-php.cn

Comment définir les propriétés d'un objet image à partir des options à l'aide de FabricJS ?

王林

Libérer： 2023-08-23 08:01:04

avant

1489 Les gens l'ont consulté

Comment définir les propriétés dun objet image à partir des options à laide de FabricJS ?

Dans ce tutoriel, nous apprendrons comment définir les propriétés d'un objet image à partir des options

Utilisez FabricJS. Nous pouvons créer un objet Image en créant une instance de fabric.Image Puisqu'il s'agit d'un des éléments de base de FabricJS, nous pouvons également le modifier facilement en le personnalisant Appliquez des propriétés telles que l'angle, l'opacité, etc. afin de définir les propriétés de l'objet image de Options, nous utilisons la méthode setOptions.

Grammaire

setOptions(options: Object)

Copier après la connexion

Paramètres

options (facultatif) - Ce paramètre est un Object qui fournit des Personnalisez notre objet. Utilisez ce paramètre origine, largeur de trait et bien d'autres choses D'autres propriétés liées à l'objet image peuvent être modifiées.

Apparence par défaut des objets image

La traduction chinoise de

Exemple

est :

Exemple

Regardons un exemple de code pour voir comment un objet Image est affiché lorsque setOptions est présent.

Méthode 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 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 les propriétés d'un objet image à partir des options à 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);
      
      // Add it to the canvas
      canvas.add(image);
   </script>
</body>
</html>

Copier après la connexion

Utilisez la méthode setOptions

La traduction chinoise de

Exemple

est :

Exemple

Dans cet exemple, nous utilisons la méthode setOptions pour définir les propriétés de l'image

Options Ici, nous avons appliqué un trait de couleur « vert » de 4 px et réajusté la valeur. choix. Ici, nous avons appliqué un trait de 4 pixels avec la couleur "vert" et redimensionné le Définissez la position de l'objet Image sur une valeur supérieure de 30 et une valeur gauche de 100.

<!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 setOptions method</h2>
   <p>
      You can see that the object's properties have been set using setOptions method
   </p>
   <canvas id="canvas"></canvas>
   <img  src="https://www.tutorialspoint.com/images/logo.png" id="img1"   style="max-width:90%" / alt="Comment définir les propriétés d'un objet image à partir des options à 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);
      
      // Using setOptions method
      image.setOptions({
         left: 100,
         top: 30,
         stroke: "green",
         strokeWidth: 4,
      });
      
      // Add it to the canvas
      canvas.add(image);
   </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!