EyeDropper API 提供建立滴管工具的機制，讓使用者從螢幕 (包括瀏覽器視窗以外的部分) 取樣顏色。瞭解 3D 模型編輯器 Blockbench 如何在程式碼庫中使用這個 API。
簡介
(這篇文章也有影片版本)。
Blockbench 是免費的現代化模型編輯器，可用於具有像素藝術紋理的低多邊形模型。如果您曾玩過 Minecraft，您一定看過使用 Blockbench 建立的資產，例如羊在《洞穴與懸崖更新遊戲》第 1 部中新增至 Minecraft 中。授權為 GPL 第 3 版的 Blockbench 程式碼已在 GitHub 上開放原始碼。
如要試用 Blockbench，請前往 web.blockbench.net 啟動應用程式。由於 Blockbench 是 PWA，因此您可以將其安裝到電腦上，並在獨立視窗中啟動。如果您是 3D 建模新手，可以先從眾多開放原始碼 .bbmodel 檔案範例著手，這些範例可透過 GitHub 的程式碼搜尋功能找到。例如，請嘗試以下螢幕截圖中的訓練模型。
EyeDropper API
除了許多其他功能之外，Blockbench 也提供繪圖功能，因此如果您想標記火車，現在就可以這麼做。請勿在現實世界中這麼做。你可以看到，我使用了亮橘色標記。
這其實是透過 EyeDropper API，直接從 macOS Ventura 桌布擷取的橘色圖案。如以下螢幕截圖所示，滴管 (應用程式視窗左側的橘色圓圈) 可以直接從應用程式外部進入我的電腦桌面，或任何我可能已開啟的應用程式。
Blockbench 採用開放原始碼，因此你可以瞭解開發人員如何實作 API。問題的程式碼位於 JannisX11/blockbench/blob/master/js/texturing/color.js 中。Blockbench 也可做為 Electron.js 應用程式使用。從註解中可知，Blockbench 針對Electron 中的錯誤提供特殊的例外狀況處理方式，因為在該錯誤中，色彩挑選器無法在視窗外挑選顏色。使用 Web API 就位在程式碼片段中醒目顯示的部分，而且不會發生問題。API 的使用方法相當簡單，實例化新的 EyeDropper 例項，並呼叫其 open() 方法。這個方法會以 十六進位 sRGB 格式，解析代表所選顏色的 sRGBHex 字串。
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);
}
},
});
結論
色彩挑選器是 Blockbench 等創意軟體中不可或缺的功能。所需的顏色通常不屬於應用程式視窗的一部分，而是放在外部位置 (甚至是其他螢幕) 的位置。在這種情況下，如果顏色挑選器無法讓您挑選顏色，幾乎就沒有用處了。EyeDropper API 正是為這類用途而生，自 2021 年 11 月導入以來，一直都非常適合 Blockbench 使用。如果您使用 Blockbench，請盡情挑選顏色！