Comment créer un objet image cloné à l'aide de FabricJS ?-js tutoriel-php.cn

Comment créer un objet image cloné à l'aide de FabricJS ?

PHPz

Libérer： 2023-08-24 09:01:25

avant

619 Les gens l'ont consulté

如何使用 FabricJS 创建克隆图像对象？

Dans ce tutoriel, nous montrerons comment créer un objet image cloné en utilisant 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 créer un objet image cloné, nous utilisons Méthode cloneAsImage.

Grammaire

cloneAsImage(callback: function, options: Object): fabric.Object

Copier après la connexion

Paramètres

callback (facultatif) - Ce paramètre est une fonction qui utilisera l'instance d'image clonée comme premier argument d'appel.
Options (facultatif) - Ce paramètre est un objet facultatif qui fournit une personnalisation supplémentaire à notre image clonée. En utilisant ce paramètre, nous pouvons définir le multiplicateur, recadrer l'image clonée ou supprimer la transformation de l'objet actuel.

Ne pas utiliser la méthode cloneAsImage

Exemple

Regardons un exemple de code pour comprendre comment un objet Image apparaît lorsque cloneAsImage La méthode n’est pas utilisée. Dans ce cas, une instance de fabric.Image elle-même apparaîtra dans notre toile.

<!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>Without using the cloneAsImage method</h2>
   <p>You can see that the image instance has been formed</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 a shadow object
      var shadow = new fabric.Shadow({
         color: "#308080",
         blur: 3,
      });
      
      // Initiate an Image object
      var image = new fabric.Image(imageElement, {
         top: 50,
         left: 110,
         skewX: 20,
         shadow: shadow,
      });
      
      // Add it to the canvas
      canvas.add(image);
   </script>
</body>
</html>

Copier après la connexion

Utilisez la méthode cloneAsImage

Exemple

Dans cet exemple, nous utilisons la méthode cloneAsImage pour démontrer que nous pouvons Utilisez la méthode de rappel pour créer un clone de l'instance fabric.Image. nous allons ajoutez en outre cette image clonée au canevas.

<!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 cloneAsImage method</h2>
   <p>You can see that a clone image instance has been formed</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 a shadow object
      var shadow = new fabric.Shadow({
         color: "#308080",
         blur: 3,
      });
      
      // Initiate an Image object
      var image = new fabric.Image(imageElement, {
         top: 50,
         left: 110,
         skewX: 20,
         shadow: shadow,
      });
      
      // Using cloneAsImage method
      image.cloneAsImage(function(Img) {
         canvas.add(Img);
      });
   </script>
</body>
</html>

Copier après la connexion