EyeDropper API 提供了一种创建取色器工具的机制，让用户可以从屏幕（包括浏览器窗口之外）中采样颜色。了解 3D 模型编辑器 Blockbench 如何在其代码库中使用此 API。
简介
（本文还提供视频形式。）
Blockbench 是一款免费的现代化模型编辑器，适用于具有像素艺术纹理的低多边形模型。如果您曾玩过 Minecraft，那么很有可能见过使用 Blockbench 创建的资源，例如在《洞穴与山崖》更新第 1 部分中添加到 Minecraft 中的山羊。采用 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 月实现以来，一直在 Blockbench 中发挥着重要作用。如果您使用的是 Blockbench，祝您选色愉快！