Để tạo trình kết xuất tuỳ chỉnh, bạn cần tạo lớp con của lớp Renderer. Tham khảo tài liệu về khái niệm trình kết xuất để biết thêm thông tin về trình kết xuất và chức năng của trình kết xuất.
class CustomRenderer extends Blockly.blockRendering.Renderer {
constructor() {
super();
}
}
Nếu không có bất kỳ tuỳ chỉnh nào, trình kết xuất mặc định sẽ có dạng như sau:
Bạn cũng có thể tạo lớp con cho một trong các trình kết xuất tích hợp sẵn khác, sau đó ghi đè một số phần của lớp con đó.
class CustomRenderer extends Blockly.thrasos.Renderer {
constructor() {
super();
}
}
Lớp con các thành phần kết xuất khác
Hình dạng thực tế của khối được xác định bởi các thành phần phụ của trình kết xuất.
Theo mặc định, lớp Renderer cung cấp các phiên bản đang hoạt động của tất cả thành phần kết xuất. Điều này cho phép bạn sửa đổi một thành phần mà không cần lo lắng về các thành phần khác.
Ví dụ: nếu muốn thay đổi hình dạng của các kết nối, bạn có thể ghi đè hằng số mà không cần chạm vào các thành phần khác.
Hãy xem tài liệu về thành phần trình kết xuất để biết thêm thông tin về chức năng của từng thành phần.
Ghi đè phương thức ban đầu
Sau khi tạo lớp con cho các thành phần trình kết xuất, bạn cần ghi đè các phương thức ban đầu của Renderer cho các thành phần mà bạn đã tạo lớp con. Điều này cho phép trình kết xuất kết nối đúng cách các thành phần với nhau.
Có một phương thức cho mỗi loại thành phần:
makeConstants_makeRenderInfo_makePathObject(lưu ý không có dấu gạch dưới)makeDrawer_
Đăng ký trình kết xuất
Cuối cùng, sau khi hoàn tất việc tạo trình kết xuất tuỳ chỉnh, bạn cần đăng ký trình kết xuất đó. Thao tác này liên kết trình kết xuất với một chuỗi để bạn có thể truyền chuỗi đó đến các tuỳ chọn cấu hình.
Blockly.blockRendering.register('custom_renderer', CustomRenderer);
const workspace = Blockly.inject(blocklyDiv, {
renderer: 'custom_renderer',
});