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

Comment ajouter un trait à un rectangle en utilisant FabricJS ?

王林

Libérer： 2023-09-06 12:01:07

avant

961 Les gens l'ont consulté

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

Dans ce tutoriel, nous apprendrons comment ajouter un trait à un rectangle à l'aide de FabricJS. Le rectangle est l'une des différentes formes fournies par FabricJS. Afin de créer un rectangle, nous devons créer une instance de la classe Fabric.Rect et l'ajouter au canevas.

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

Syntaxe

new fabric.Rect({ stroke : String }: Object)

Copier après la connexion

Paramètres

Options (facultatif) - Ce paramètre est un objet qui fournit une personnalisation supplémentaire à notre rectangle. En utilisant ce paramètre, vous pouvez modifier la couleur, le curseur, la largeur du trait et de nombreuses autres propriétés associées à l'objet pour lequel Stroke est un attribut.

option key

Stroke - Cette propriété accepte une string et détermine la couleur de la bordure de cet objet Passage de clé

Regardons un exemple de code pour comprendre comment est un objet rectangulaire. affiché lors de l’utilisation de la propriété

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é « #000080 », qui est bleu marine.

<!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 the navy blue border around the rectangle</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 rectangle object
      var rect = new fabric.Rect({
         left: 55,
         top: 70,
         width: 170,
         height: 70,
         fill: "#f4f0ec",
         stroke: "#000080",
         strokeWidth: 9,
      });

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

Copier après la connexion

Exemple 2

Passer la valeur rgba à l'attribut lines

Dans cet exemple, nous verrons comment attribuer une valeur "rgba" à l'attribut 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é une valeur rgba de (0,0,128,0.8), qui est bleu marine 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 the colour added using rgba to the rectangle&#39;s stroke</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 rectangle object
      var rect = new fabric.Rect({
         left: 55,
         top: 70,
         width: 170,
         height: 70,
         fill: "#f4f0ec",
         stroke: "rgba(0,0,128,0.8)",
         strokeWidth: 9,
      });

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