Comment désactiver plusieurs points de contrôle spécifiques d'un objet image à l'aide de FabricJS ?-js tutoriel-php.cn

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

王林

Libérer： 2023-08-22 12:45:07

avant

1397 Les gens l'ont consulté

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

Copier après la connexion

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>

Copier après la connexion

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>

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!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

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

Grammaire

Paramètres

Utilisez la méthode setControlsVisibility

Exemple

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

Exemple