recherche

Maison >interface Web >js tutoriel >FabricJS - Comment supprimer la conversion d'objet actuelle de la chaîne URL d'un objet Line ?

FabricJS - Comment supprimer la conversion d'objet actuelle de la chaîne URL d'un objet Line ?

PHPz
PHPzavant
2023-08-27 20:05:09946parcourir

FabricJS – 如何删除 Line 对象的 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 Line à l'aide de FabricJS. L'élément Line est l'un des éléments de base fournis dans FabricJS. Il est utilisé pour créer des lignes droites. Étant donné que les éléments de ligne sont géométriquement unidimensionnels et ne contiennent aucun intérieur, ils ne sont jamais remplis.

Nous pouvons créer un objet ligne en créant une instance de fabric.Line, en spécifiant les coordonnées x et y de la ligne et en l'ajoutant au canevas. Pour supprimer la transformation d'objet actuelle de la chaîne URL d'un objet Line, nous utilisons l'attribut withoutTransform.

Grammaire

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

Paramètres

  • Options (facultatif) - Ce paramètre est un objet qui fournit une personnalisation supplémentaire de la représentation URL de l'objet Ligne. La hauteur, la qualité, le format et bien d'autres propriétés peuvent être modifiées à l'aide de ce paramètre, dont 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 de l'objet actuel. En lui transmettant une valeur vraie, il n'y aura pas d'échelle, d'angle, de retournement ou d'inclinaison dans l'image de sortie finale.

Utilisez l'attribut withoutTransform et transmettez-lui une valeur d'erreur

Exemple

Regardons un exemple de code pour voir l'image de sortie lorsque la propriété withoutTransform reçoit une valeur fausse. Une fois que nous ouvrons la console à partir des outils de développement, nous pouvons voir la représentation URL de l'objet Line. 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 avons transmis les propriétés scaleY et angle à l'objet Line, en spécifiant respectivement le facteur d'échelle verticale et l'angle. Par conséquent, notre sortie sera mise à l’échelle verticalement et pivotée de 70 degrés. Cependant, comme nous avons également transmis une valeur fausse à la propriété withoutTransform, notre image de sortie finale contiendra toujours les propriétés scaleY et angle. 

<!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 the 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 and has an angle of 70 degrees
   </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 Line object
      var line = new fabric.Line([200, 100, 100, 40], {
         stroke: "blue",
         strokeWidth: 20,
         angle: 70,
         scaleY: 2,
      });

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

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

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

Exemple

Regardons un exemple de code pour voir à quoi ressemble l'image de sortie finale d'un objet Line lorsque vous utilisez la propriété withoutTransform et que vous lui transmettez une vraie valeur. 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 the 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 or an angle of 70 degrees
   </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 Line object
      var line = new fabric.Line([200, 100, 100, 40], {
         stroke: "blue",
         strokeWidth: 20,
         angle: 70,
         scaleY: 2,
      });

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

      // Using the toDataURL method
      console.log(line.toDataURL({ withoutTransform: true }));
   </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 aligner un conteneur Flexbox au centre à l'aide de JavaScript ?Article suivant：Comment aligner un conteneur Flexbox au centre à l'aide de JavaScript ?

Articles Liés

Voir plus