Comment créer un canevas avec un curseur de texte à l'aide de FabricJS ?-js tutoriel-php.cn

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

WBOY

Libérer： 2023-08-23 13:25:18

avant

1070 Les gens l'ont consulté

Comment créer un canevas avec un curseur de texte à laide de FabricJS ?

Dans cet article, nous allons créer un canevas avec un curseur de texte à l'aide de FabricJS. Le curseur de texte représente le texte pouvant être sélectionné. Le texte est l'un des styles de curseur natifs disponibles pour 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. Ces curseurs sont légèrement différents selon le système d'exploitation.

Syntaxe

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

Copier après la connexion

Parameters

element − Ce paramètre est l'élément lui-même, vous pouvez utiliser document.getElementById() ou élément lui-même id Viens le chercher. Le canevas FabricJS sera initialisé sur cet élément.
options (facultatif) - Ce paramètre est un objet qui fournit des paramètres personnalisés supplémentaires pour le canevas. Utilisez ce paramètre pour modifier la couleur, le curseur, la largeur de la bordure et de nombreuses autres propriétés liées au canevas, où defaultCursor est une propriété que nous pouvons utiliser pour 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 le définissons sur "text" pour utiliser le curseur de texte. Regardons un code qui utilise FabricJS pour créer un canevas avec textcursor.

<!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 text 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: "text"
      });
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
   </script>
</body>
</html>

Copier après la connexion

Exemple 2

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

<!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 text cursor using FabricJS</h2>
   <p>Here we have added a circle to the canvas along with a text cursor</p>
   <canvas id="canvas"></canvas>
   <script>
      //Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas", {
         defaultCursor: "text"
      });
      // 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>

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!