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:071376parcourir
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 setControlsVisibilityGrammaire
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ôleExemple
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!