简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Maison
Article
Questions et réponses
Cours
Sujet
Télécharger
Jeu
Dictionnaire
mises à jour récentes

Maison  >  Article  >  interface Web  >  Comment rendre un rectangle invisible avec FabricJS ?

Comment rendre un rectangle invisible avec FabricJS ?

PHPz
PHPzavant
2023-09-22 13:01:07866parcourir

如何使用 FabricJS 使矩形不可见？

Dans ce tutoriel, nous allons apprendre à rendre un rectangle invisible à l'aide de FabricJS. Le rectangle est l'une des différentes formes fournies par FabricJS. Afin de créer un rectangle, nous devons créer une instance de la classe fabric.Rect et l'ajouter au canevas.

de différentes manières, comme changer sa taille, ajouter une couleur d'arrière-plan ou le rendre visible ou invisible. Nous pouvons le faire en utilisant l'attribut visible

Syntaxe

new Fabric.Rect( {visible : Booléen } : Objet)

Paramètres< h2>

  • Options (facultatif) - Ce paramètre est un Object à notre rectangle. À l'aide de ce paramètre, vous pouvez modifier la couleur, le curseur, la largeur du trait et d'autres propriétés liées à l'objet dont la propriété est visible.

Touches d'options

  • visible - Cette propriété accepte une valeur booléenne qui nous permet de restituer l'objet sur le canevas. Sa valeur par défaut est true.

Exemple 1

Pass visible Property comme clé avec la valeur 'vraie'

Voyons un exemple de code pour comprendre ce qui se passe lorsque nous passons visible La vraie valeur d'une propriété. En spécifiant la valeur "True", nous garantissons que notre Un objet rectangulaire est rendu sur la toile. C'est aussi le comportement par défaut FabricJS.

<!DOCTYPE html>
<html>
<tête>
<!--Ajouter une bibliothèque Fabric JS-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
&Lt;/tête>
<corps>
<h2>Transmettre les propriétés visibles en tant que clés avec une valeur de 'True'</h2>
<p>Vous pouvez voir que l'objet rectangulaire a été rendu sur le canevas. </p>
<id de toile="canvas"></canvas>
<script>
//Démarre l'instance de canevas
var toile = new Fabric.Canvas("toile");
toile.setWidth(document.body.scrollWidth);
Canvas.setHeight(250);

//Initialiser un objet rectangle
var rectangle = nouveau tissu rectangle({
Gauche : 55,
Haut : 60,
Largeur : 170,
Hauteur : 70,
Remplissez : "#f4f0ec",
Coup : "#2a52be",
Largeur de trait : 5,
Visible : réel,
});

//Ajoutez-le au canevas
toile.ajouter(rectangle);
</script>
</corps>
</html>

Exemple

Transmission de propriétés visibles en tant que clés à l'aide d'une valeur « Faux »

< ;p> ;Dans cet exemple, nous transmettons l'attribut visible comme clé avec la valeur false. Spécifier une valeur fausse garantira que notre objet rectangle ne sera pas rendu sur le canevas. Cela ne rend tout simplement pas l'objet "invisible", mais le supprime complètement. Il peut être utilisé pour supprimer un objet du canevas sans supprimer son code. 

<!DOCTYPE html>
<html>
<tête>
<!--Ajouter une bibliothèque Fabric JS-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
&Lt;/tête>
<corps>
<h2>Transmettre les propriétés visibles sous forme de clés avec une valeur de 'False'</h2>
<p>Vous pouvez voir que l'objet rectangulaire n'a pas été rendu sur le canevas. </p>
<id de toile="canvas"></canvas>
<script>
//Démarre l'instance de canevas
var toile = new Fabric.Canvas("toile");
toile.setWidth(document.body.scrollWidth);
Canvas.setHeight(250);

//Initialiser un objet rectangle
var rectangle = nouveau tissu rectangle({
Gauche : 55,
Haut : 60,
Largeur : 170,
Hauteur : 70,
Remplissez : "#f4f0ec",
Coup : "#2a52be",
Largeur de trait : 5,
Visible : faux,
});

//Ajoutez-le au canevas
toile.ajouter(rectangle);
</script>
</corps>
</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!

JavaScript ajax html Boolean Object class var JS 对象 canvas ul li https fabric
Déclaration：
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer
Article précédent：A quoi sert le stockage de sessions ?Article suivant：A quoi sert le stockage de sessions ?

Articles Liés

Voir plus