EyeDropper API cung cấp một cơ chế để tạo công cụ chọn màu cho phép người dùng lấy mẫu màu từ màn hình, bao gồm cả bên ngoài cửa sổ trình duyệt. Tìm hiểu cách trình chỉnh sửa mô hình 3D Blockbench sử dụng API này trong cơ sở mã của họ.
Giới thiệu
(Bài viết này cũng có dạng video.)
Blockbench là một trình chỉnh sửa mô hình hiện đại, miễn phí dành cho các mô hình có độ phân giải thấp với hoạ tiết nghệ thuật pixel. 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 chạy ứng dụng bằng cách truy cập vào web.blockbench.net. Là một PWA, bạn có thể cài đặt ứng dụng này trên máy tính và chạ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 với 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 điều này trong thế giới thực. Bạn có thể thấy rằng tôi đã sử dụng màu cam sáng để gắn thẻ.
Đâ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ột dự án 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 làm nổi bật 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 bản sao của thực thể EyeDropper mới và gọi phương thức open() của thực thể đó. 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, hãy chọn màu sắc theo ý thích!