Comment définir le multiplicateur de zoom dans la chaîne URL d'un objet IText à l'aide de FabricJS ?-js tutoriel-php.cn

Comment définir le multiplicateur de zoom dans la chaîne URL d'un objet IText à l'aide de FabricJS ?

PHPz

Libérer： 2023-08-24 17:01:16

avant

1229 Les gens l'ont consulté

如何使用 FabricJS 在 IText 对象的 URL 字符串中设置缩放倍数？

Dans ce tutoriel, nous apprendrons comment définir le multiplicateur de zoom dans 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 définir un multiplicateur de mise à l'échelle dans la chaîne URL de l'objet IText à l'aide de la propriété multiplicateur.

Grammaire

toDataURL({ multiplier: Number }: 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ù le multiplicateur est la propriété.

Touche d'option

multiplier - Cette propriété accepte une valeur Number qui représente le multiplicateur par lequel l'image de sortie IText finale est mise à l'échelle. La valeur par défaut est 1.

Exemple 1

Ne pas utiliser l'attribut multiplicateur

Regardons un exemple de code pour voir l'image de sortie lorsque vous n'utilisez pas l'attribut multiplicateur. 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. Puisque nous n'utilisons pas l'attribut multiplicateur, la valeur du multiplicateur par défaut sera utilisée, qui est 1.

<!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 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: 310,
            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>

Copier après la connexion

Exemple

Utiliser l'attribut multiplicateur

Regardons un exemple de code pour voir à quoi ressemble l'image de sortie finale d'un objet IText lors de l'utilisation de la propriété multiplicateur. Dans ce cas, nous lui avons attribué la valeur 2. Ainsi, l'image 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 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 the final 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: 310,
            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({ 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!