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

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

王林

Libérer： 2023-09-13 19:09:04

avant

1242 Les gens l'ont consulté

如何使用 FabricJS 删除 IText 对象的 URL 字符串中的当前对象转换？

Dans ce tutoriel, nous apprendrons comment supprimer la transformation d'objet actuelle (échelle, angle, retournement, inclinaison) 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é withoutTransform pour supprimer la transformation de l'objet actuel de la chaîne URL de l'objet IText.

Grammaire

toDataURL({ withoutTransform: 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. La hauteur, la qualité, le format et bien d'autres propriétés peuvent être modifiées à l'aide de ce paramètre, où withoutTransform est une propriété.

Touche d'option

withoutTransform - Cette propriété accepte une valeur boolean qui nous permet de nous débarrasser de la transformation d'objet actuelle. Lorsque vous lui transmettez une valeur vraie, il n'y aura pas d'échelle, d'angle, de retournement ou d'inclinaison dans l'image de sortie finale.

Exemple 1

Utilisez l'attribut withoutTransform 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é withoutTransform. 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 à l'objet IText une propriété scaleY qui spécifie le facteur d'échelle verticale. Notre sortie sera donc mise à l'échelle verticalement. Cependant, comme nous avons également transmis une valeur fausse à la propriété withoutTransform, notre image de sortie finale contiendra toujours la propriété scaleY.

<!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 withoutTransform 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 vertical scaling </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: 60,
            top: 70,
            fill: "#c70039",
            backgroundColor: "#c1dfed",
            stroke: "#c70039",
            originX: "center",
            shadow: shadow,
            scaleY: 2,
         }
      );

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

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

Copier après la connexion

Exemple 2

Utilisez l'attribut withoutTransform 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é withoutTransform et que l'on lui transmet une valeur vraie. Dans ce cas, notre image de sortie finale ne contiendra aucune transformation d'objet.

<!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 withoutTransform 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 vertical scaling </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: 60,
            top: 70,
            fill: "#c70039",
            backgroundColor: "#c1dfed",
            stroke: "#c70039",
            originX: "center",
            shadow: shadow,
            scaleY: 2,
         }
      );

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

      // Using the toDataURL method with withoutTransform
      console.log(
         itext.toDataURL({ withoutTransform: 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!