Maison > Article > interface Web > Comment désactiver plusieurs points de contrôle spécifiques d'un objet image à l'aide de FabricJS ?

Comment désactiver plusieurs points de contrôle spécifiques d'un objet image à l'aide de FabricJS ?

王林avant: 2023-08-22 12:45:071422parcourir

Comment désactiver plusieurs points de contrôle spécifiques dun objet image à laide de FabricJS ?

Dans ce tutoriel, nous apprendrons comment désactiver plusieurs points de contrôle spécifiques.

Créez des objets image à l'aide de FabricJS. Nous pouvons créer un objet image en créant une instance de tissu.Image. Puisqu’il s’agit d’un des éléments de base de FabricJS, on peut aussi facilement Personnalisez-le en appliquant des propriétés telles que l'angle, l'opacité, etc. Afin de désactiver plusieurs Pour les objets image de points de contrôle spécifiques, nous utilisons la méthode setControlsVisibility

Grammaire

setControlsVisibility(options: Object): fabric.Object

Paramètres

options - Ce paramètre accepte une valeur Object, utilisée pour définir l'état visible contrôles. Les valeurs possibles sont −
- ‘tl’ − Cette propriété accepte une valeur boolean pour activer ou désactiver le contrôle du coin supérieur gauche
- ‘tr’ − Cette propriété accepte une valeur boolean pour activer ou désactiver le contrôle du coin supérieur droit
- ‘br’ − Cette propriété accepte une Valeur booléenne pour activer ou désactiver le contrôle du coin inférieur droit 'bl' - Cette propriété accepte une valeur booléenne pour activer ou désactiver le contrôle du coin inférieur gauche 'ml' - Cette propriété accepte une valeur booléenne pour activer ou désactiver le contrôle central gauche
- ‘mt’ − Cette propriété accepte une Valeur booléenne pour activer ou désactiver le contrôle mi-haut
- ‘mr’ − Cette propriété accepte une Valeur booléenne pour activer ou désactiver le contrôle du centre droit 'mb' - Cette propriété accepte une valeur boolean pour activer ou désactiver le contrôle mi-inférieur
- ‘mtr’ − Cette propriété accepte une valeur boolean pour activer ou désactiver le contrôle de rotation mi-haut

Utilisez la méthode setControlsVisibility

Exemple

Regardons un exemple de code pour voir le résultat lorsque la méthode setControlsVisibility est appelée utiliser. La méthode setControlsVisibility définit la visibilité de plusieurs contrôles spécifiés. exister Dans ce cas, puisque nous avons défini les contrôles "tl" et "bl" sur des valeurs fausses, le coin supérieur gauche Et les commandes en bas à gauche seront désactivées.

<!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 image object to see that the bottom-left and top-left controls have been disabled
   </p>
   <canvas id="canvas"></canvas>
   <img  src="https://www.tutorialspoint.com/images/logo.png" id="img1"   style="max-width:90%" / alt="Comment désactiver plusieurs points de contrôle spécifiques d'un objet image à l'aide de FabricJS ?" >
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      
      // Initiating the image element
      var imageElement = document.getElementById("img1");
      
      // Initiate an Image object
      var image = new fabric.Image(imageElement, {
         top: 50,
         left: 110,
      });
      
      // Add it to the canvas
      canvas.add(image);
      
      // Using setControlsVisibility method
      image.setControlsVisibility({
         tl: false,
         bl: false,
      });
   </script>
</body>
</html>

Utilisez la méthode setControlsVisibility pour désactiver la rotation supérieure du milieu

La traduction de contrôle est : contrôle

Exemple

Dans cet exemple, nous utiliserons la méthode setControlsVisibility pour désactiver le contrôle "mtr" Ceci est également connu sous le nom de contrôle de rotation mi-supérieur.

<!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 to disable the middle-top-rotate control
   </h2>
   <p>
      You can select the image object to see that the middle-top-rotate control has been disabled
   </p>
   <canvas id="canvas"></canvas>
   <img  src="https://www.tutorialspoint.com/images/logo.png" id="img1"   style="max-width:90%" / alt="Comment désactiver plusieurs points de contrôle spécifiques d'un objet image à l'aide de FabricJS ?" >
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      
      // Initiating the image element
      var imageElement = document.getElementById("img1");
      
      // Initiate an Image object
      var image = new fabric.Image(imageElement, {
         top: 50,
         left: 110,
      });
      
      // Add it to the canvas
      canvas.add(image);
      
      // Using setControlsVisibility method
      image.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!

Object 对象 tr fabric mr

Déclaration：

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

Article précédent：Comment éviter l'effet de survol persistant pour les boutons des appareils tactiles ?Article suivant：Comment éviter l'effet de survol persistant pour les boutons des appareils tactiles ?

Articles Liés

Voir plus