FabricJS - Comment définir la couleur des coins de contrôle de ligne ?-js tutoriel-php.cn

FabricJS - Comment définir la couleur des coins de contrôle de ligne ?

王林

Libérer： 2023-09-09 21:57:02

avant

1563 Les gens l'ont consulté

FabricJS – 如何设置线条控制角的颜色？

Dans ce tutoriel, nous allons apprendre à définir la couleur d'un coin de contrôle Ligne à l'aide de FabricJS. L'élément Line est l'un des éléments de base fournis dans FabricJS. Il est utilisé pour créer des lignes droites. Étant donné que les éléments de ligne sont géométriquement unidimensionnels et ne contiennent aucun intérieur, ils ne sont jamais remplis. Nous pouvons créer un objet ligne en créant une instance de fabric.Line, en spécifiant les coordonnées X et Y de la ligne et en l'ajoutant au canevas. La propriété cornerColor nous permet de manipuler la couleur des coins du contrôle lorsque l'objet est actif.

Grammaire

new fabric.Line( points: Array, { cornerColor: String }: Object)

Copier après la connexion

Paramètres

points - Ce paramètre accepte un Array de points, qui détermine les valeurs (x1, y1) et (x2, y2), qui sont les coordonnées des axes x et y du début et de la fin. points de la ligne respectivement.
options (facultatif) - Ce paramètre est un objet , qui est utile pour nos besoins. En utilisant ce paramètre, vous pouvez modifier la couleur, le curseur, la largeur du trait et bien d'autres propriétés associées à l'objet dont cornerColor est la propriété.

Touche d'option

cornerColor - Cette propriété accepte une String qui nous permet d'attribuer une couleur au coin pour contrôler le point du coin lorsque l'objet est activement sélectionné. La valeur par défaut est rgb(178,204,255).

Passez cornerColor comme clé et le nom de la couleur comme valeur

Exemple

Regardons un exemple de code qui utilise la propriété cornerColor pour changer la couleur. Dans cet exemple, nous avons attribué à la clé une valeur « orange », ce qui fait apparaître les coins de contrôle en orange.

<!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>
      You can select the line object to see that the corner colour is orange
   </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 Line object
      var line = new fabric.Line([200, 100, 100, 40], {
         stroke: "blue",
         strokeWidth: 20,
         cornerColor: "orange"
      });

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

Copier après la connexion

Attribuez une valeur RGBA à l'attribut cornerColor

Exemple

Nous pouvons également attribuer une valeur RGBA au lieu de transmettre un simple nom de couleur à la clé en tant que valeur String. 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>
      You can select the line object to see the corner colour
   </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 Line object
      var line = new fabric.Line([200, 100, 100, 40], {
         stroke: "blue",
         strokeWidth: 20,
         cornerColor: "rgba(255,69,0, 0.8)",
      });

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