Comment définir le facteur d'échelle de bordure d'un rectangle à l'aide de FabricJS ?-js tutoriel-php.cn

Comment définir le facteur d'échelle de bordure d'un rectangle à l'aide de FabricJS ?

WBOY

Libérer： 2023-08-25 08:05:02

avant

1376 Les gens l'ont consulté

Comment définir le facteur déchelle de bordure dun rectangle à laide de FabricJS ?

Dans ce tutoriel, nous définirons le facteur d'échelle de bordure d'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.

Nous pouvons utiliser l'attribut borderScaleFactor pour spécifier le facteur d'échelle de la bordure de contrôle de l'objet.

Syntaxe

new fabric.Rect({ borderScaleFactor: Number }: Object)

Copier après la connexion

Paramètres

Options (facultatif) - Ce paramètre est un objet qui permet une personnalisation supplémentaire du rectangle. À l'aide de ce paramètre, vous pouvez modifier la couleur, le curseur, la largeur du trait et de nombreuses autres propriétés de l'objet liées à la propriété borderScaleFactor.

Touche d'option

borderScaleFactor - Cette propriété accepte un numéro qui spécifie l'épaisseur de la bordure. La valeur par défaut est 1.

Exemple 1

Comportement par défaut de la propriété borderScaleFactor

Regardons un exemple de code qui décrit le comportement par défaut de la propriété borderScaleFactor. Bien que nous l'ayons spécifié dans cet exemple, la valeur par défaut utilisée par borderScaleFactor est toujours 1 lorsqu'elle n'est pas spécifiée.

<!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 behaviour of borderScaleFactor property</h2>
   <p>Select the rectangle to see the default value of <b>borderScaleFactor</b></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",
         padding: 9,
         borderColor: "black",
         borderScaleFactor: 1,
      });

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

Copier après la connexion

Exemple 2

Passer borderScaleFactor comme clé

Regardons un exemple de code pour augmenter l'épaisseur de la bordure d'un objet rectangulaire lorsque sa sélection est activée. Dans cet exemple, nous attribuons borderScaleFactor à 5, qui spécifie l'épaisseur de notre bordure.

<!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 borderScaleFactor as key</h2>
   <p>Select the rectangle to see the changed value of <b>borderScaleFactor</b></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",
         padding: 9,
         borderColor: "black",
         borderScaleFactor: 5,
      });

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