Interfejs EyeDropper API udostępnia mechanizm do tworzenia narzędzia zakraplacza, które pozwala użytkownikom pobierać próbki kolorów z ekranów, w tym poza oknem przeglądarki. Dowiedz się, jak edytor modeli 3D Blockbench używa tego interfejsu API w swojej bazie kodu.
Wprowadzenie
(Ten artykuł jest też dostępny w formie filmu).
Blockbench to nowoczesny, bezpłatny edytor modeli z teksturami w technologii pixel art. Jeśli grałeś/grałaś w Minecrafta, prawdopodobnie widziałeś/widziałaś zasoby utworzone w Blockbench, np. kozę, która została dodana do Minecrafta w ramach aktualizacji Jaskinie i Urwiska, część 1. Kod Blockbench na licencji GPL w wersji 3 jest dostępny w wersji open source na GitHubie.
Aby wypróbować Blockbench, otwórz aplikację, przechodząc na stronę web.blockbench.net. Jako aplikację PWA możesz ją zainstalować na komputerze i uruchomić w oknie osobnym. Jeśli dopiero zaczynasz modelować w 3D, możesz zacząć od jednego z wielu przykładów plików .bbmodel open source, które znajdziesz w wyszukiwarce kodu na GitHubie. Wypróbuj na przykład model pociągu widoczny na poniższym zrzucie ekranu.
Interfejs EyeDropper API
Wśród wielu innych funkcji Blockbench oferuje funkcję malowania, dzięki której możesz dodać tag do pociągu. Nie rób tego w prawdziwym życiu. Jak widać, do oznaczenia użyłem jaskrawo pomarańczowego koloru.
To pomarańcza wyodrębniona bezpośrednio z tapety macOS Ventura za pomocą interfejsu EyeDropper API. Jak widać na tym zrzucie ekranu, pipeta (pomarańczowe kółko po lewej stronie okna aplikacji) może sięgnąć poza aplikację, bezpośrednio na pulpit lub inną otwartą aplikację.
Blockbench jest oprogramowaniem open source, więc możesz dowiedzieć się, jak deweloperzy wdrożą interfejs API. Kod, o którym mowa, znajduje się w pliku JannisX11/blockbench/blob/master/js/texturing/color.js. Blockbench jest też dostępny jako aplikacja Electron.js. Jak widać z tego komentarza, ma on specjalny przypadek obsługi problemu w Electronie, w którym selektor kolorów nie może wybrać koloru poza oknem. W przypadku interfejsu web API, który możesz zobaczyć w wyróżnionym fragmencie kodu, nie jest to problem. Korzystanie z interfejsu API jest proste. Utwórz nową instancję EyeDropper i wywołaj jej metodę open(). Ta metoda zwraca ciąg sRGBHex reprezentujący 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
Wybieraki kolorów to mały, ale ważny element oprogramowania do tworzenia, takiego jak Blockbench. W większości przypadków pożądany kolor nie znajduje się w oknie aplikacji, ale gdzieś na zewnątrz, być może nawet na innym ekranie. Selektor kolorów, który nie pozwala wybrać kolorów w takich przypadkach, może być prawie bezużyteczny. Interfejs EyeDropper API został stworzony właśnie na potrzeby takich przypadków użycia i świetnie się sprawdza w serwisie Blockbench od czasu jego wdrożenia w listopadzie 2021 r. Jeśli grasz w Blockbench, życzę udanego doboru kolorów.