De EyeDropper API biedt een mechanisme voor het maken van een pipettool waarmee gebruikers kleuren kunnen proeven vanaf hun scherm, ook buiten het browservenster. Ontdek hoe de 3D-modeleditor Blockbench deze API gebruikt in hun codebase.
Invoering
(Dit artikel is ook beschikbaar in de vorm van een video.)
Blockbench is een gratis, moderne modeleditor voor low-poly-modellen met pixelart-texturen. Als je ooit Minecraft hebt gespeeld, is de kans groot dat je items hebt gezien die met Blockbench zijn gemaakt, bijvoorbeeld de geit, die aan Minecraft is toegevoegd als onderdeel van de Caves and Cliffs Update, deel 1. De Blockbench-code met GPL-versie 3-licentie is open bron op GitHub .
Om Blockbench te proberen, start u de app door naar web.blockbench.net te navigeren. Als PWA kunt u het op uw bureaublad installeren en in een zelfstandig venster starten. Als u nog niet bekend bent met 3D-modellering, kunt u beginnen met een van de vele open source .bbmodel bestandsvoorbeelden die u kunt vinden met behulp van de codezoekopdracht van GitHub. Probeer bijvoorbeeld het treinmodel dat je in de volgende schermafbeelding kunt zien.
De EyeDropper-API
Naast vele andere functies biedt Blockbench een verffunctie, dus als je ooit een trein wilde taggen, dan kan dat nu. Doe dit alsjeblieft niet in de echte wereld. Je kunt zien dat ik voor mijn tags fel oranje heb gebruikt.
Dit is eigenlijk een sinaasappel die ik rechtstreeks uit de macOS Ventura-achtergrond heb gehaald via de EyeDropper API . Zoals je in de volgende schermafbeelding kunt zien, kan de pipet (de oranje cirkel links van het app-venster) buiten de applicatie rechtstreeks naar mijn bureaublad reiken, of naar een andere app die ik open heb staan.
Omdat Blockbench open source is, kun je leren hoe de ontwikkelaars de API hebben geïmplementeerd. De betreffende code bevindt zich in JannisX11/blockbench/blob/master/js/texturing/color.js . Blockbench is ook beschikbaar als Electron.js-app. Je kunt aan de opmerking zien dat er een speciale case-afhandeling is voor een probleem in Electron , waarbij de kleurkiezer geen kleur buiten het venster kan kiezen. Met de web-API, die u kunt zien in het gemarkeerde deel van het codefragment, is dit geen probleem. Het gebruik van de API is eenvoudig. Instantieer een nieuwe EyeDropper instantie en roep de open() methode aan. Deze methode wordt opgelost met een sRGBHex tekenreeks die de geselecteerde kleur vertegenwoordigt, in hexadecimaal sRGB-formaat .
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);
}
},
});
Conclusies
Kleurkiezers zijn een klein, maar belangrijk stukje creativiteitssoftware zoals Blockbench. Vaak maakt de gewenste kleur geen deel uit van het app-venster, maar is deze ergens buiten te vinden, misschien zelfs op een ander scherm . Een kleurenkiezer waarmee u in dergelijke gevallen geen kleuren kunt kiezen, kan vrijwel nutteloos zijn. De EyeDropper API is precies voor dit soort gebruikssituaties gemaakt en werkt uitstekend voor Blockbench sinds de implementatie in november 2021. Als je met Blockbench speelt, veel plezier met het kiezen van kleuren!