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

Comment définir la couleur des coins de contrôle d'un rectangle à l'aide de FabricJS ?

王林avant: 2023-09-11 12:01:221477parcourir

如何使用 FabricJS 设置矩形控制角的颜色？

Dans ce tutoriel, nous définirons la couleur des coins de contrôle du rectangle à l'aide de FabricJS. La propriété cornerColor nous permet de manipuler la couleur des coins du contrôle lorsque l'objet est actif.

Syntaxe

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

Paramètres

Options (facultatif) - Ce paramètre est un objet qui fournit une personnalisation supplémentaire à notre rectangle. En utilisant ce paramètre, vous pouvez modifier la couleur, le curseur, la largeur du trait et d'autres propriétés liées à l'objet avec cornerColor comme attribut.

Option Key

cornerColor - Cette propriété accepte une String qui nous permet de contrôler l'attribution des couleurs aux coins des objets lors de leur sélection active. La valeur par défaut est RVB (178 204 255).

Exemple 1

Passer cornerColor comme clé avec la couleur comme valeur

Regardons un exemple de code pour changer la couleur à l'aide de la propriété cornerColor. exister Dans ce cas, nous attribuons la valeur « vert » à la clé, ce qui fait Les coins de contrôle apparaissent en vert.

<!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>Passing cornerColor as key with a color name as value</h2>
   <p>Select the rectangle to see the colour of its controlling corners</p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);

      // Initiate a rectangle object
      var rect = new fabric.Rect({
         left: 125,
         top: 90,
         width: 170,
         height: 70,
         fill: "#cf1020",
         borderColor: "black",
         borderScaleFactor: 3,
         cornerColor: "green",
      });

      // Add it to the canvas
      canvas.add(rect);
   </script>
</body>
</html>

Exemple 2

Attribuer une valeur RGBA à l'attribut cornerColor

Au lieu de transmettre un simple nom de couleur comme valeur String à la clé, nous pouvons également attribuer une valeur RGBA. RGBA signifie rouge, vert, bleu et alpha, où alpha représente l'opacité. Regardons un exemple de code pour illustrer comment procéder :

<!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>Assigning an RGBA value to the cornerColor property</h2>
   <p>Select the rectangle to see the colour of its controlling corners</p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);

      // Initiate a rectangle object
      var rect = new fabric.Rect({
         left: 125,
         top: 90,
         width: 170,
         height: 70,
         fill: "#cf1020",
         borderColor: "black",
         borderScaleFactor: 3,
         cornerColor: "rgba(34,139,34,0.9)",
      });

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

String 对象

Déclaration：

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

Article précédent：Comment créer un sélecteur de temps dans ReactJS ?Article suivant：Comment créer un sélecteur de temps dans ReactJS ?

Articles Liés

Voir plus