Maison > Article > interface Web > Comment définir un multiplicateur pour mettre à l'échelle une image clonée à l'aide de FabricJS ?

Comment définir un multiplicateur pour mettre à l'échelle une image clonée à l'aide de FabricJS ?

王林avant: 2023-08-27 19:21:10590parcourir

如何使用 FabricJS 设置倍数来缩放克隆图像？

Dans ce tutoriel, nous apprendrons comment définir un multiplicateur pour mettre à l'échelle une image clonée à l'aide de FabricJS. Nous pouvons créer un objet Image en créant une instance de fabric.Image. Puisqu'il s'agit de l'un des éléments de base de FabricJS, nous pouvons également le personnaliser facilement en appliquant des propriétés telles que l'angle, l'opacité, etc. Pour définir le multiplicateur afin de mettre à l'échelle l'image clonée, nous utilisons l'attribut multiplier.

Grammaire

cloneAsImage( callback: function, { multiplier: Number}: Object): fabric.Object

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, supprimer la transformation de l'objet actuel ou modifier de nombreuses propriétés, dont Multiplier est une propriété.

Touche d'option

multiplier - Cette propriété accepte une valeur Number qui représente le multiplicateur par lequel l'image de sortie finale est mise à l'échelle. La valeur par défaut est 1.

N'utilisez pas l'attribut multiplier

Exemple

Regardons un exemple de code pour voir comment un objet Image cloné s'affiche lorsque la propriété multiplier n'est pas utilisée. Dans ce cas, la valeur multiplicatrice par défaut de 1 est 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>Without using the multiplier property</h2> 
   <p>You can see that the clone image uses the default multiplier</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>

Utilisez l'attribut Multiplicateur

Exemple

Dans cet exemple, nous avons utilisé l'attribut multiplier et lui avons transmis la valeur 2 pour démontrer que l'image clonée finale sera mise à l'échelle deux fois dans les directions x et y.

<!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 multiplier property</h2>
   <p>You can see that the clone image has been scaled</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) {
            Img.set("top", 90);
            canvas.add(Img);
         },
         {
            multiplier: 2,
         }
      );
   </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!

Déclaration：

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

Article précédent：Comment écrire un raccourci pour la méthode document.getElementById() en JavaScript ?Article suivant：Comment écrire un raccourci pour la méthode document.getElementById() en JavaScript ?

Articles Liés

Voir plus