如何在 Fabric.js 中构建自定义文本框：描边、圆角和填充

Fabric.js 是一个卓越的JavaScript库，它简化了 HTML5 canvas 元素的使用，使开发人员能够毫不费力地制作引人入胜的 Web 应用程序。它包含大量功能和工具，使用户能够设计交互式和视觉上令人惊叹的界面。

Fabric.js的一个显着优势在于它能够生成自定义类，使开发人员能够扩展其功能并对其进行自定义以满足他们的独特需求。

本博客将深入探讨在 Fabric.js 中设计和使用个性化类的过程。我们的重点将放在开发带有圆角和填充的描边文本框上。此外，我们将探索此类的适应性以适应各种场景。完成本博客后，您将全面掌握如何在 Fabric.js 中制作自定义类并利用它们来提升您的画布应用程序。

创建描边文本框类

Stroked Textbox 类是 Fabric.js 中默认 Textbox 类的扩展，引入了各种附加功能，例如笔划宽度、笔划颜色、填充和圆角。

让我们分析这个类中的每一行代码：

• type: "textbox":此行指定正在创建的对象类型。

• strokeWidth: 5：此行将笔划宽度设置为 5 像素。

• strokeColor: "#ffb64f"：此行将笔触颜色确定为#ffb64f。

• splitByGrapheme: true：此行表示文本框应根据字素进行拆分。

• rx: 0：这一行给rx赋值0，控制x轴上的圆度。

• ry: 0：此行将值 0 分配给 ry，控制 y 轴上的舍入度。

• toObject：此函数返回一个对象，其中包含 Textbox 类的所有属性，以及 Stroked Textbox 类引入的新属性。

• _renderBackground: _renderBackground：此函数监督文本框背景的渲染过程，包括填充、圆角和描边。

  
  

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

代码库

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

演示

https://y5k9l8.csb.app/

使用类的好处

通过使用 Stroked Textbox 类，我们获得了生成个性化文本框的能力，这些文本框具有超越默认 Textbox 类功能的独特视觉属性。这使我们能够制作出具有增强视觉吸引力的画布应用程序，并以其独特性吸引观众，使它们在该领域中脱颖而出。

使用 Stroked 文本框类

要使用 Stroked Textbox 类，我们可以轻松生成该类的新实例并提供必要的参数。下面是一个演示该类用法的示例，展示了创建具有填充、圆角和各种笔触颜色和宽度的文本框：

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

在此特定实例中，我们通过配置fontFamily 、 padding 、 width 、 textAlign 、 selectable 、 evented 、 editable 、 splitByGrapheme 、 fill 、 fontSize 、 strokeWidth 、 backgroundColor 、 hasControls和hasBorders等属性自定义了文本框的外观和行为。

自定义 Stroked 文本框类

要进一步自定义 Stroked Textbox 类，您可以采用两种方法。首先，您拥有直接在类本身内修改参数值的能力。

或者，您可以创建一个新的子类来扩展 Stroked Textbox 类并引入其他功能。以下是有关如何定制课程以满足特定要求的一些建议：

1. 调整笔划宽度：要更改笔划的粗细，请修改 strokeWidth 参数。通过调整参数，您可以定义笔划粗细：增加该值将产生更粗的笔划，而减小该值将创建更精细的笔划。

   例如，将 strokeWidth 设置为 10 将创建一个笔划比默认值 5 更粗的文本框。

   
   

2. 更改描边颜色：

   此参数使您能够改变笔触的色调，从而使您在设计选择上具有更大的灵活性。

   您可以使用十六进制代码或命名颜色。例如，将strokeColor设置为“#ff0000”将生成红色描边。

   
   

3. 修改padding：要改变笔触的颜色，可以调整strokeColor的值。这决定了文本和文本框边缘之间的空间。例如，将 padding 设置为 10 将增加文本周围的间距。

   
   

4. 调整角的圆度：要更改文本框角的圆度，请修改 rx 和 ry 的值。这些参数分别控制 x 和 y 轴上的舍入级别。例如，将 rx 和 ry 都设置为 10 将创建一个具有更明显圆角的文本框。

此外，您可以选择创建一个新的子类来扩展 Stroked Textbox 类并合并其他功能。这种方法为您提供了更大的自定义可能性，允许您向文本框引入新功能。例如，您可以创建一个子类，为文本框添加阴影或根据用户输入动态更改字体。定制的潜力是巨大的，Stroked Textbox 类是一个很好的构建基础。