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 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 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ó sẵn ở 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 đa giác thấp bằng 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ư con dê được thêm vào Minecraft trong phần 1 của Bản cập nhật hang động và vách đá, phần 1. Mã Blockbench phiên bản 3 được cấp phép là 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. Dưới dạng PWA, bạn có thể cài đặt ứng dụng này trên máy tính và khởi chạy trong một cửa sổ độc lập. Nếu chưa 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 cách sử dụng tính năng tìm kiếm mã của GitHub. Ví dụ: hãy thử mô hình tàu hoả mà bạn có thể thấy trong ảnh chụp màn hình sau đây.
API EyeDropper
Trong số nhiều tính năng khác, Blockbench cung cấp tính năng tô màu, vì vậy nếu bạn từng muốn gắn thẻ một chuyến tàu thì giờ đây bạn có thể thực hiện việc này. 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 trong quy trình gắn thẻ, tôi đã sử dụng một màu cam sáng.
Đây thực sự là một màu 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 đây, công cụ chọn màu (hình tròn màu cam bên trái cửa sổ ứng dụng) có thể đưa thẳng ra bên ngoài ứng dụng vào thẳng máy tính hoặc bất kỳ ứng dụng nào khác mà tôi có thể đã mở.
Với Blockbench là nguồn mở, bạn có thể tìm hiểu cách các nhà phát triển đã triển khai API. Mã liên quan nằm bằng JannisX11/blockbench/blob/master/js/texturing/color.js. Blockbench cũng được cung cấp 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 đối với một 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 đề. Việc sử dụng API này rất đơn giản. Tạo thực thể cho phiên bản 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 biểu thị 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 mềm nhỏ nhưng quan trọng trong việc sáng tạo như Blockbench. Thường thì màu sắc bạn mong muốn sẽ không xuất hiện trên cửa sổ ứng dụng, nhưng chúng có thể được nhìn thấy ở một nơi nào đó bên ngoài, thậm chí là 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 những trường hợp sử dụng như thế này và hoạt động hiệu quả cho Blockbench kể từ khi API này được triển khai vào tháng 11 năm 2021. Nếu bạn chơi Blockbench, hãy chơi vui vẻ!