Comment désactiver la sélectivité de Triangle à l'aide de FabricJS ?-js tutoriel-php.cn

Comment désactiver la sélectivité de Triangle à l'aide de FabricJS ?

王林

Libérer： 2023-09-08 17:13:02

avant

1150 Les gens l'ont consulté

如何使用 FabricJS 禁用 Triangle 的选择性？

Dans ce tutoriel, nous apprendrons comment désactiver la sélectivité des triangles à l'aide de FabricJS. Triangle est l'une des différentes formes fournies par FabricJS. Afin de créer un triangle, nous devons créer une instance de la classe Fabric.Triangle et l'ajouter au canevas.

Pour modifier un objet, nous devons le sélectionner dans FabricJS. Cependant, nous pouvons désactiver ce comportement en utilisant l'attribut selectable.

Syntaxe

new fabric.Triangle{ selectable: Boolean }: Object)

Copier après la connexion

Paramètres

Options (facultatif) - Ce paramètre est un objet< /em> qui fournit une personnalisation supplémentaire à notre triangle. En utilisant ce paramètre, vous pouvez modifier les propriétés de l'objet liées à l'attribut selectable, telles que la couleur, le curseur, la largeur du trait et bien d'autres propriétés.

< /ul>
Clé d'option
Sélectionnable - Cette propriété accepte les valeurs booléennes. Lorsqu'une valeur "fausse" lui est attribuée, l'objet ne peut pas être sélectionné pour modification. Sa valeur par défaut est vraie.
Exemple 1
Comportement par défaut ou propriété facultative lorsqu'elle est définie sur "true"< /p>
Regardons un exemple de code pour comprendre comment un objet se comporte par défaut lorsque la propriété selectable est définie sur True. Lorsque la propriété selectable est définie sur True, nous pouvons sélectionner un objet, le déplacer sur le canevas et le modifier.
<!DOCTYPE html> <html> <head>  <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script> </head> <body> <h2>Default behaviour or when selectable property is set to 'true'</h2> <p>You can try moving the triangle around the canvas or scaling it to prove that it's selectable</p> <canvas id="canvas"></canvas> <script> // Initiate a canvas instance var canvas = new fabric.Canvas("canvas"); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); // Initiate a triangle object var triangle = new fabric.Triangle({ left: 105, top: 70, width: 90, height: 80, fill: "#746cc0", stroke: "#967bb6", strokeWidth: 5, }); // Add it to the canvas canvas.add(triangle); </script> </body> </html>
Copier après la connexion
Exemple 2
Passer un attribut facultatif en tant que clé
Dans cet exemple, nous attribuons une valeur False à l'attribut facultatif. Cela signifie que nous ne pouvons plus sélectionner l'objet triangle pour le modifier.
<!DOCTYPE html> <html> <head>  <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script> </head> <body> <h2>Passing selectable property as key</h2> <p>You can see that the triangle is no longer selectable</p> <canvas id="canvas"></canvas> <script> // Initiate a canvas instance var canvas = new fabric.Canvas("canvas"); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); // Initiate a triangle object var triangle = new fabric.Triangle({ left: 105, top: 70, width: 90, height: 80, fill: "#746cc0", stroke: "#967bb6", strokeWidth: 5, selectable: false, }); // Add it to the canvas canvas.add(triangle); </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!