Maison >interface Web >js tutoriel >FabricJS - Comment supprimer l'ombre de l'objet actuel dans l'image clonée ?

FabricJS - Comment supprimer l'ombre de l'objet actuel dans l'image clonée ?

王林avant: 2023-09-16 13:13:271201parcourir

FabricJS – 如何删除克隆图像中当前对象的阴影？

Dans ce tutoriel, nous apprendrons comment supprimer l'ombre d'un objet actuel dans 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 supprimer l'ombre de l'objet actuel dans l'image clonée, nous utilisons l'attribut withoutShadow.

Grammaire

cloneAsImage( callback: function, { withoutShadow: Boolean }: 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 un multiplicateur, recadrer l'image clonée, supprimer la transformation de l'objet actuel ou modifier de nombreuses autres propriétés, dont withoutShadow est une propriété.

Touche d'option

withoutShadow - Cette propriété accepte une valeur Boolean qui détermine si l'ombre actuelle de l'objet est supprimée. Cet attribut est facultatif.

Utilisez l'attribut withoutShadow et transmettez-lui une "vraie" valeur

Exemple

Regardons un exemple de code pour voir comment un objet Image cloné apparaît lorsque vous utilisez la propriété withoutShadow et que vous lui transmettez une valeur « vraie ». Ici, l'objet image s'est vu attribuer une propriété d'ombre. Cependant, puisque nous avons passé une valeur "vraie" à la propriété withoutShadow, l'ombre de l'objet sera supprimée et notre image clonée n'aura plus d'ombre.

<!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 withoutShadow property and passing it a ‘true’ value</h2>
   <p>You can see that clone image does not have a shadow</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: "black",
         blur: 12,
      });
      
      // 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", 150);
            Img.set("left", 150);
            canvas.add(Img);
         },
         {
            withoutShadow: true,
         }
      );
   </script>
</body>
</html>

Utilisez l'attribut withoutShadow et transmettez-lui une "fausse" valeur

Exemple

Dans cet exemple, nous avons utilisé l'attribut withoutShadow et lui avons transmis une valeur "fausse". Par conséquent, l'ombre de notre objet cloné ne sera pas supprimé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>Using the withoutShadow property and passing it a ‘false’ value</h2>
   <p>You can see that clone image contains a shadow</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: "black",
         blur: 12,
      });
      
      // 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", 150);
            Img.set("left", 150);
            canvas.add(Img);
         },
         {
            withoutShadow: false,
         }
      );
   </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!

值传递对象 fabric

Déclaration：

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

Article précédent：Comment trouver les véritables coordonnées du centre d'un objet Line à l'aide de FabricJS ?Article suivant：Comment trouver les véritables coordonnées du centre d'un objet Line à l'aide de FabricJS ?

Articles Liés

Voir plus