Comment créer des zones de texte personnalisées dans Fabric.js : contours, arrondis et rembourrés

Fabric.js est une bibliothèque JavaScript remarquable qui rationalise l'utilisation des éléments de canevas HTML5, permettant aux développeurs de créer sans effort des applications Web attrayantes. Doté d'une multitude de fonctionnalités et d'outils, il permet aux utilisateurs de concevoir des interfaces interactives et visuellement époustouflantes.

Un avantage notable de Fabric.js réside dans sa capacité à générer des classes personnalisées, permettant aux développeurs d'amplifier ses capacités et de le personnaliser pour répondre à leurs besoins uniques.

Ce blog se plongera dans le processus de conception et d'utilisation d'une classe personnalisée dans Fabric.js. Notre objectif sera de développer une zone de texte tracée avec des coins arrondis et un rembourrage. De plus, nous explorerons l'adaptabilité de cette classe pour répondre à divers scénarios. À la fin de ce blog, vous posséderez une compréhension complète de la création de classes personnalisées dans Fabric.js et de leur utilisation pour améliorer vos applications de canevas.

Création de la classe Stroked Textbox

La classe Stroked Textbox est une extension de la classe Textbox par défaut dans Fabric.js, introduisant diverses fonctionnalités supplémentaires telles que la largeur du trait, la couleur du trait, le rembourrage et les coins arrondis.

Analysons chaque ligne de code dans cette classe :

• type : "textbox" : cette ligne spécifie le type d'objet en cours de création.

• strokeWidth: 5 : Cette ligne définit la largeur du trait à 5 pixels.

• strokeColor: "#ffb64f": Cette ligne détermine la couleur du trait comme #ffb64f.

• splitByGrapheme : true : cette ligne indique que la zone de texte doit être divisée en fonction des graphèmes.

• rx : 0 : cette ligne attribue une valeur de 0 à rx, en contrôlant le degré d'arrondi sur l'axe des x.

• ry : 0 : cette ligne attribue une valeur de 0 à ry, déterminant le degré d'arrondi sur l'axe des ordonnées.

• toObject : cette fonction renvoie un objet contenant toutes les propriétés de la classe Textbox, ainsi que les nouvelles propriétés introduites par la classe Stroked Textbox.

• _renderBackground : _renderBackground : cette fonction supervise le processus de rendu de l'arrière-plan de la zone de texte, englobant le rembourrage, les coins arrondis et le trait.

  
  

 fabric.TextboxWithPadding = fabric.util.createClass(fabric.Textbox, { type: "textbox", strokeWidth: 5, // Specifies the width of the stroke strokeColor: "#ffb64f", // Sets the color of the stroke splitByGrapheme: true, rx: 0, // Determines the rx value for rounded corners on the x-axis ry: 0, // Determines the ry value for rounded corners on the y-axis toObject: function() { return fabric.util.object.extend(this.callSuper("toObject"), { backgroundColor: this.get("backgroundColor"), padding: this.get("padding"), splitByGrapheme: this.get("splitByGrapheme"), rx: this.get("rx"), ry: this.get("ry") }); }, _renderBackground: function(ctx) { if (!this.backgroundColor) { return; } var dim = this._getNonTransformedDimensions(); ctx.fillStyle = this.backgroundColor; ctx.fillRect( -dim.x / 2 - this.padding, -dim.y / 2 - this.padding, dim.x + this.padding * 2, dim.y + this.padding * 2 ); // Stroke only at the top ctx.strokeStyle = this.strokeColor; ctx.lineWidth = this.strokeWidth; ctx.beginPath(); ctx.moveTo(-dim.x / 2 - this.padding, -dim.y / 2 - this.padding); ctx.lineTo(-dim.x / 2 - this.padding, dim.y / 2 + this.padding); ctx.stroke(); ctx.beginPath(); ctx.strokeStyle = this.strokeColor; ctx.lineWidth = 0.2; // Set line width to 1 ctx.lineTo(dim.x / 2 + this.padding, -dim.y / 2 - this.padding + 1); ctx.lineTo(dim.x / 2 + this.padding, dim.y / 2 + this.padding - 1); ctx.strokeStyle = "#9181fc"; ctx.lineWidth = 0.2; // Set line width to 1 ctx.lineTo(dim.x / 2 + this.padding - 1, dim.y / 2 + this.padding); ctx.lineTo(-dim.x / 2 - this.padding + 1, dim.y / 2 + this.padding); ctx.strokeStyle = "#9181fc"; ctx.lineWidth = 0.2; // Set line width to 1 ctx.lineTo(-dim.x / 2 - this.padding, dim.y / 2 + this.padding - 1); ctx.lineTo(-dim.x / 2 - this.padding, -dim.y / 2 - this.padding + 1); ctx.closePath(); ctx.stroke(); // If there is a background color, no other shadows should be casted this._removeShadow(ctx); } });

Base de code

https://github.com/dinesh-rawat-dev/Prodeasy-section-component

Démo

https://y5k9l8.csb.app/

Avantages de l'utilisation de la classe

Avec l'utilisation de la classe Stroked Textbox, nous avons la possibilité de générer des zones de texte personnalisées dotées d'attributs visuels distinctifs qui dépassent les capacités de la classe Textbox par défaut. Cela nous permet de créer des applications sur toile qui possèdent un attrait visuel amélioré et captivent le public par leur caractère unique, les distinguant des autres dans le domaine.

Utilisation de la classe Stroked Textbox

Pour utiliser la classe Stroked Textbox, nous pouvons facilement générer une nouvelle instance de la classe et fournir les paramètres nécessaires. Vous trouverez ci-dessous un exemple illustrant l'utilisation de la classe, illustrant la création d'une zone de texte avec un rembourrage, des coins arrondis et diverses couleurs et largeurs de trait :

 const textbox = new fabric.TextboxWithPadding('Inpur field', { fontFamily: "Roboto", // fontSize: 20, padding: 5, width: 100, textAlign: 'left', //@ts-ignore // left: rect.left + 20, //@ts-ignore // top: rect.top + 10, selectable: true, evented: true, editable: true, //@ts-ignore placeholder: "", splitByGrapheme: true, // lockScalingX: true, // lockScalingY: true, lockMovementX: true, lockMovementY: true, fill: '#000000', fontSize: 10, // stroke: OBJECT_BORDER_COLOR, strokeWidth: 1, backgroundColor: "#d5d1eb", //@ts-ignore left: 30, //@ts-ignore top: 30, className: "text_box_with_padding", includeDefaultValues: true, intersectsWithFrame: true, hasControls: false, hasBorders: true, });

Dans ce cas particulier, nous avons personnalisé l'apparence et le comportement de la zone de texte en configurant des propriétés telles que fontFamily , padding , width , textAlign , selectable , evented , editable , splitByGrapheme , fill , fontSize , strokeWidth , backgroundColor , hasControls et hasBorders .

Personnalisation de la classe Stroked Textbox

Pour personnaliser davantage la classe Stroked Textbox, vous pouvez adopter deux approches. Tout d'abord, vous avez la possibilité de modifier les valeurs des paramètres directement dans la classe elle-même.

Vous pouvez également créer une nouvelle sous-classe qui étend la classe Stroked Textbox et introduit des fonctionnalités supplémentaires. Voici quelques suggestions sur la façon d'adapter la classe aux besoins spécifiques :

1. Ajuster la largeur du trait : Pour modifier l'épaisseur du trait, modifiez le paramètre strokeWidth. En ajustant le paramètre, vous pouvez définir l'épaisseur du trait : augmenter la valeur donnera un trait plus gras, tandis que la diminuer créera un trait plus fin.

   Par exemple , définir strokeWidth sur 10 créera une zone de texte avec un trait plus épais par rapport à la valeur par défaut de 5.

   
   

2. Changez la couleur du trait :

   Ce paramètre vous permet de modifier la teinte du trait, vous offrant une plus grande flexibilité dans les choix de conception.

   Vous pouvez utiliser un code hexadécimal ou une couleur nommée. Par exemple, définir strokeColor sur "#ff0000" générera un trait rouge.

   
   

3. Modifier le padding : Pour changer la couleur du trait, vous pouvez ajuster la valeur de strokeColor. Cela détermine l'espace entre le texte et les bords de la zone de texte. Par exemple, définir le rembourrage sur 10 augmentera l'espacement autour du texte.

   
   

4. Ajuster l'arrondi des coins : Pour modifier le degré d'arrondi des coins de la zone de texte, modifiez les valeurs de rx et ry. Ces paramètres régissent le niveau d'arrondi sur les axes x et y, respectivement. Par exemple, définir à la fois rx et ry sur 10 créera une zone de texte avec des coins arrondis plus prononcés.

De plus, vous avez la possibilité de créer une nouvelle sous-classe qui étend la classe Stroked Textbox et intègre des fonctionnalités supplémentaires. Cette approche vous offre encore plus de possibilités de personnalisation, vous permettant d'introduire de nouvelles fonctionnalités dans la zone de texte. Par exemple, vous pouvez créer une sous-classe qui ajoute une ombre portée à la zone de texte ou modifie dynamiquement la police en fonction de l'entrée de l'utilisateur. Le potentiel de personnalisation est vaste et la classe Stroked Textbox constitue une excellente base sur laquelle s'appuyer.