EyeDropper API 提供了一种创建取色器工具的机制，让用户可以从其屏幕（包括浏览器窗口之外）中采样颜色。了解 3D 模型编辑器 Blockbench 如何在其代码库中使用此 API。
简介
（本文也可以视频的形式提供。）
Blockbench 是一款免费的现代模型编辑器，适用于具有像素艺术纹理的低多边形模型。如果您玩过《我的世界》，很有可能看到过使用 Blockbench 创建的资产，例如山羊，它是《我的世界》中作为“洞穴和悬崖”更新（第 1 部分）的一部分。已获 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》，祝你选色愉快！