Comment créer un canevas avec un Triangle en utilisant FabricJS ?-js tutoriel-php.cn

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

WBOY

Libérer： 2023-09-15 12:33:03

avant

683 Les gens l'ont consulté

如何使用 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)

Copier après la connexion

Paramètres

Options (facultatif)− Ce paramètre est un objet< /em> 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

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>

Copier après la connexion

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>

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!