recherche

Maison >interface Web >js tutoriel >FabricJS - Comment activer la mise à l'échelle de la rétine dans la chaîne URL d'un objet Line ?

FabricJS - Comment activer la mise à l'échelle de la rétine dans la chaîne URL d'un objet Line ?

PHPz
PHPzavant
2023-09-15 09:21:051060parcourir

FabricJS – 如何在 Line 对象的 URL 字符串中启用视网膜缩放？

Dans ce tutoriel, nous apprendrons comment activer la mise à l'échelle de la rétine dans une 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 fabric.Line, en spécifiant les coordonnées x et y de la ligne et en l'ajoutant au canevas. Pour activer la mise à l'échelle de la rétine dans la chaîne URL d'un objet Line, nous utilisons l'attribut enableRetinaScaling. Cela n'a aucun effet sur l'image elle-même, mais le canevas sera mis à l'échelle par devicePixelRatio pour un meilleur rendu sur les écrans Retina.

Syntaxe

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

Parameters

  • Options (facultatif) - Ce paramètre est une représentation URL d'un objet Line qui offre une personnalisation supplémentaire. La hauteur, la masse, le multiplicateur et bien d'autres propriétés peuvent être modifiées à l'aide de ce paramètre, dont enableRetinaScaling est une propriété.

Option key h3>

  • enableRetinaScaling : Cette propriété accepte une valeur Boolean qui nous permet d'activer la mise à l'échelle de la rétine pour l'image.

Utiliser l'attribut enableRetinaScaling et lui transmettre une valeur d'erreur

Exemple

Regardons un exemple de code pour voir la sortie enregistrée lors de l'utilisation de la méthode toDataURL sans utiliser l'attribut enableRetinaScaling. 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. Puisque nous avons transmis une fausse valeur à la propriété enableRetinaScaling, la mise à l'échelle de la rétine ne sera pas activée. 

<!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 enableRetinaScaling property and passing it a false value</h2>
   <p>
      You can open console from dev console and see the URL representation with retina scaling 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 Line object
      var line = new fabric.Line([200, 100, 100, 40], {
         stroke: "blue",
         strokeWidth: 20,
         angle: 70,
      });
      
      // Add it to the canvas
      canvas.add(line);
      // Using the toDataURL method
      console.log(line.toDataURL({
         enableRetinaScaling: false
      }));
   </script>
</body>
</html>

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

Exemple

Regardons un exemple de code pour voir quand La propriété enableRetinaScaling a reçu une vraie valeur. Dans ce cas, la mise à l'échelle de la rétine sera activé. 

<!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 enableRetinaScaling property and passing it a true value</h2>
   <p>
      You can open console from dev console and see the URL representation with retina scaling 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 Line object
      var line = new fabric.Line([200, 100, 100, 40], {
         stroke: "blue",
         strokeWidth: 20,
         angle: 70,
      });
      
      // Add it to the canvas
      canvas.add(line);
      
      // Using the toDataURL method
      console.log(line.toDataURL({
         enableRetinaScaling: 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 vérifier si le constructeur d'un objet est un objet JavaScript ?Article suivant：Comment vérifier si le constructeur d'un objet est un objet JavaScript ?

Articles Liés

Voir plus