Maison > Article > interface Web > FabricJS - Comment désactiver plusieurs points de contrôle spécifiques d'un objet Line ?

FabricJS - Comment désactiver plusieurs points de contrôle spécifiques d'un objet Line ?

WBOYavant: 2023-08-24 20:17:061129parcourir

FabricJS – 如何禁用 Line 对象的多个特定控制点？

Dans ce tutoriel, nous apprendrons comment désactiver plusieurs points de contrôle spécifiques d'un objet Line à 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. Pour désactiver plusieurs points de contrôle spécifiques d'un objet Line, nous utilisons la méthode setControlsVisibility.

Syntaxe

 setControlsVisibility(options: Object): fabric.Object

Parameters

Options - Ce paramètre accepte une valeur d'objet qui définit le contrôle. Les valeurs possibles sont -
- 'tl' - Cette propriété accepte une valeur Boolean qui active ou désactive le contrôle en haut à gauche.
- 'tr' - Cette propriété accepte une valeur Boolean qui active ou désactive le contrôle en haut à droite.
- 'br' - Cette propriété accepte une valeur booléenne qui active ou désactive le contrôle inférieur droit.
- 'bl' - Cette propriété accepte une valeur Boolean pour activer ou désactiver le contrôle inférieur gauche
- 'ml' - Cette propriété accepte une valeur Boolean pour activer ou désactiver le. contrôle centre-gauche.
- 'mt' - Cette propriété accepte une valeur boolean qui active ou désactive le contrôle mi-haut.
- 'mr' - Cette propriété accepte une valeur booléenne qui active ou désactive le contrôle du centre droit.
- 'mb' - Cette propriété accepte une valeur booléenne qui active ou désactive le contrôle central en bas.
- 'mtr' - Cette propriété accepte une valeur boolean qui active ou désactive le contrôle de rotation mi-haut.

Utilisation de la méthode setControlsVisibility

Exemple

Voyons un exemple de code pour voir le résultat lors de l'utilisation de la méthode

setControlsVisibility. La méthode setControlsVisibility définit la visibilité de plusieurs contrôles spécifiés. Dans cet exemple, puisque nous avons passé une valeur fausse aux contrôles « tl » et « bl », les contrôles en haut à gauche et en bas à gauche seront désactivés.

<!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>Using setControlsVisibility method</h2>
   <p>
      You can select the line object to see that the bottom-left and top-left controls have been disabled
   </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: 6,
      });
      
      // Add it to the canvas
      canvas.add(line);
      
      // Using setControlsVisibility method
      line.setControlsVisibility({
         tl: false,
         bl: false,
      });
   </script>
</body>
</html>

Utilisez la méthode

setControlsVisibility pour désactiver le contrôle de rotation mi-haut

Exemple

Dans cet exemple, nous utiliserons la méthode

setControlsVisibility pour désactiver le contrôle "mtr", également connu sous le nom de rotation mi-haut contrôle.

<!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>Using setControlsVisibility method</h2>
   <p>
      You can select the line object to see that the middle-top-rotate control has been disabled
   </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: 6,
      });
      
      // Add it to the canvas
      canvas.add(line);
      
      // Using setControlsVisibility method
      line.setControlsVisibility({
         'mtr': false,
      });
   </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!

Déclaration：

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

Article précédent：Comment désactiver la sélectivité IText à l'aide de FabricJS ?Article suivant：Comment désactiver la sélectivité IText à l'aide de FabricJS ?

Articles Liés

Voir plus