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, удачного выбора цвета!