Comment définir la taille des coins de contrôle d'un rectangle à l'aide de FabricJS ?-js tutoriel-php.cn

Comment définir la taille des coins de contrôle d'un rectangle à l'aide de FabricJS ?

WBOY

Libérer： 2023-09-21 11:17:02

avant

1129 Les gens l'ont consulté

Comment définir la taille des coins de contrôle dun rectangle à laide de FabricJS ?

Dans ce tutoriel, nous apprendrons comment définir la taille des coins de contrôle Rectangle utilisant FabricJS. L'angle de contrôle de l'objet nous permet de le mettre à l'échelle et de l'étirer ou changer son emplacement.

Nous pouvons personnaliser les coins de contrôle de plusieurs manières, par exemple en ajoutant des Coloriez-le, changez sa taille et bien plus encore. Nous pouvons utiliser cornerSize pour changer la taille propriété.

Syntaxe

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

Copier après la connexion

Paramètres

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

Option Key

cornerSize - Cette propriété accepte un number qui nous permet de manipuler la taille des coins de l'objet sélectionné. La valeur par défaut est 13.

Exemple 1

Contrôler la taille par défaut des coins

Regardons un exemple de code qui décrit la taille par défaut des coins de contrôle Lorsqu'un objet rectangulaire est activement sélectionné.

<!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 size of the controlling corners</h2>
   <p>Select the rectangle to see the default size of the 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>

Copier après la connexion

Exemple 2

Passer cornerSize comme clé avec une valeur personnalisée

Dans cet exemple, nous passerons la propriété cornerSize comme clé avec la valeur 17. nous Vous pouvez voir comment cela change la taille de nos coins de contrôle lorsque l'objet rectangulaire Choisi.

<!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 cornerSize as key with a custom value</h2>
   <p>Select the rectangle to see the size of the 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",
         cornerSize: 17,
      });

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