Comment désactiver la mise à l'échelle centrée de Textbox à l'aide de FabricJS ?-js tutoriel-php.cn

Comment désactiver la mise à l'échelle centrée de Textbox à l'aide de FabricJS ?

PHPz

Libérer： 2023-08-23 18:01:02

avant

1245 Les gens l'ont consulté

如何使用 FabricJS 禁用 Textbox 的居中缩放？

Dans ce tutoriel, nous apprendrons comment désactiver la mise à l'échelle centrée d'une zone de texte à l'aide de FabricJS. Nous pouvons personnaliser, étirer ou déplacer le texte écrit dans la zone de texte. Afin de créer une zone de texte, nous devons créer une instance de la classe Fabric.Textbox et l'ajouter au canevas. Lors de la mise à l'échelle par un contrôle, attribuez une valeur vraie à la propriété centeredScaling, en utilisant le centre comme origine de transformation de l'objet.

Syntax

new fabric.Textbox(text: String, { centeredScaling: Boolean }: Object)

Copier après la connexion

Parameters

text − Ce paramètre accepte une String qui est la chaîne de texte que nous voulons utiliser. Vous souhaitez afficher dans notre zone de texte.
Options (facultatif) - Ce paramètre est un objet qui permet une personnalisation supplémentaire de notre zone de texte. En utilisant ce paramètre, vous pouvez modifier la couleur, le curseur, la largeur du trait et d'autres propriétés de l'objet liées à l'attribut centeredScaling.

Options Keys

centeredScaling - Cette propriété accepte une valeur booléenne et nous permet de contrôler si l'objet doit utiliser son centre comme origine de transformation.

Exemple 1

Passez centeredScaling comme clé et attribuez-lui la valeur "true"

Regardons un exemple de code pour comprendre comment un objet zone de texte se comporte lorsque la propriété centeredScaling est activée. Lorsque l'on zoome sur un objet, l'origine de la transformation est le centre de la zone de texte.

<!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>Passing centeredScaling as key and assigning a "true" value to it</h2>
   <p>Try scaling the textbox to see that centered scaling has been enabled</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 textbox object
      var textbox = new fabric.Textbox("Success is the child of audacity.", {
         backgroundColor: "#ffe5b4",
         width: 400,
         top: 70,
         left: 110,
         centeredScaling: true,
      });

      // Add it to the canvas
      canvas.add(textbox);
   </script>
</body>
</html>

Copier après la connexion

Exemple 2

Désactivation de l'attribut centeredScaling

Nous pouvons désactiver l'attribut centeredScaling en lui attribuant la valeur "false". Cela n'utilisera plus le centre de la zone de texte comme centre de la transformation. Voici un exemple de code pour démontrer -

<!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>Disabling centeredScaling property</h2>
   <p>Try scaling the textbox to see that centered scaling has been disabled</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 textbox object
      var textbox = new fabric.Textbox("Success is the child of audacity.", {
         backgroundColor: "#ffe5b4",
         width: 400,
         top: 70,
         left: 110,
         centeredScaling: false,
      });

      // Add it to the canvas
      canvas.add(textbox);
   </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!