Comment désactiver l'interactivité du canevas à l'aide de FabricJS ?-js tutoriel-php.cn

Comment désactiver l'interactivité du canevas à l'aide de FabricJS ?

WBOY

Libérer： 2023-09-02 15:33:13

avant

1547 Les gens l'ont consulté

如何使用 FabricJS 禁用画布的交互性？

Dans cet article, nous apprendrons comment désactiver l'interactivité du canevas dans FabricJS. La couche d'interaction au-dessus de chaque objet est l'une des caractéristiques uniques de FabricJS. Une fois le canevas initialisé, nous pouvons sélectionner des objets, les faire glisser ou manipuler des sélections de groupe. Cependant, tout cela peut être annulé en spécifiant la propriété d'interaction sur False.

Syntax

new fabric.Canvas(element: HTMLElement|String, { interactive : Boolean }: Object)

Copier après la connexion

Parameters

Element - Ce paramètre est l'élément
Options (facultatif) - Ce paramètre est un objet qui permet une personnalisation supplémentaire de notre canevas. En utilisant ce paramètre, il est possible de modifier les propriétés liées au canevas telles que la couleur, le curseur, la largeur de la bordure et bien d'autres propriétés, parmi lesquelles Interactive est la propriété par laquelle nous pouvons décider si nous voulons ou non un canevas interactif. La valeur par défaut de cette propriété est True.

Exemple 1

Lorsque l'attribut d'interactivité est activé

Lorsque l'interactivité est activée, nous pouvons librement faire glisser des objets, les sélectionner et les manipuler selon nos besoins. Nous pouvons voir dans l'exemple de code ci-dessous -
<!DOCTYPE html> <html> <head>  <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script> </head> <body> <h2>Disabling the interactivity of canvas</h2> <p>Here you can drag the object and manipulate them freely as we have set the <b>interactive</b> property to True. </p> <canvas id="canvas"></canvas> <script> // Initiate a canvas instance var canvas = new fabric.Canvas("canvas", { interactive: true, }); // Creating an instance of the fabric.Rect class var obj1 = new fabric.Rect({ left: 170, top: 90, width: 60, height: 80, fill: "#966fd6", angle: 90, }); var obj2 = new fabric.Rect({ left: 200, top: 120, width: 60, height: 80, fill: "#ffa343", angle: 56, }); // Adding it to the canvas canvas.add(obj1); canvas.add(obj2); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); </script> </body> </html>
Copier après la connexion
Exemple 2
Passer des clés d'interaction à une classe
Voyons un exemple de code pour comprendre comment désactiver l'interactivité pour un canevas. Nous pouvons attribuer une valeur False à la propriété d'interaction, ce qui éliminera le calque d'interaction au-dessus de l'objet dans le canevas.
<!DOCTYPE html> <html> <head>  <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script> </head> <body> <h2>Disabling the interactivity of canvas</h2> <p>Here you cannot select an area around the objects and manipulate them freely, as we have set the <b>interactive</b> property as False. </b> </p> <canvas id="canvas"></canvas> <script> // Initiate a canvas instance var canvas = new fabric.Canvas("canvas", { interactive: false, }); // Creating an instance of the fabric.Rect class var obj1 = new fabric.Rect({ left: 170, top: 90, width: 60, height: 80, fill: "#966fd6", angle: 90, }); var obj2 = new fabric.Rect({ left: 200, top: 120, width: 60, height: 80, fill: "#ffa343", angle: 56, }); // Adding it to the canvas canvas.add(obj1); canvas.add(obj2); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); </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!