Comment définir la couleur d'un coin de contrôle de cercle à l'aide de FabricJS ?-js tutoriel-php.cn

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

WBOY

Libérer： 2023-08-23 10:13:14

avant

1010 Les gens l'ont consulté

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)

Copier après la connexion

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>

Copier après la connexion

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>

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!