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

FabricJS - Comment définir le multiplicateur de zoom dans la chaîne URL d'un objet Line ?

王林

Libérer： 2023-08-28 12:25:11

avant

719 Les gens l'ont consulté

FabricJS – 如何在 Line 对象的 URL 字符串中设置缩放倍数？

Dans ce tutoriel, nous apprendrons comment définir le multiplicateur de zoom dans 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 fabric.Line, en spécifiant les coordonnées x et y de la ligne et en l'ajoutant au canevas. Pour définir le multiplicateur de zoom dans la chaîne URL de l'objet Line, nous utilisons l'attribut multiplier.

Grammaire

toDataURL({ multiplier: Number }: Object): String

Copier après la connexion

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 multiplier est une propriété.

Touche d'option

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

N'utilisez pas l'attribut multiplier

Exemple

Regardons un exemple de code pour voir l'image de sortie sans utiliser l'attribut multiplier. 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 n'utilisons pas l'attribut multiplier, 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 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 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());
   </script>
</body>
</html>

Copier après la connexion

Utilisez l'attribut Multiplicateur

Exemple

Regardons un exemple de code pour voir à quoi ressemble l'image de sortie finale d'un objet Line lors de l'utilisation de la propriété multiplier. 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 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 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({ 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!