Fabric.js Text strokeLineJoin Property – GeeksforGeeks

Afficher la discussion

Améliorer l’article

Enregistrer l’article

J’aime l’article

Afficher la discussion

Améliorer l’article

Enregistrer l’article

J’aime l’article

Dans cet article, nous allons voir comment changer le strokeLineJoin du canevas de texte à l’aide Tissu.js. La toile signifie que le texte écrit est mobile, rotatif, redimensionnable et peut être étiré. De plus, le texte lui-même ne peut pas être modifié comme une zone de texte.

Approcher:

  • Pour rendre cela possible, nous allons utiliser une bibliothèque JavaScript appelée Tissu.js.
  • Après avoir importé la bibliothèque à l’aide de CDN, nous allons créer un bloc canvas dans la balise body qui contiendra notre texte.
  • Après cela, nous allons initialiser les instances de Canvas et Text fournies par FabricJS et définir le strokeLineJoin couleur du texte du canevas à l’aide strokeLineJoin propriété.

Syntaxe:

fabric.Text(text,
    strokeLineJoin: String
); 

Paramètres: Cette propriété accepte un paramètre comme mentionné ci-dessus et décrit ci-dessous :

  • strokeLineJoin : Style de coin du trait d’un objet (un des “biseau”, “rond”, “onglet”)

Ci-dessous l’exemple qui illustre l’utilisation de strokeLineJoin propriété dans Tissu.js:

Exemple:

HTML

<!DOCTYPE html> 

<html

 

<head

  <script src

  </script

</head

 

<body

  <div style="text-align: center;width: 400px;"

    <h1 style="color: green;"

      GeeksforGeeks 

    </h1>

    <b

      Fabric.js | Text strokeLineJoin Property 

    </b

  </div

 

  <div style="text-align: center;"

    <canvas id="canvas" width="400" height="200"

      style="border:1px solid green;"

    </canvas

  </div

 

  <script

    // Create a new instance of Canvas 

    var canvas = new fabric.Canvas("canvas"); 

 

    // Create a new Text instance 

    var geek = new fabric.Text('GeeksforGeeks', {  

      stroke: 'green',    

      strokeWidth: 3,    

      strokeLineJoin: 'round'

    }); 

 

    // Render the text on Canvas 

    canvas.add(geek); 

    canvas.centerObject(geek);

  </script

</body

 

</html>

Production:

strokeLineJoin

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *