FabricJS - Comment définir la taille de l'angle de contrôle d'une ligne ?-js tutoriel-php.cn

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

WBOY

Libérer： 2023-08-25 12:21:14

avant

1033 Les gens l'ont consulté

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)

Copier après la connexion

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>

Copier après la connexion

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>

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!