Maison > Article > interface Web > Comment convertir un objet IText en une chaîne URL de type données à l'aide de FabricJS ?

Comment convertir un objet IText en une chaîne URL de type données à l'aide de FabricJS ?

王林avant: 2023-09-14 13:21:161249parcourir

如何使用 FabricJS 将 IText 对象转换为类似数据的 URL 字符串？

Dans ce tutoriel, nous apprendrons comment convertir un objet IText en une chaîne URL de type données à 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 convertir un objet IText en une chaîne URL de type données à l'aide de la méthode toDataURL.

Grammaire

toDataURL(options: Object): String

Paramètres

options (facultatif) - Ce paramètre est un objet qui fournit une personnalisation supplémentaire pour la représentation URL de l'objet IText. En utilisant ce format de paramètre, la qualité, le multiplicateur et de nombreuses autres propriétés peuvent être modifiés.

Exemple 1

N'utilisez pas la valeur par défaut de la méthode toDataURL

Regardons un exemple de code pour voir à quoi ressemble un objet IText sans utiliser la méthode toDataURL. Lors de l'utilisation de la méthode toDataURL, la représentation URL de l'objet IText est renvoyée. Dans cet exemple, nous créons un objet itext et lui attribuons diverses propriétés, telles que le contour, le remplissage, l'ombre, etc. Cependant, comme nous n'utilisons pas la méthode toDataURL, nous ne pourrons pas nous connecter à la console au lieu de la valeur par défaut de l'objet itext.

<!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>Default value without using toDataURL method</h2>
   <p>You can open console from dev tools and see the logged output</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);

      // Console logging the itext object
      console.log("The itext object is as follows: ", itext);
   </script>
</body>
</html>

Exemple 2

Utilisez la méthode toDataURL

Regardons un exemple de code pour voir la sortie enregistrée lors de l'utilisation de la méthode toDataURL. 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.

<!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 toDataURL method</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 image </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());
   </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 verrouiller l'inclinaison horizontale d'Ellipse à l'aide de FabricJS ?Article suivant：Comment verrouiller l'inclinaison horizontale d'Ellipse à l'aide de FabricJS ?

Articles Liés

Voir plus