Cách tạo hộp văn bản tùy chỉnh trong Fabric.js: Stroked, Rounded và Papped

Fabric.js là một thư viện JavaScript đáng chú ý giúp hợp lý hóa việc sử dụng các phần tử canvas HTML5, hỗ trợ các nhà phát triển dễ dàng tạo các ứng dụng web hấp dẫn. Được đóng gói với vô số tính năng và công cụ, nó cho phép người dùng thiết kế các giao diện tương tác và trực quan tuyệt đẹp.

Một lợi thế đáng chú ý của Fabric.js nằm ở khả năng tạo các lớp tùy chỉnh, cho phép các nhà phát triển khuếch đại khả năng của nó và tùy chỉnh nó để đáp ứng các yêu cầu riêng của họ.

Blog này sẽ đi sâu vào quá trình thiết kế và sử dụng một lớp được cá nhân hóa trong Fabric.js. Trọng tâm của chúng tôi sẽ là phát triển một hộp văn bản có nét với các góc và phần đệm được bo tròn. Ngoài ra, chúng tôi sẽ khám phá khả năng thích ứng của lớp này để phục vụ cho các tình huống khác nhau. Sau khi hoàn thành blog này, bạn sẽ có kiến thức toàn diện về cách tạo các lớp tùy chỉnh trong Fabric.js và sử dụng chúng để nâng cao các ứng dụng canvas của bạn.

Tạo lớp Stroked Textbox

Lớp Stroked Textbox là một phần mở rộng của lớp Textbox mặc định trong Fabric.js, giới thiệu nhiều tính năng bổ sung khác nhau như độ rộng nét, màu nét, phần đệm và các góc tròn.

Hãy phân tích từng dòng mã trong lớp này:

• type: "textbox": Dòng này chỉ định loại đối tượng được tạo.

• strokeWidth: 5: Dòng này thiết lập độ rộng của nét là 5 pixel.

• strokeColor: "#ffb64f": Dòng này xác định màu nét là #ffb64f.

• splitByGrapheme: true: Dòng này cho biết rằng hộp văn bản sẽ được phân chia dựa trên biểu đồ.

• rx:0: Dòng này gán giá trị 0 cho rx, kiểm soát mức độ làm tròn trên trục x.

• ry: 0: Dòng này gán giá trị 0 cho ry, điều chỉnh mức độ làm tròn trên trục y.

• toObject: Hàm này trả về một đối tượng chứa tất cả các thuộc tính của lớp Textbox, cùng với các thuộc tính mới được giới thiệu bởi lớp Stroked Textbox.

• _renderBackground: _renderBackground: Chức năng này giám sát quá trình hiển thị nền của hộp văn bản, bao gồm phần đệm, các góc bo tròn và nét vẽ.

  
  

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

cơ sở mã

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

Thử nghiệm

https://y5k9l8.csb.app/

Lợi ích khi sử dụng lớp học

Với việc sử dụng lớp Stroked Textbox, chúng tôi có khả năng tạo các hộp văn bản được cá nhân hóa với các thuộc tính hình ảnh đặc biệt vượt qua khả năng của lớp Textbox mặc định. Điều này cho phép chúng tôi tạo ra các ứng dụng canvas sở hữu sức hấp dẫn trực quan nâng cao và thu hút khán giả bằng sự độc đáo của chúng, khiến chúng khác biệt với những ứng dụng khác trong lĩnh vực này.

Sử dụng lớp Stroked Textbox

Để sử dụng lớp Stroked Textbox, chúng ta có thể dễ dàng tạo một thể hiện mới của lớp và cung cấp các tham số cần thiết. Dưới đây là một ví dụ minh họa cách sử dụng lớp, minh họa việc tạo một hộp văn bản với phần đệm, các góc được làm tròn và các màu và độ rộng nét vẽ khác nhau:

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

Trong trường hợp cụ thể này, chúng tôi đã tùy chỉnh giao diện và hành vi của hộp văn bản bằng cách định cấu hình các thuộc tính như fontFamily , padding , width , textAlign , selectable , evented , editable , splitByGrapheme , fill , fontSize , strokeWidth , backgroundColor , hasControls và hasBorders .

Tùy chỉnh lớp hộp văn bản được vuốt

Để tùy chỉnh thêm lớp Stroked Textbox, bạn có thể thực hiện hai cách tiếp cận. Đầu tiên, bạn có khả năng sửa đổi các giá trị tham số trực tiếp trong chính lớp đó.

Ngoài ra, bạn có thể tạo một lớp con mới mở rộng lớp Stroked Textbox và giới thiệu chức năng bổ sung. Dưới đây là một số gợi ý về cách điều chỉnh lớp học cho phù hợp với các yêu cầu cụ thể:

1. Điều chỉnh độ rộng của nét vẽ: Để thay đổi độ dày của nét vẽ, hãy sửa đổi tham số StrokeWidth. Bằng cách điều chỉnh tham số, bạn có thể xác định độ dày của nét vẽ: tăng giá trị sẽ tạo ra nét đậm hơn, trong khi giảm giá trị này sẽ tạo ra nét mảnh hơn.

   Chẳng hạn , đặt strokeWidth thành 10 sẽ tạo một hộp văn bản có nét dày hơn so với giá trị mặc định là 5.

   
   

2. Thay đổi màu nét vẽ:

   Tham số này cho phép bạn thay đổi màu sắc của nét vẽ, giúp bạn linh hoạt hơn trong các lựa chọn thiết kế.

   Bạn có thể sử dụng mã thập lục phân hoặc màu được đặt tên. Ví dụ: đặt strokeColor thành "#ff0000" sẽ tạo ra nét vẽ màu đỏ.

   
   

3. Sửa đổi phần đệm: Để thay đổi màu của nét vẽ, bạn có thể điều chỉnh giá trị của nét vẽ. Điều này xác định khoảng cách giữa văn bản và các cạnh của hộp văn bản. Chẳng hạn, đặt phần đệm thành 10 sẽ tăng khoảng cách xung quanh văn bản.

   
   

4. Điều chỉnh làm tròn các góc: Để thay đổi mức độ làm tròn các góc của hộp văn bản, hãy sửa đổi các giá trị của rx và ry. Các tham số này chi phối mức độ làm tròn trên trục x và y tương ứng. Ví dụ: đặt cả rx và ry thành 10 sẽ tạo hộp văn bản có các góc tròn rõ ràng hơn.

Hơn nữa, bạn có tùy chọn để tạo một lớp con mới mở rộng lớp Hộp văn bản Stroked và kết hợp chức năng bổ sung. Cách tiếp cận này cấp cho bạn khả năng tùy chỉnh thậm chí còn lớn hơn, cho phép bạn giới thiệu các tính năng mới cho hộp văn bản. Chẳng hạn, bạn có thể tạo một lớp con thêm bóng đổ vào hộp văn bản hoặc tự động thay đổi phông chữ dựa trên đầu vào của người dùng. Tiềm năng tùy chỉnh là rất lớn và lớp Stroked Textbox đóng vai trò là nền tảng tuyệt vời để xây dựng.