Comment supprimer l'ombre de l'objet actuel de la chaîne URL de l'objet IText à l'aide de FabricJS ?-js tutoriel-php.cn

Comment supprimer l'ombre de l'objet actuel de la chaîne URL de l'objet IText à l'aide de FabricJS ?

WBOY

Libérer： 2023-08-24 23:13:08

avant

1258 Les gens l'ont consulté

Comment supprimer lombre de lobjet actuel de la chaîne URL de lobjet IText à laide de FabricJS ?

Dans ce tutoriel, nous apprendrons comment supprimer l'ombre de l'objet actuel de la chaîne URL d'un objet IText à l'aide de FabricJS. La classe IText a été introduite dans FabricJS version 1.4, qui étend Fabric.Text et est utilisée pour créer des instances IText. Les instances IText nous donnent la liberté de sélectionner, couper, coller ou ajouter un nouveau texte sans configuration supplémentaire. Il existe également diverses combinaisons de touches et combinaisons souris/tactile prises en charge pour rendre le texte interactif qui ne sont pas disponibles dans Texte.

Cependant, Textbox basé sur IText nous permet de redimensionner le rectangle de texte et de l'envelopper automatiquement. Ce n'est pas le cas pour IText, car la hauteur ne s'ajuste pas en fonction des sauts de ligne. Nous pouvons manipuler des objets IText en utilisant diverses propriétés. De même, nous pouvons utiliser la propriété withoutShadow pour supprimer l'ombre de l'objet actuel de la chaîne URL de l'objet IText.

Grammaire

toDataURL({ withoutShadow: Boolean }: Object): String

Copier après la connexion

Paramètres

Options (facultatif) - Ce paramètre est un object qui fournit une personnalisation supplémentaire à la représentation URL de l'objet IText. Utilisez ce paramètre pour modifier la hauteur, la qualité, le format et de nombreuses autres propriétés, dont withoutShadow est une propriété.

Touche d'option

withoutShadow - Cette propriété accepte une valeur Boolean qui nous permet de nous débarrasser de l'ombre de l'objet courant.

Exemple 1

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

Regardons un exemple de code pour voir l'image de sortie lors du passage d'une valeur fausse à la propriété withoutShadow. Une fois que nous ouvrons la console depuis les outils de développement, nous pouvons voir la représentation URL de l'objet IText. Nous pouvons copier l'URL et la coller dans la barre d'adresse d'un nouvel onglet pour voir le résultat final. Dans cet exemple, nous transmettons la propriété Shadow à l'objet IText. Puisque nous avons également transmis une valeur fausse à la propriété withoutShadow, notre image de sortie finale contiendra toujours une 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 false value</h2>
   <p> You can open console from dev tools and see the output URL. You can copy that and paste it in the address bar of a new tab to see that the final image contains a shadow </p>
   <canvas id="canvas"></canvas>

   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      
      // Initiate a shadow object
      var shadow = new fabric.Shadow({
         blur: 25,
         color: "grey",
         offsetX: 12,
         offsetY: 15,
      });

      // Initiate an itext object
      var itext = new fabric.IText(
         "Add sample text here.Lorem ipsum dolor sit amet consectetur adipiscing.",{
            width: 300,
            left: 50,
            top: 70,
            fill: "#c70039",
            backgroundColor: "#c1dfed",
            stroke: "#c70039",
            originX: "center",
            shadow: shadow,
         }
      );
      
      // Add it to the canvas
      canvas.add(itext);

      // Using the toDataURL method
      console.log(itext.toDataURL({ withoutShadow: false }));
   </script>
</body>
</html>

Copier après la connexion

Exemple 2

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

Regardons un exemple de code pour voir à quoi ressemble l'image de sortie finale d'un objet IText lorsque l'on utilise la propriété withoutShadow et que l'on lui transmet une valeur vraie. Dans ce cas, notre image de sortie finale ne contiendra aucune 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 open console from dev tools and see the output URL. You can copy that and paste it in the address bar of a new tab to see that the final image does not contain a shadow </p>
   <canvas id="canvas"></canvas>

   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);

      // Initiate a shadow object
      var shadow = new fabric.Shadow({
         blur: 25,
         color: "grey",
         offsetX: 12,
         offsetY: 15,
      });

      // Initiate an itext object
      var itext = new fabric.IText(
         "Add sample text here.Lorem ipsum dolor sit amet consectetur adipiscing.",{
            width: 300,
            left: 50,
            top: 70,
            fill: "#c70039",
            backgroundColor: "#c1dfed",
            stroke: "#c70039",
            originX: "center",
            shadow: shadow,
         }
      );

      // Add it to the canvas
      canvas.add(itext);

      // Using the toDataURL method
      console.log(itext.toDataURL({ withoutShadow: true }));
   </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!