Comment ajouter un trait à un triangle en utilisant FabricJS ?-js tutoriel-php.cn

Comment ajouter un trait à un triangle en utilisant FabricJS ?

WBOY

Libérer： 2023-09-21 13:49:02

avant

707 Les gens l'ont consulté

如何使用 FabricJS 向三角形添加描边？

Dans ce tutoriel, nous apprendrons comment ajouter un trait à un 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.

Notre objet triangle peut être personnalisé de nombreuses manières, comme en changeant ses dimensions, en ajoutant une couleur de fond ou en changeant la couleur des lignes tracées autour de l'objet. Nous pouvons le faire en utilisant l'attribut Stroke.

Syntaxe

new fabric.Triangle({ stroke : String }: 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 des propriétés telles que la couleur, le curseur, la largeur du trait et de nombreuses autres propriétés liées à l'objet pour lequel Stroke est un attribut.

< /ul>
Options Keys
Stroke - Cette propriété accepte une String pour déterminer la couleur de la bordure de cet objet.
Exemple 1

Passer des traits sous forme de clés avec des valeurs hexadécimales strong>

Regardons un exemple de code pour comprendre comment un objet triangle s'affiche lors de l'utilisation de l'attribut lines. Les codes de couleur hexadécimaux commencent par « # » suivi d'un nombre à six chiffres représentant la couleur. Dans ce cas, nous avons utilisé "#3cb371", qui est Mid-Sea Green.

<!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>Passing stroke as key with a hexadecimal value</h2>
   <p>You can see that the stroke around the triangle is of medium sea-green colour</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: 120,
         top: 30,
         width: 90,
         height: 80,
         fill: "#ecebbd",
         stroke: "#3cb371",
         strokeWidth: 7,
      });

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

Copier après la connexion

Exemple 2

Passer la valeur rgba à Strokeproperty

Dans cet exemple, nous verrons comment spécifier une valeur rgba pour la propriété Stroke. Au lieu de codes de couleur hexadécimaux, nous pouvons utiliser les valeurs RGBA qui signifient : rouge, vert, bleu et alpha. Le paramètre alpha spécifie l'opacité de la couleur. Dans cet exemple, nous avons utilisé la valeur rgba (46,139,87,0,8), qui est un vert d'eau avec une opacité de 0,8.

<!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>Passing an rgba value to the stroke property</h2>
   <p>You can see that the stroke colour is coming from the RGBA value now</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: 120,
         top: 30,
         width: 90,
         height: 80,
         fill: "#ecebbd",
         stroke: "rgba(46,139,87,0.8)",
         strokeWidth: 7,
      });

      // 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!