API EyeDropper cung cấp cơ chế tạo công cụ chọn màu cho phép người dùng lấy mẫu màu trên màn hình, kể cả bên ngoài cửa sổ trình duyệt. Tìm hiểu cách Blockbench sử dụng API này trong cơ sở mã của trình chỉnh sửa mô hình 3D.
Giới thiệu
(Bài viết này cũng được cung cấp dưới dạng video).
Blockbench là trình chỉnh sửa mô hình hiện đại, miễn phí dành cho các mô hình ít đa giác có hoạ tiết nghệ thuật điểm ảnh. Nếu từng chơi Minecraft, có thể bạn đã thấy các tài sản được tạo bằng Blockbench, chẳng hạn như dê được thêm vào Minecraft trong bản cập nhật Caves and Cliffs (Hang động và vách đá), Phần 1. Mã Blockbench được cấp phép GPL phiên bản 3 là mã nguồn mở trên GitHub.
Để dùng thử Blockbench, hãy mở ứng dụng này bằng cách truy cập vào web.blockbench.net. Là một ứng dụng web tiến bộ (PWA), bạn có thể cài đặt ứng dụng này trên máy tính và chạy ứng dụng này trong một cửa sổ độc lập. Nếu mới làm quen với việc lập mô hình 3D, bạn có thể bắt đầu bằng một trong nhiều ví dụ về tệp .bbmodel nguồn mở mà bạn có thể tìm thấy bằng tính năng tìm kiếm mã của GitHub. Ví dụ: hãy thử mô hình tàu hỏa mà bạn có thể thấy trong ảnh chụp màn hình sau.
EyeDropper API
Trong số nhiều tính năng khác, Blockbench cung cấp tính năng vẽ. Vì vậy, nếu bạn muốn gắn thẻ cho một chuyến tàu, thì giờ đây bạn có thể làm được. Vui lòng không làm việc này trong thế giới thực. Bạn có thể thấy rằng để gắn thẻ, tôi đã sử dụng màu cam sáng.
Đây thực sự là một quả cam mà tôi đã trích xuất trực tiếp từ hình nền macOS Ventura thông qua EyeDropper API. Như bạn có thể thấy trong ảnh chụp màn hình sau, công cụ chọn màu (vòng tròn màu cam ở bên trái cửa sổ ứng dụng) có thể vươn ra ngoài ứng dụng ngay vào màn hình nền hoặc bất kỳ ứng dụng nào khác mà tôi có thể mở.
Blockbench là mã nguồn mở, vì vậy, bạn có thể tìm hiểu cách các nhà phát triển triển khai API này. Mã có liên quan nằm trong JannisX11/blockbench/blob/master/js/texturing/color.js. Blockbench cũng có sẵn dưới dạng ứng dụng Electron.js. Bạn có thể thấy trong phần bình luận, ứng dụng này có cách xử lý trường hợp đặc biệt cho vấn đề trong Electron, trong đó công cụ chọn màu không thể chọn màu bên ngoài cửa sổ. Với API web mà bạn có thể thấy trong phần được đánh dấu của đoạn mã, đây không phải là vấn đề. Cách sử dụng API rất đơn giản. Tạo thực thể EyeDropper mới và gọi phương thức open(). Phương thức này phân giải bằng một chuỗi sRGBHex đại diện cho màu đã chọn, ở định dạng sRGB thập lục phân.
new Action("pick_screen_color", {
icon: "colorize",
category: "color",
condition: () => typeof EyeDropper == "function",
click: async function () {
if (Blockbench.platform == "win32") {
// workaround for https://github.com/electron/electron/issues/27980
ipcRenderer.send("request-color-picker", {
sync: settings.sync_color.value,
});
} else if (typeof EyeDropper == "function") {
let dropper = new EyeDropper();
let { sRGBHex } = await dropper.open();
ColorPanel.set(sRGBHex);
}
},
});
Kết luận
Công cụ chọn màu là một phần nhỏ nhưng quan trọng của phần mềm sáng tạo như Blockbench. Thông thường, màu mong muốn không nằm trong cửa sổ ứng dụng, mà nằm ở một nơi nào đó bên ngoài, thậm chí có thể trên một màn hình khác. Công cụ chọn màu không cho phép bạn chọn màu trong những trường hợp như vậy có thể gần như vô dụng. EyeDropper API được tạo ra chính xác cho các trường hợp sử dụng như thế này và hoạt động rất hiệu quả cho Blockbench kể từ khi được triển khai vào tháng 11 năm 2021. Nếu bạn chơi với Blockbench, chúc bạn chọn màu sắc vui vẻ!