Để tạo một trình kết xuất tuỳ chỉnh, bạn cần phải phân lớp con của lớp Renderer. Hãy tham khảo các tài liệu khái niệm về 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 khác, sau đó ghi đè các phần của trình kết xuất đó.
class CustomRenderer extends Blockly.thrasos.Renderer {
constructor() {
super();
}
}
Lớp con các thành phần kết xuất đồ hoạ 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 sẽ cung cấp phiên bản đang hoạt động của tất cả thành phần trình kết xuất. Điều này cho phép bạn sửa đổi một thành phần duy nhất mà không phải 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 đè constants 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 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 phân lớp con cho các thành phần trình kết xuất, bạn cần ghi đè phương thức nhà máy của Renderer cho các thành phần mà bạn đã phân 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 khác nhau với nhau.
Có một phương thức cho mỗi loại thành phần:
makeConstants_makeRenderInfo_makePathObject(lưu ý rằng không có dấu gạch dưới)makeDrawer_
Đăng ký trình kết xuất
Cuối cùng, sau khi tạo xong 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 sẽ 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ấu hình chèn.
Blockly.blockRendering.register('custom_renderer', CustomRenderer);
const workspace = Blockly.inject(blocklyDiv, {
renderer: 'custom_renderer',
});