Cómo crear cuadros de texto personalizados en Fabric.js: trazo, redondeado y acolchado

Fabric.js es una notable biblioteca de JavaScript que agiliza el uso de elementos de lienzo HTML5, lo que permite a los desarrolladores crear aplicaciones web atractivas sin esfuerzo. Equipado con una multitud de funciones y herramientas, permite a los usuarios diseñar interfaces interactivas y visualmente impresionantes.

Una ventaja notable de Fabric.js radica en su capacidad para generar clases personalizadas, lo que permite a los desarrolladores ampliar sus capacidades y personalizarlo para cumplir con sus requisitos únicos.

Este blog profundizará en el proceso de diseño y uso de una clase personalizada en Fabric.js. Nuestro enfoque estará en desarrollar un cuadro de texto con trazos con esquinas redondeadas y relleno. Además, exploraremos la adaptabilidad de esta clase para adaptarse a varios escenarios. Al completar este blog, tendrá una comprensión integral de la creación de clases personalizadas en Fabric.js y las utilizará para mejorar sus aplicaciones de lienzo.

Creación de la clase de cuadro de texto acariciado

La clase de cuadro de texto con trazos es una extensión de la clase de cuadro de texto predeterminada en Fabric.js, que presenta varias características adicionales, como el ancho del trazo, el color del trazo, el relleno y las esquinas redondeadas.

Analicemos cada línea de código dentro de esta clase:

• type: "textbox": esta línea especifica el tipo de objeto que se está creando.

• strokeWidth: 5: esta línea establece el ancho del trazo en 5 píxeles.

• strokeColor: "#ffb64f": esta línea determina el color del trazo como #ffb64f.

• splitByGrapheme: true: esta línea indica que el cuadro de texto debe dividirse en función de los grafemas.

• rx: 0: Esta línea asigna un valor de 0 a rx, controlando el grado de redondeo en el eje x.

• ry: 0: esta línea asigna un valor de 0 a ry, que rige el grado de redondeo en el eje y.

• toObject: esta función devuelve un objeto que contiene todas las propiedades de la clase Textbox, junto con las nuevas propiedades introducidas por la clase Stroke Textbox.

• _renderBackground: _renderBackground: esta función supervisa el proceso de representación del fondo del cuadro de texto, que abarca el relleno, las esquinas redondeadas y el trazo.

  
  

 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

Manifestación

https://y5k9l8.csb.app/

Beneficios de usar la clase.

Con la utilización de la clase Stroked Textbox, obtenemos la capacidad de generar cuadros de texto personalizados dotados de atributos visuales distintivos que superan las capacidades de la clase Textbox predeterminada. Esto nos permite crear aplicaciones de lienzo que poseen un atractivo visual mejorado y cautivan a la audiencia con su singularidad, diferenciándolos de otros en el campo.

Uso de la clase de cuadro de texto acariciado

Para utilizar la clase Stroke Textbox, podemos generar fácilmente una nueva instancia de la clase y proporcionar los parámetros necesarios. A continuación se muestra un ejemplo que demuestra el uso de la clase, mostrando la creación de un cuadro de texto con relleno, esquinas redondeadas y varios colores y anchos de trazo:

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

En este caso particular, hemos personalizado la apariencia y el comportamiento del cuadro de texto mediante la configuración de propiedades como fontFamily , padding , width , textAlign , selectable , evented , editable , splitByGrapheme , fill , fontSize , strokeWidth , backgroundColor , hasControls y hasBorders .

Personalización de la clase de cuadro de texto acariciado

Para personalizar aún más la clase Stroke Textbox, hay dos enfoques que puede tomar. En primer lugar, posee la capacidad de modificar los valores de los parámetros directamente dentro de la propia clase.

Como alternativa, puede crear una nueva subclase que amplíe la clase Cuadro de texto con trazos e introduzca funciones adicionales. Aquí hay algunas sugerencias sobre cómo adaptar la clase para satisfacer requisitos específicos:

1. Ajuste el ancho del trazo: para modificar el grosor del trazo, modifique el parámetro strokeWidth. Al ajustar el parámetro, puede definir el grosor del trazo: aumentar el valor producirá un trazo más audaz, mientras que disminuirlo creará un trazo más fino.

   Por ejemplo , establecer strokeWidth en 10 creará un cuadro de texto con un trazo más grueso en comparación con el valor predeterminado de 5.

   
   

2. Cambiar el color del trazo:

   Este parámetro le permite alterar el tono del trazo, otorgándole una mayor flexibilidad en las opciones de diseño.

   Puede utilizar un código hexadecimal o un color con nombre. Por ejemplo, establecer strokeColor en "#ff0000" generará un trazo rojo.

   
   

3. Modifique el relleno: para cambiar el color del trazo, puede ajustar el valor de strokeColor. Esto determina el espacio entre el texto y los bordes del cuadro de texto. Por ejemplo, configurar el relleno en 10 aumentará el espacio alrededor del texto.

   
   

4. Ajusta el redondeo de las esquinas: para cambiar el grado de redondeo de las esquinas del cuadro de texto, modifica los valores de rx y ry. Estos parámetros gobiernan el nivel de redondeo en los ejes x e y, respectivamente. Por ejemplo, establecer tanto rx como ry en 10 creará un cuadro de texto con esquinas redondeadas más pronunciadas.

Además, tiene la opción de crear una nueva subclase que amplíe la clase de cuadro de texto con trazos e incorpore funciones adicionales. Este enfoque le otorga posibilidades de personalización aún mayores, lo que le permite introducir nuevas funciones en el cuadro de texto. Por ejemplo, podría crear una subclase que agregue una sombra paralela al cuadro de texto o cambie dinámicamente la fuente según la entrada del usuario. El potencial de personalización es enorme, y la clase Stroke Textbox sirve como una excelente base para construir.