Maison > interface Web > js tutoriel > le corps du texte

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

王林
Libérer: 2023-08-27 19:21:10
avant
641 Les gens l'ont consulté

如何使用 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 
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, 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> 
Copier après la connexion

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> 
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!

source:tutorialspoint.com
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal