Maison > Article > interface Web > Comment définir des styles qui contrôlent les coins d'un rectangle à l'aide de FabricJS ?

Comment définir des styles qui contrôlent les coins d'un rectangle à l'aide de FabricJS ?

PHPzavant: 2023-08-24 09:37:141149parcourir

Comment définir des styles qui contrôlent les coins dun rectangle à laide de FabricJS ?

Dans ce tutoriel, nous apprendrons comment styliser les coins de contrôle Rectangle utilisant FabricJS. Le rectangle est l'une des différentes formes proposées par TissuJS. Afin de créer un rectangle, nous devons créer une instance Fabric.Rect et ajoutez-la au canevas.

Les coins de contrôle d'un objet nous permettent de redimensionner, d'é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 utiliser l'attribut cornerStyle pour changer le style.

Syntaxe

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

Option key

cornerStyle - Cette propriété accepte une string qui nous permet de spécifier le style dans lequel nous voulons contrôler le coin.

Exemple 1

Style par défaut des coins de contrôle

Regardons un exemple de code qui montre le style par défaut des coins de contrôle.

<!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 style of controlling corners</h2>
   <p>Click on the rectangle to see the default style of its controlling corners.</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

Passer cornerStyle comme clé avec la valeur "circle"

Nous pouvons spécifier le coin de contrôle activement sélectionné Objet en passant la valeur sous forme de "cercle" ou de "rectangle". Passer la valeur sous forme de "cercle" fera Les coins des contrôles sont arrondis, comme nous l'avons fait dans l'exemple ci-dessous :

<!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 cornerStyle as key with the value "circle"</h2>
   <p>Click on the rectangle to see the circle style of its controlling corners.</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",
         cornerStyle: "circle",
      });

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

字符串值传递对象 fabric

Déclaration：

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

Article précédent：Comment trouver tous les éléments correspondant à une condition spécifique en JavaScript ?Article suivant：Comment trouver tous les éléments correspondant à une condition spécifique en JavaScript ?

Articles Liés

Voir plus