Comment définir l'opacité de la bordure lors du déplacement d'un rectangle à l'aide de FabricJS ?-js tutoriel-php.cn

Comment définir l'opacité de la bordure lors du déplacement d'un rectangle à l'aide de FabricJS ?

PHPz

Libérer： 2023-08-25 10:17:07

avant

782 Les gens l'ont consulté

Comment définir lopacité de la bordure lors du déplacement dun rectangle à laide de FabricJS ?

Dans ce tutoriel, nous définirons l'opacité de la bordure d'un rectangle lors du déplacement TissuJS. Le rectangle est l'une des différentes formes fournies par FabricJS. pour Pour créer un rectangle, nous devons créer une instance de la classe Fabric.Rect et l'ajouter à toile.

Nous pouvons utiliser la propriété borderOpacityWhenMoving pour modifier l'opacité d'un rectangle lors de son déplacement dans le canevas.

Syntaxe

new fabric.Rect({ borderOpacityWhenMoving: 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. 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 liées à l'objet dont borderOpacityWhenMoving est une propriété.

Option Key

borderOpacityWhenMoving - Cette propriété accepte un number spécifiant le niveau d'opacité auquel nous souhaitons que la bordure reste la même lors du déplacement du rectangle. Cela nous permet de contrôler l'opacité de la bordure lors du déplacement de l'objet rectangulaire. La valeur par défaut est 0,4.

Exemple 1

Affichage du comportement par défaut de la propriété borderOpacityWhenMoving

Regardons un exemple de code qui montre le comportement par défaut de la propriété boderOpacityWhenMoving. Lorsque nous sélectionnons l'objet rectangulaire et le déplaçons Autour du canevas, l'opacité de la bordure de sélection passe de 1 (entièrement opaque) à 0,4 Cela le rend un peu translucide.

<!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>Displaying the default behaviour of borderOpacityWhenMoving property</h2>
   <p>Move the rectangle to see the default behaviour of <b>borderOpacityWhenMoving</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",
      });

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

Copier après la connexion

Exemple 2

Passer borderOpacityWhenMoving comme clé

Regardons un exemple de code qui attribue une valeur à la propriété borderOpacityWhenMoving. Dans cet exemple, nous spécifions la valeur comme 0. Cela nous indique que lorsque nous déplaçons le rectangle, l'opacité de la bordure passera à 0 et deviendra invisible.

<!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 borderOpacityWhenMoving as key</h2>
   <p>Move the rectangle to see the change in value of <b>borderOpacityWhenMoving</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",
         borderOpacityWhenMoving: 0,
      });
     
       // 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!