Maison > Article > interface Web > Comment créer un canevas avec un Triangle en utilisant FabricJS ?

Comment créer un canevas avec un Triangle en utilisant FabricJS ?

WBOYavant: 2023-09-15 12:33:03704parcourir

如何使用 FabricJS 创建带有 Triangle 的画布？

Dans ce tutoriel, nous allons apprendre à créer un canevas avec un objet Triangle à l'aide de FabricJS. Triangle est l'une des différentes formes fournies par FabricJS. Afin de créer un triangle, nous devons créer une instance de la classe Fabric.Triangle et l'ajouter au canevas.

Syntaxe

new fabric.Triangle({ width: Number, height: Number }: Object)

Paramètres

Options (facultatif)− Ce paramètre est un objet qui fournit une personnalisation supplémentaire à notre triangle. En utilisant ce paramètre, vous pouvez modifier les propriétés liées à l'objet triangle telles que la couleur, le curseur, la largeur du trait, et ses largeur et hauteur sont des propriétés.

Touche d'option

Width - Cette propriété accepte un number qui spécifie la largeur de l'objet. Sa valeur par défaut est 100.
Hauteur - Cette propriété accepte un Nombre qui spécifie la hauteur de l'objet. Sa valeur par défaut est 100.

Exemple 1

Créez une instance Fabric.Triangle() et ajoutez-la au canevas strong>

Regardons un exemple de code pour voir comment ajouter un triangle au canevas. Ici, nous créons un objet d'une largeur de 100px et d'une hauteur de 70px. De plus, nous avons utilisé la couleur « Orange » comme couleur de remplissage.

<!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>Creating an instance of fabric.Triangle() and adding it to our canvas</h2>
   <p>You can move around the triangle and interact with it</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 triangle object
      var triangle = new fabric.Triangle({
         left: 55,
         top: 60,
         width: 100,
         height: 70,
         fill: "orange",
      });

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

Exemple 2

Utilisation de la méthode set pour manipuler un objet Triangle

Dans cet exemple, nous utilisons la méthode set pour définir la valeur. Toutes les propriétés liées au trait, à la largeur du trait, à l'angle, à l'échelle, à la rotation, etc. peuvent être modifiées à l'aide de cette méthode.

<!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>Manipulating the Triangle object by using the set method</h2>
   <p>You can move around the triangle and interact with it</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 triangle object
      var triangle = new fabric.Triangle();

      // Set the properties
      triangle.set("height", 70);
      triangle.set("width", 100);
      triangle.set("stroke", "#2a52be");
      triangle.set("strokeWidth", 5);
      triangle.set("fill", "#d9603b");
      triangle.set("top", 60);
      triangle.set("left", 55);

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

number 对象 fabric

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Programme JavaScript pour trouver la moyenne de la plage dans un tableauArticle suivant：Programme JavaScript pour trouver la moyenne de la plage dans un tableau

Articles Liés

Voir plus