API EyeDropper предоставляет механизм для создания инструмента-пипетки, который позволяет пользователям выбирать цвета с экранов, в том числе за пределами окна браузера. Узнайте, как редактор 3D-моделей Blockbench использует этот API в своей кодовой базе.
Введение
(Эта статья также доступна в виде видео.)
Blockbench — это бесплатный современный редактор моделей для низкополигональных моделей с текстурами пиксельной графики. Если вы когда-либо играли в Minecraft , скорее всего, вы видели ресурсы, созданные с помощью Blockbench, например, козу, которая была добавлена в Minecraft как часть обновления Caves and Cliffs, часть 1. Код Blockbench с лицензией GPL версии 3 находится в открытом доступе на GitHub .
Чтобы попробовать Blockbench, запустите приложение, перейдя по адресу web.blockbench.net . Как PWA, вы можете установить его на свой рабочий стол и запустить в отдельном окне. Если вы новичок в 3D-моделировании, вы можете начать с одного из многочисленных примеров файлов .bbmodel с открытым исходным кодом, которые вы можете найти с помощью поиска кода GitHub. Например, попробуйте модель поезда, которую вы видите на следующем снимке экрана.
API-интерфейс EyeDropper
Среди многих других функций Blockbench предлагает функцию покраски, так что если вы когда-либо хотели пометить поезд, теперь вы можете это сделать. Пожалуйста, не делайте этого в реальном мире. Вы можете видеть, что для моей маркировки я использовал ярко-оранжевый цвет.
На самом деле это апельсин, который я извлек напрямую из обоев macOS Ventura через API EyeDropper . Как вы можете видеть на следующем снимке экрана, пипетка (оранжевый круг слева от окна приложения) может выходить за пределы приложения прямо на мой рабочий стол или в любое другое приложение, которое у меня может быть открыто.
Поскольку Blockbench является проектом с открытым исходным кодом, вы можете узнать, как разработчики реализовали API. Код, о котором идет речь, находится в JannisX11/blockbench/blob/master/js/texturing/color.js . Blockbench также доступен как приложение Electron.js. Как вы можете видеть из комментария, в нем есть специальная обработка случаев для проблемы в Electron , когда палитра цветов не может выбрать цвет за пределами окна. С веб-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. Чаще всего нужный цвет не является частью окна приложения, а находится где-то за его пределами, возможно, даже на другом экране . Палитра цветов, которая не позволяет вам выбирать цвета в таких случаях, может быть практически бесполезной. API EyeDropper был создан именно для таких случаев использования и отлично работает для Blockbench с тех пор, как был реализован в ноябре 2021 года. Если вы играете с Blockbench, удачного выбора цвета!