Interfejs EyeDropper API umożliwia utworzenie narzędzia zakraplacza, które umożliwia użytkownikom próbkowanie kolorów z ekranów, również poza oknem przeglądarki. Dowiedz się, jak edytor modeli 3D Blockbench używa tego interfejsu API w swojej bazie kodu.
Wstęp
(Ten artykuł jest również dostępny w formie filmu).
Blockbench to bezpłatny, nowoczesny edytor modeli do tworzenia modeli o małej liczbie wielofazowej z teksturami w stylu pixel art. Jeśli zdarzyło Ci się już grać w Minecrafta, prawdopodobnie znasz zasoby utworzone w Blockbench, np. kozę, która została dodana do gry Minecraft w ramach aktualizacji dotyczącej jaskini i klifów (część 1). Kod Blockbench, na podstawie którego licencjobiorcy spółek spółki spółki LLLC jest dostępny w serwisie GitHub, jest dostępny na licencji open source.
Aby wypróbować Blockbench, uruchom aplikację na stronie web.blockbench.net. Możesz ją zainstalować na komputerze i uruchomić w osobnym oknie. Jeśli nie masz doświadczenia w modelowaniu 3D, możesz zacząć od jednego z wielu przykładowych plików .bbmodel typu open source, które można znaleźć za pomocą wyszukiwarki kodu na GitHubie. Wypróbuj na przykład model pociągu widoczny na zrzucie ekranu poniżej.
Interfejs EyeDropper API
Blockbench oferuje między innymi funkcję malowania, więc jeśli chcesz tagować pociąg, teraz możesz to zrobić. Nie rób tego w rzeczywistości. Jak widać, do tagowania użyję jasnopomarańczowego koloru.
To jest pomarańcza wyodrębniona bezpośrednio z tapety macOS Ventura przy użyciu interfejsu EyeDropper API. Jak widać na poniższym zrzucie ekranu, zakraplacz (pomarańczowe kółko po lewej stronie okna aplikacji) może dostać się na zewnątrz aplikacji bezpośrednio do pulpitu lub dowolnej innej otwartej aplikacji.
Ponieważ Blockbench jest oprogramowaniem typu open source, możesz sprawdzić, jak programiści implementują ten interfejs API. Ten kod znajduje się w języku JannisX11/blockbench/blob/master/js/texturing/color.js. Blockbench jest też dostępny jako aplikacja Electron.js. Jak widać z komentarza, w przypadku problemu w Electron selektor kolorów nie może wybrać koloru poza oknem. Problem ten nie jest związany z internetowym interfejsem API, który widać w zaznaczonej części fragmentu kodu. Korzystanie z interfejsu API jest proste. Utwórz instancję nowej instancji EyeDropper i wywołaj jej metodę open(). Ta metoda działa za pomocą ciągu sRGBHex reprezentującego wybrany kolor w szesnastkowym formacie 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);
}
},
});
Podsumowanie
Selektory kolorów to niewielki, ale ważny element oprogramowania kreatywnego, takiego jak Blockbench. Najczęściej żądany kolor nie jest częścią okna aplikacji, lecz da się go znaleźć gdzieś na zewnątrz, a nawet na innym ekranie. Selektor kolorów, który w takich przypadkach nie pozwala na wybieranie kolorów, może okazać się niemal bezużyteczny. Interfejs EyeDropper API został stworzony właśnie na potrzeby takich przypadków użycia i od wdrożenia w listopadzie 2021 roku, który świetnie sprawdza się w przypadku Blockbench. Jeśli grasz w Blockbench, czujesz radość z wyboru kolorów.