Die EyeDropper API bietet einen Mechanismus zum Erstellen eines Pipetten-Tools, mit dem Nutzer Farben auf ihrem Bildschirm erfassen können, auch außerhalb des Browserfensters. Hier erfahren Sie, wie der 3D‑Modelleditor Blockbench diese API in seiner Codebasis verwendet.
Einführung
(Dieser Artikel ist auch als Video verfügbar.)
Blockbench ist ein kostenloser, moderner Modelleditor für Low-Poly-Modelle mit Pixel-Art-Texturen. Wenn Sie schon einmal Minecraft gespielt haben, haben Sie wahrscheinlich schon Assets gesehen, die mit Blockbench erstellt wurden, z. B. die Ziege, die Minecraft im Rahmen des Caves and Cliffs-Updates Teil 1 hinzugefügt wurde. Der Blockbench-Code mit GPL-Version 3-Lizenz ist Open Source auf GitHub.
Wenn Sie Blockbench ausprobieren möchten, starten Sie die App unter web.blockbench.net. Als PWA können Sie sie auf Ihrem Computer installieren und in einem eigenständigen Fenster starten. Wenn Sie neu in der 3D-Modellierung sind, können Sie mit einem der vielen Open-Source-Beispiele für .bbmodel-Dateien beginnen, die Sie über die Codesuche von GitHub finden. Probieren Sie zum Beispiel das Zugmodell aus, das im folgenden Screenshot zu sehen ist.
Die EyeDropper API
Blockbench bietet unter anderem eine Malfunktion. Wenn du also schon immer mal einen Zug bemalen wolltest, ist jetzt deine Chance. Bitte tun Sie das nicht in der realen Welt. Wie Sie sehen, habe ich für das Tagging ein leuchtendes Orange verwendet.
Das ist eine Orange, die ich direkt aus dem macOS Ventura-Hintergrund über die EyeDropper API extrahiert habe. Wie Sie im folgenden Screenshot sehen, kann der Farbfüller (der orangefarbene Kreis links neben dem App-Fenster) außerhalb der Anwendung direkt auf meinen Desktop oder eine andere geöffnete App zugreifen.
Da Blockbench Open Source ist, können Sie sich ansehen, wie die Entwickler die API implementiert haben. Der betreffende Code befindet sich in JannisX11/blockbench/blob/master/js/texturing/color.js. Blockbench ist auch als Electron.js-App verfügbar. Wie aus dem Kommentar hervorgeht, gibt es eine spezielle Fallbehandlung für ein Problem in Electron, bei dem die Farbauswahl außerhalb des Fensters nicht funktioniert. Bei der Web API, die im hervorgehobenen Teil des Code-Snippets zu sehen ist, ist das kein Problem. Die API ist einfach zu verwenden. Instantiiere eine neue EyeDropper-Instanz und rufe die Methode open() auf. Bei dieser Methode wird ein sRGBHex-String ausgegeben, der die ausgewählte Farbe im sRGB-Hexadezimalformat darstellt.
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);
}
},
});
Ergebnisse
Farbauswahltools sind ein kleines, aber wichtiges Element von Kreativsoftware wie Blockbench. In den meisten Fällen ist die gewünschte Farbe nicht Teil des App-Fensters, sondern befindet sich irgendwo außerhalb, möglicherweise sogar auf einem anderen Bildschirm. Eine Farbauswahl, mit der Sie in solchen Fällen keine Farben auswählen können, ist nahezu nutzlos. Die EyeDropper API wurde genau für Anwendungsfälle wie diesen entwickelt und funktioniert seit ihrer Implementierung im November 2021 hervorragend für Blockbench. Viel Spaß beim Auswählen der Farben in Blockbench!