Comment définir la couleur d'arrière-plan d'une sélection elliptique à l'aide de FabricJS ?-js tutoriel-php.cn

Comment définir la couleur d'arrière-plan d'une sélection elliptique à l'aide de FabricJS ?

PHPz

Libérer： 2023-09-10 13:13:02

avant

1500 Les gens l'ont consulté

Comment définir la couleur darrière-plan dune sélection elliptique à laide de FabricJS ?

Dans ce tutoriel, nous apprendrons comment définir la couleur d'arrière-plan d'une sélection elliptique à l'aide de FabricJS. L'ovale est l'une des différentes formes fournies par FabricJS. Afin de créer une ellipse, nous devons créer une instance de la classe Fabric.Ellipse et l'ajouter au canevas. Lorsqu'un objet est activement sélectionné, nous pouvons modifier ses dimensions, le faire pivoter ou le manipuler. Nous pouvons changer la couleur d'arrière-plan de la sélection elliptique en utilisant la propriété selectionBackgroundColor.

Syntaxe

new fabric.Ellipse({ selectionBackgroundColor : String }: Object)

Copier après la connexion

Paramètres

Options (facultatif) - Ce paramètre est un Objet< /em> offrant une personnalisation supplémentaire à notre ellipse. Grâce à ce paramètre, vous pouvez modifier la couleur, le curseur, la largeur du trait et bien d'autres propriétés liées à l'objet dont selectionBackgroundColor est une propriété.

Touche d'option

selectionBackgroundColor - Cette propriété accepte une chaîne qui détermine la couleur d'arrière-plan de la sélection.

Exemple 1

attribut selectionBackgroundColor< 时的默认颜色/em> non utilisé

Prenons un exemple pour comprendre comment la sélection est affichée lorsque l'attribut selectionBackgroundColor n'est pas utilisé. À partir de cet exemple, nous pouvons voir que la zone de sélection ou la zone derrière l'objet n'a pas de couleur.

<!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 background color of selection of Ellipse using FabricJS?</h2>
      <p>Select the object and you will observe that the selection background has no color. Here we have not applied the <b>selectionBackgroundColor</b> property. </p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");

         // Initiate an ellipse instance
         var ellipse = new fabric.Ellipse({
            left: 115,
            top: 50,
            rx: 80,
            ry: 50,
            fill: "#ff1493",
         });

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

Copier après la connexion

Exemple 2

Passage de la propriété selectionBackgroundColor comme clé

Dans cet exemple, nous attribuons une valeur à la propriété < em>selectionBackgroundColor. Dans ce cas, nous lui passons la couleur "darkBlue", donc la zone de sélection apparaît en bleu foncé.

<!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 background color of selection of Ellipse using FabricJS?</h2>
      <p>Select the object and you will observe that the background of the selection appears dark blue. This is because we have set the <b>selectionBackgroundColor</b> as dark blue. </p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");

         // Initiate an ellipse instance
         var ellipse = new fabric.Ellipse({
            left: 115,
            top: 50,
            rx: 80,
            ry: 50,
            fill: "#ff1493",
            selectionBackgroundColor: "darkBlue",
         });

         // Adding it to the canvas
         canvas.add(ellipse);
         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!