Maison > Article > interface Web > Comment créer un triangle avec un curseur en attente sur un objet en mouvement à l'aide de FabricJS ?
Comment créer un triangle avec un curseur en attente sur un objet en mouvement à l'aide de FabricJS ?
- PHPzavant
- 2023-09-10 14:45:141419parcourir
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)Paramètres
Options (facultatif) - Ce paramètre est un objet 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.
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.
Option Key
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>
<!-- Adding the Fabric JS Library-->
<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>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>
<!-- Adding the Fabric JS Library-->
<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>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!