Maison > Article > interface Web > Comment définir la couleur d'un coin de contrôle de cercle à l'aide de FabricJS ?

Comment définir la couleur d'un coin de contrôle de cercle à l'aide de FabricJS ?

WBOYavant: 2023-08-23 10:13:141001parcourir

Comment définir la couleur dun coin de contrôle de cercle à laide de FabricJS ?

Dans ce tutoriel, nous utiliserons FabricJS pour définir la couleur du coin de contrôle d'un cercle. La propriété cornerColor nous permet de manipuler la couleur des coins du contrôle lorsque l'objet est actif.

Syntaxe

new fabric.Circle({ cornerColor: String }: Object)

Paramètres

options (facultatif) - Ce paramètre est un objet qui fournit des options pour une personnalisation supplémentaire du cercle. En utilisant ce paramètre, vous pouvez modifier la couleur, le curseur, la largeur du trait et de nombreuses autres propriétés de l'objet liées à la propriété cornerColor.

Option Key

cornerColor - Cette propriété accepte une string qui nous permet d'attribuer une couleur aux coins de contrôle de l'objet sélectionné.

Exemple 1

Passer cornerColor comme clé et utiliser le nom de la couleur comme valeur

Prenons un exemple de changement de couleur en utilisant l'attribut cornerColor. Dans ce cas, nous attribuons la valeur « noir » à la touche, ce qui fait apparaître le coin de contrôle en noir.

<!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 colour of controlling corners of circle using FabricJS</h2>
      <p>Select the object and notice the color of its controlling corners. Here we have used the <b>cornerColor</b> property to set the corners black. </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: "white",
            radius: 50,
            stroke: "#c154c1",
            strokeWidth: 5,
            borderColor: "#daa520",
            cornerColor: "black"
         });
         
         // Adding it to the canvas
         canvas.add(cir);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

Exemple 2

Attribution d'une valeur RGBA à la propriété cornerColor

Nous pouvons attribuer une valeur RGBA à la valeur string de la clé au lieu de simplement transmettre un simple nom de couleur. RGBA signifie rouge, vert, bleu et transparence (alpha). Regardons un exemple de la façon d'y parvenir −

<!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 colour of controlling corners of circle using FabricJS</h2>
      <p>Select the object and notice the color of its controlling corners. Here we have used the <b>cornerColor</b> and assigned it an "rgba" value to set the corners purple. </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: "white",
            radius: 50,
            stroke: "#c154c1",
            strokeWidth: 5,
            borderColor: "#daa520",
            cornerColor: "rgb(255,20,147)"
         });

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

字符串值传递对象

Déclaration：

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

Article précédent：Comment conserver la largeur de trait d'un rectangle lors de la mise à l'échelle à l'aide de FabricJS ?Article suivant：Comment conserver la largeur de trait d'un rectangle lors de la mise à l'échelle à l'aide de FabricJS ?

Articles Liés

Voir plus