EyeDropper API 提供一種建立滴管工具，可讓使用者從自己的畫面 (包括瀏覽器視窗外) 取樣顏色。瞭解 3D 模型編輯器 Blockbench 如何在程式碼集中使用這個 API。
簡介
(這篇文章也可以影片的形式提供)。
Blockbench 是免費的現代化模型編輯器，適用於採用像素藝術紋理的低多邊形模型。如果您曾經玩過 Minecraft，大概會見過使用 Blockbench 建立的資產 (例如山羊)。在《洞穴與懸崖更新》(第 1 部分) 中，將山羊加入 Minecraft 中。GPL 第 3 版授權的 Blockbench 程式碼是 GitHub 上的開放原始碼。
如要試用 Blockbench，請前往 web.blockbench.net 以啟動應用程式。做為 PWA，您可以將應用程式安裝至電腦，並在獨立視窗中啟動。如果您是第一次使用 3D 模型建立模型，可以從眾多開放原始碼 .bbmodel 檔案範例開始著手，您可以使用 GitHub 的程式碼搜尋功能找到。例如，試試訓練模型，如下方的螢幕截圖所示。
EyeDropper API
在許多其他功能中，Blockbench 就提供彩繪功能，因此現在你也能標記火車名稱。請勿在現實世界中這麼做。如畫面所示，我使用亮橘色的標記。
這其實是我透過 EyeDropper API 直接從 macOS Ventura 桌布擷取的橘色。如以下螢幕截圖所示，滴管 (應用程式視窗左側的橘色圓圈) 可直接從應用程式外連到桌面，或我開啟的任何其他應用程式。
透過 Blockbench 做為開放原始碼後，您可以瞭解開發人員如何實作這個 API。相關程式碼位於 JannisX11/blockbench/blob/master/js/texturing/color.js。Blockbench 也可做為 Electron.js 應用程式使用。在註解中，我們有針對 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，請開心挑選顏色！