Comment rendre un rectangle invisible avec FabricJS ?-js tutoriel-php.cn

Comment rendre un rectangle invisible avec FabricJS ?

PHPz

Libérer： 2023-09-22 13:01:07

avant

889 Les gens l'ont consulté

如何使用 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>  <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!