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

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

王林

Libérer： 2023-08-24 14:53:02

avant

806 Les gens l'ont consulté

如何使用 FabricJS 在移动时设置圆的边框不透明度？

Dans ce tutoriel, nous utiliserons FabricJS pour définir l'opacité de la bordure d'un cercle lors du déplacement. Les cercles sont l'une des différentes formes fournies par FabricJS. Afin de créer un cercle, nous devons créer une instance de la classe Fabric.Circle et l'ajouter au canevas. Nous pouvons utiliser la propriété borderOpacityWhenMoving pour modifier l'opacité du cercle lorsqu'il se déplace sur le canevas.

Syntaxe

new fabric.Circle({ borderOpacityWhenMoving: Number }: Object)

Copier après la connexion

Paramètres

Options (facultatif) - Ce paramètre est un objet< /em> qui fournit une personnalisation supplémentaire pour nos cercles. 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 numéro qui spécifie le degré d'opacité que nous voulons que la bordure soit lors du déplacement du cercle. Cela nous permet de contrôler l'opacité de la bordure lors du déplacement de l'objet circulaire. La valeur par défaut est 0,4.

Exemple 1

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

Regardons un exemple montrant le comportement par défaut de la propriété boderOpacityWhenMoving. Lorsque nous sélectionnons l'objet cercle et le déplaçons sur le canevas, l'opacité de la bordure de sélection passe de 1 (entièrement opaque) à 0,4, ce qui lui donne un aspect 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>Setting the border opacity of Circle while moving using FabricJS</h2>
      <p>Select the object and move it around. Notice that the opacity of the outline border reduces slightly while moving the object. This is the default behavior. Here we have not used the <b>boderOpacityWhenMoving</b> property.</p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         var cir = new fabric.Circle({
            left: 215,
            top: 100,
            fill: "",
            radius: 50,
            stroke: "#c154c1",
            strokeWidth: 5,
            borderColor: "#966fd6",
         });

         // Adding it to the canvas
         canvas.add(cir);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

Copier après la connexion

Exemple 2

Passage de borderOpacityWhenMoving comme clé

Regardons un exemple d'attribution d'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 cercle, l'opacité de la bordure passe à 0 et devient 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>How to set the border opacity of Circle while moving using FabricJS?</h2>
      <p>Select the object and move it around. You will notice that the border opacity becomes 0 when moving the object. Here we have set <b>borderOpacityWhenMoving</b> to 0.</p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         var cir = new fabric.Circle({
            left: 215,
            top: 100,
            fill: "",
            radius: 50,
            stroke: "#c154c1",
            strokeWidth: 5,
            borderColor: "#966fd6",
            borderOpacityWhenMoving: 0,
         });

         // Adding it to the canvas
         canvas.add(cir);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </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!