Comment créer un triangle avec un curseur en attente sur un objet en mouvement à l'aide de FabricJS ?-js tutoriel-php.cn

Comment créer un triangle avec un curseur en attente sur un objet en mouvement à l'aide de FabricJS ?

PHPz

Libérer： 2023-09-10 14:45:14

avant

1437 Les gens l'ont consulté

如何使用 FabricJS 在移动对象上创建带有等待光标的三角形？

Dans ce tutoriel, nous utiliserons FabricJS pour créer un triangle avec un objet attendant que le curseur se déplace. wait est l'un des styles de curseur natifs disponibles et peut également être utilisé dans le canevas FabricJS. FabricJS fournit différents types de curseurs tels que le curseur par défaut, le défilement complet, le réticule, le redimensionnement des colonnes, le redimensionnement des lignes, etc. qui réutilisent le curseur natif sous le capot. La propriété

moveCursor définit le style du curseur lorsque l'objet se déplace dans le canevas.

Syntaxe

new fabric.Triangle({ moveCursor: String }: 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 liées à l'objet pour lequel moveCursor est un attribut, telles que la couleur, le curseur, la largeur du trait et de nombreuses autres propriétés.

< /ul>
Option Key
moveCursor - Cette propriété accepte une String qui nous permet de définir la valeur par défaut du curseur lors du déplacement de cet objet triangulaire sur le canevas. Cette valeur détermine le type de curseur utilisé lors du déplacement des objets du canevas.
Exemple 1
Valeur du curseur par défaut lorsque l'objet se déplace sur le canevas
Par défaut, lorsque nous nous déplaçons autour d'un objet triangulaire dans le canevas, le type de curseur est Move. Voyons un exemple de code pour comprendre cela.
<!DOCTYPE html> <html> <head>  <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script> </head> <body> <h2>Default cursor value when object is moved around the canvas</h2> <p>You can move around the triangle to see that the default cursor type is "move"</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: 75, width: 90, height: 80, fill: "#eedc82", stroke: "#bcb88a", strokeWidth: 5, }); // Add it to the canvas canvas.add(triangle); </script> </body> </html>
Copier après la connexion
Exemple 2
Passer la propriété moveCursor comme clé de valeur
Dans cet exemple, nous passons la clé moveCursor à la classe triangle avec la valeur "attendre". Cela garantira que la valeur du curseur attend pendant que nous nous déplaçons autour de l'objet dans le canevas. L’exemple de code suivant illustre cela.
<!DOCTYPE html> <html> <head>  <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script> </head> <body> <h2>Passing the moveCursor property as key with a value</h2> <p>You can move around the triangle to see that the cursor type is "wait"</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: 75, width: 90, height: 80, fill: "#eedc82", stroke: "#bcb88a", strokeWidth: 5, moveCursor: "wait", }); // 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!