Maison >interface Web >js tutoriel >Comment définir la couleur d'arrière-plan d'une sélection elliptique à l'aide de FabricJS ?

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

PHPzavant: 2023-09-10 13:13:021493parcourir

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)

Paramètres

Options (facultatif) - Ce paramètre est un Objet 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 em> qui détermine la couleur d'arrière-plan de la sélection.

Exemple 1

attribut selectionBackgroundColor 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>

Exemple 2

Passage de la propriété selectionBackgroundColor comme clé

Dans cet exemple, nous attribuons une valeur à la propriété 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>

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!

字符串对象 fabric

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Quelle est la différence entre les méthodes forEach() et map() en JavaScript ?Article suivant：Quelle est la différence entre les méthodes forEach() et map() en JavaScript ?

Articles Liés

Voir plus