recherche

Maison >interface Web >js tutoriel >Comment créer un canevas avec un curseur de progression à l'aide de FabricJS ?

Comment créer un canevas avec un curseur de progression à l'aide de FabricJS ?

王林
王林avant
2023-08-24 14:53:08677parcourir

如何使用 FabricJS 创建带有进度光标的画布？

Dans cet article, nous allons créer un canevas avec un curseur de progression à l'aide de FabricJS. Le curseur de progression indique que le programme est occupé en arrière-plan mais permet à l'utilisateur d'interagir avec l'interface. Progress 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 comme par défaut, défilement complet, réticule, redimensionnement de colonne, redimensionnement de ligne, etc., qui réutilisent le curseur natif en arrière-plan. Chaque curseur est légèrement différent selon le système d'exploitation. Re grammaire 

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

Paramètres

  • Élément -C'est l'élément lui-même, vous pouvez utiliser l'élément Document.GetelementByid () em> ou lui-même. Le canevas FabricJS sera initialisé sur cet élément.

  • Options (facultatif) - Ce paramètre est un objet qui permet une personnalisation supplémentaire de notre canevas. En utilisant ce paramètre, vous pouvez modifier de nombreux attributs liés au canevas, tels que la couleur, le curseur et la largeur de la bordure. Parmi eux, defaultCursor est un attribut dans lequel nous pouvons définir le type de curseur.

    • Exemple 1

la propriété defaultCursor accepte une

String

qui détermine le nom du curseur à utiliser sur le canevas. Nous l'avons réglé sur Progress pour utiliser le curseur Progress. Jetons un coup d'œil au code pour créer un canevas avec un curseur de progression dans FabricJS. 

<!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>Canvas with progress cursor using FabricJS</h2>
   <p>Bring the cursor inside the canvas to see the changed shape of cursor</p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas", {
         defaultCursor: "progress"
      });
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
   </script>
</body>
</html>
Exemple 2

Dans cet exemple, nous ajouterons un cercle au canevas avec un curseur de progression. 

<!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>Canvas with progress cursor using FabricJS</h2>
   <p>Here we have added a circle to the canvas along with a progress cursor</p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas", {
         defaultCursor: "progress"
      });
      // Initiate a Circle instance
      var circle = new fabric.Circle({
         radius: 50,
         fill: "green"
      });
      // Render the circle in canvas
      canvas.add(circle);
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
   </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!

Déclaration：
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer
Article précédent：Comment définir l'opacité de la bordure d'un cercle lors d'un déplacement à l'aide de FabricJS ?Article suivant：Comment définir l'opacité de la bordure d'un cercle lors d'un déplacement à l'aide de FabricJS ?

Articles Liés

Voir plus