Maison >interface Web >js tutoriel >Comment définir un motif de tirets pour les coins de contrôle d'un rectangle à l'aide de FabricJS ?

Comment définir un motif de tirets pour les coins de contrôle d'un rectangle à l'aide de FabricJS ?

WBOYavant: 2023-08-30 15:21:031024parcourir

如何使用 FabricJS 为矩形的控制角设置虚线图案？

Dans ce tutoriel, nous allons apprendre à utiliser FabricJS pour implémenter un motif en pointillés qui contrôle les coins d'un rectangle. Les coins de contrôle d'un objet nous permettent de le redimensionner, de l'étirer ou de changer sa position.

Nous pouvons personnaliser le coin de contrôle de plusieurs manières, par exemple en y ajoutant une couleur spécifique, en modifiant sa taille, etc. Nous pouvons également spécifier un motif de tirets qui contrôle les coins à l'aide de l'attribut cornerDashArray.

Syntaxe

new fabric.Rect({ cornerDashArray: Array }: Object)

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 les propriétés liées à l'objet dont cornerDashArray est un attribut, telles que la couleur, le curseur, la largeur du trait et bien d'autres propriétés.

Option Key

cornerDashArray - Cette propriété accepte un Array qui nous permet de spécifier un motif de tiret qui contrôle les coins. Par exemple, si nous transmettons un tableau avec les valeurs [2,3], il représente un motif de tirets de 2 pixels et d'espaces de 3 pixels, et ce motif se répète à l'infini.

Exemple 1

Apparence par défaut des coins de contrôle

Regardons un exemple de code qui décrit l'apparence par défaut des coins de contrôle objet rectangulaire. Puisque nous n'utilisons pas l'attribut cornerDashArray, il n'y a pas Affichage du motif de tiret.

<!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>Default appearance of controlling corners</h2>
   <p>Select the rectangle to see the default appearance</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: 125,
         top: 90,
         width: 170,
         height: 70,
         fill: "#cf1020",
         borderColor: "black",
         borderScaleFactor: 3,
         cornerColor: "#3b7a57",
      });

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

Exemple 2

Passer la propriété cornerDashArray en tant que clé

Dans cet exemple, nous transmettons la valeur [1,2,1] à la propriété cornerDashArray. ce Cela signifie qu'un motif en pointillés sera créé avec une longue ligne de 1 px suivie de Un espace de 2 px, puis tracez à nouveau une longue ligne de 1 px, après quoi un espace de 1 px sera dessiné Production et plus encore.

<!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 cornerDashArray property as key</h2>
   <p>Select the rectangle to see the appearance of the controlling corners with dash pattern</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: 125,
         top: 90,
         width: 170,
         height: 70,
         fill: "#cf1020",
         borderColor: "black",
         borderScaleFactor: 3,
         cornerColor: "#3b7a57",
         cornerDashArray: [1, 2, 1],
      });

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

Déclaration：

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

Article précédent：Comment puis-je modifier la chaîne à afficher en exposant à l'aide de JavaScript ?Article suivant：Comment puis-je modifier la chaîne à afficher en exposant à l'aide de JavaScript ?

Articles Liés

Voir plus