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

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

WBOYavant: 2023-09-08 10:21:03892parcourir

如何使用 FabricJS 创建带有不允许的光标的画布？

Dans cet article, nous allons créer un canevas avec un curseur non autorisé à l'aide de FabricJS. Un curseur non autorisé peut être utilisé pour indiquer qu'une opération demandée ne sera pas effectuée. not-allowed 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 sous-jacent. 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
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 nombreuses propriétés liées au canevas, telles que la couleur, le curseur et la largeur de la bordure. DefaultCursor est une propriété grâce à laquelle nous pouvons définir le type de curseur souhaité.

La propriété defaultCursor accepte une chaîne qui détermine le nom du curseur à utiliser sur le canevas. Nous le définissons sur non autorisé pour utiliser des curseurs qui ne sont pas autorisés. Regardons un exemple de création d'un canevas avec un curseur non autorisé 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 not-allowed 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: "not-allowed"
      });
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
   </script>
</body>
</html>

Exemple 2

Dans cet exemple, nous ajouterons un cercle au canevas avec le curseur non autorisé

<!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 not-allowed cursor using FabricJS</h2>
   <p>Here we have added a circle to the canvas along with the not-allowed cursor</p>
   <canvas id="canvas"></canvas>
   <script>
      //Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas", {
         defaultCursor: "not-allowed"
      });
      // 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：Le programme JavaScript ajoute deux nombres représentés par une liste chaînée - Configuration 1Article suivant：Le programme JavaScript ajoute deux nombres représentés par une liste chaînée - Configuration 1

Articles Liés

Voir plus