EyeDropper API 提供了一种用于创建取色器工具的机制，该工具可让用户对自己的屏幕（包括浏览器窗口以外的屏幕）进行颜色采样。了解 3D 模型编辑器 Blockbench 如何在其代码库中使用此 API。
简介
（本文也可以视频形式提供）。
Blockbench 是一款免费的现代模型编辑器，适用于具有像素艺术纹理的低多边形模型。如果您玩过《我的世界》，很有可能看到过使用 Blockbench 创建的资源，例如在《洞穴和悬崖更新》（第 1 部分）中被添加到《我的世界》中的山羊。获得 GPL 版本 3 许可的 Blockbench 代码是 GitHub 上的开源代码。
如需试用 Blockbench，请前往 web.blockbench.net 启动该应用。作为 PWA，您可以将其安装到桌面，并在独立的窗口中启动。如果您刚开始接触 3D 建模，可以从使用 GitHub 的代码搜索找到的众多开源 .bbmodel 文件示例中选择一个。例如，试用以下屏幕截图中显示的训练模型。
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() 方法。此方法通过表示所选颜色的 sRGBHex 字符串进行解析，采用十六进制 sRGB 格式。
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 月implemented以来，一直非常适合用于 Blockbench。如果你用 Blockbench 玩，那么选色就好！