recherche

Maison >interface Web >js tutoriel >FabricJS - Comment définir la taille de l'angle de contrôle d'une ligne ?

FabricJS - Comment définir la taille de l'angle de contrôle d'une ligne ?

WBOY
WBOYavant
2023-08-25 12:21:141017parcourir

FabricJS – 如何设置线的控制角的大小？

Dans ce tutoriel, nous allons apprendre à définir la taille d'un coin de contrôle Ligne à l'aide de FabricJS. Les coins de contrôle d'un objet nous permettent de le redimensionner, de l'étirer ou de changer sa position. Nous pouvons personnaliser le coin de contrôle de plusieurs manières, par exemple en y ajoutant une couleur spécifique, en modifiant sa taille, etc. Nous pouvons modifier la taille en utilisant la propriété cornerSize. p>

Syntax

 new fabric.Line( points: Array, { cornerSize: Number }: Object)

Parameters

  • points - Ce paramètre accepte un tableau de points qui détermine les valeurs (x1, y1) et (x2, y2), qui sont les points de début et de fin de la ligne respectivement la coordonnée de l'axe x et la coordonnée de l'axe y.

  • options (facultatif) - Ce paramètre est un objet qui fournit une personnalisation supplémentaire à notre objet. En utilisant ce paramètre, vous pouvez modifier l'origine de l'objet, la largeur du trait et de nombreuses autres propriétés liées à la propriété cornerSize.

    • Options Keys

    • cornerSize - Cette propriété accepte un nombre qui nous permet de manipuler la taille des coins de contrôle de l'objet sélectionné. Sa valeur par défaut est 13.

    Taille par défaut des coins de contrôle

    Exemple

    Regardons un exemple décrivant la taille par défaut des coins de contrôle lorsqu'un objet ligne est activement sélectionné. 

    <!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>Default size of the controlling corners</h2>
   <p>You can select the line object to see the default size of 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 Line object
      var line = new fabric.Line([200, 100, 100, 40], {
         stroke: "blue",
         strokeWidth: 20,
      });
      
      // Add it to the canvas
      canvas.add(line);
   </script>
</body>
</html>

    Passez cornerSize comme clé avec une valeur personnalisée

    Exemple

    Dans cet exemple, nous transmettons l'attribut cornerSize comme clé avec une valeur de 17. Nous pouvons le voir lorsque l’objet ligne est sélectionné. 

    <!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 cornerSize as key with a custom value</h2>
   <p>You can select the line object to see the size of 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 Line object
      var line = new fabric.Line([200, 100, 100, 40], {
         stroke: "blue",
         strokeWidth: 20,
         cornerColor: "#87a96b",
         cornerSize: 17,
      });
      
      // Add it to the canvas
      canvas.add(line);
   </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!

对象 ul
Déclaration：
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer
Article précédent：Comment convertir une chaîne en float en JavaScript ?Article suivant：Comment convertir une chaîne en float en JavaScript ?

Articles Liés

Voir plus