Como criar caixas de texto personalizadas no Fabric.js: Traçado, Arredondado e Acolchoado

Fabric.js é uma notável biblioteca JavaScript que simplifica o uso de elementos de tela HTML5, capacitando os desenvolvedores a criar sem esforço aplicativos da Web atraentes. Embalado com uma infinidade de recursos e ferramentas, ele capacita os usuários a projetar interfaces interativas e visualmente impressionantes.

Uma vantagem notável do Fabric.js reside em sua capacidade de gerar classes personalizadas, permitindo que os desenvolvedores ampliem seus recursos e personalizem-no para atender aos seus requisitos exclusivos.

Este blog se aprofundará no processo de criação e utilização de uma classe personalizada no Fabric.js. Nosso foco será desenvolver uma caixa de texto traçada com cantos arredondados e preenchimento. Além disso, exploraremos a adaptabilidade dessa classe para atender a vários cenários. Ao concluir este blog, você terá uma compreensão abrangente de criar classes personalizadas em Fabric.js e utilizá-las para elevar seus aplicativos de tela.

Criando a classe Stroked Textbox

A classe Stroked Textbox é uma extensão da classe Textbox padrão em Fabric.js, apresentando vários recursos adicionais, como largura e cor do traçado, preenchimento e cantos arredondados.

Vamos analisar cada linha de código dentro desta classe:

• type: "textbox": Esta linha especifica o tipo de objeto que está sendo criado.

• strokeWidth: 5: Esta linha define a largura do traçado para 5 pixels.

• strokeColor: "#ffb64f": Esta linha determina a cor do traço como #ffb64f.

• splitByGrapheme: true: Esta linha indica que a caixa de texto deve ser dividida com base nos grafemas.

• rx: 0: Esta linha atribui um valor de 0 a rx, controlando o grau de arredondamento no eixo x.

• ry: 0: Esta linha atribui um valor de 0 a ry, controlando o grau de arredondamento no eixo y.

• toObject: Esta função retorna um objeto contendo todas as propriedades da classe Textbox, juntamente com as novas propriedades introduzidas pela classe Stroked Textbox.

• _renderBackground: _renderBackground: Esta função supervisiona o processo de renderização do fundo da caixa de texto, abrangendo preenchimento, cantos arredondados e traçado.

  
  

 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 código

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

Demonstração

https://y5k9l8.csb.app/

Benefícios de usar a aula

Com a utilização da classe Stroked Textbox, ganhamos a capacidade de gerar textboxes personalizados dotados de atributos visuais distintos que superam os recursos da classe Textbox padrão. Isso nos capacita a criar aplicativos de tela que possuem apelo visual aprimorado e cativam o público com sua singularidade, diferenciando-os de outros no campo.

Usando a classe Stroked Textbox

Para utilizar a classe Stroked Textbox, podemos gerar facilmente uma nova instância da classe e fornecer os parâmetros necessários. Abaixo está um exemplo demonstrando o uso da classe, mostrando a criação de uma caixa de texto com preenchimento, cantos arredondados e várias cores e larguras de traçado:

 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, });

Nesta instância específica, personalizamos a aparência e o comportamento da caixa de texto configurando propriedades como fontFamily , padding , width , textAlign , selectable , evented , editable , splitByGrapheme , fill , fontSize , strokeWidth , backgroundColor , hasControls e hasBorders .

Personalizando a classe Stroked Textbox

Para personalizar ainda mais a classe Stroked Textbox, há duas abordagens que você pode adotar. Em primeiro lugar, você possui a capacidade de modificar os valores dos parâmetros diretamente na própria classe.

Alternativamente, você pode criar uma nova subclasse que estende a classe Stroked Textbox e apresenta funcionalidade adicional. Aqui estão algumas sugestões sobre como adaptar a classe para atender a requisitos específicos:

1. Ajuste a largura do traço: Para alterar a espessura do traço, modifique o parâmetro strokeWidth. Ao ajustar o parâmetro, você pode definir a espessura do traçado: aumentar o valor produzirá um traçado mais forte, enquanto diminuí-lo criará um traçado mais fino.

   Por exemplo , definir strokeWidth como 10 criará uma caixa de texto com um traço mais grosso em comparação com o valor padrão de 5.

   
   

2. Altere a cor do traçado:

   Este parâmetro permite que você altere a tonalidade do traçado, garantindo maior flexibilidade nas opções de design.

   Você pode utilizar um código hexadecimal ou uma cor nomeada. Por exemplo, definir strokeColor como "#ff0000" gerará um traço vermelho.

   
   

3. Modifique o preenchimento: Para alterar a cor do traço, você pode ajustar o valor de strokeColor. Isso determina o espaço entre o texto e as bordas da caixa de texto. Por exemplo, definir o preenchimento como 10 aumentará o espaçamento ao redor do texto.

   
   

4. Ajustar o arredondamento dos cantos: Para alterar o grau de arredondamento dos cantos da caixa de texto, modifique os valores de rx e ry. Esses parâmetros controlam o nível de arredondamento nos eixos x e y, respectivamente. Por exemplo, definir rx e ry como 10 criará uma caixa de texto com cantos arredondados mais pronunciados.

Além disso, você tem a opção de criar uma nova subclasse que estende a classe Stroked Textbox e incorpora funcionalidade adicional. Essa abordagem oferece possibilidades de personalização ainda maiores, permitindo que você introduza novos recursos na caixa de texto. Por exemplo, você pode criar uma subclasse que adiciona uma sombra projetada à caixa de texto ou altera dinamicamente a fonte com base na entrada do usuário. O potencial de personalização é vasto e a classe Stroked Textbox serve como uma excelente base para construir.