A API EyeDropper oferece um mecanismo para criar uma ferramenta de conta-gotas que permite que os usuários extraiam cores das telas, inclusive fora da janela do navegador. Saiba como o editor de modelos 3D Blockbench usa essa API na base de código.
Introdução
Este artigo também está disponível na forma de vídeo.
O Blockbench é um editor de modelos moderno e sem custo financeiro para modelos de baixa poligonalidade com texturas de pixel art. Se você já jogou Minecraft, provavelmente já viu recursos criados com o Blockbench, como a cabra, que foi adicionada ao Minecraft como parte da atualização Caves and Cliffs, Parte 1. O código do Blockbench licenciado GPL versão 3 é de código aberto no GitHub (link em inglês).
Para testar o Blockbench, acesse o app em web.blockbench.net. Como um PWA, ele pode ser instalado no computador e iniciado em uma janela independente. Se você não tem experiência com modelagem 3D, comece com um dos vários exemplos de arquivos .bbmodel de código aberto que podem ser encontrados usando a pesquisa de código do GitHub. Por exemplo, tente o modelo de trem mostrado na captura de tela a seguir.
A API EyeDropper
Entre muitos outros recursos, o Blockbench oferece um recurso de pintura. Se você sempre quis marcar um trem, agora é possível. Não faça isso no mundo real. Para minha marcação, usei uma cor laranja brilhante.
Esta é uma laranja que extraí diretamente do papel de parede do macOS Ventura usando a API EyeDropper. Como você pode ver na captura de tela a seguir, o conta-gotas (o círculo laranja à esquerda da janela do app) pode alcançar fora do aplicativo diretamente na área de trabalho ou em qualquer outro app que eu possa ter aberto.
Como o Blockbench é de código aberto, você pode aprender como os desenvolvedores implementaram a API. O código em questão está em JannisX11/blockbench/blob/master/js/texturing/color.js. O Blockbench também está disponível como um app Electron.js. No comentário, ele tem um tratamento de caso especial para um problema no Electron, em que o seletor de cores não pode escolher cores fora da janela. Com a API da Web, que você pode conferir na parte destacada do snippet de código, isso não é um problema. O uso da API é simples. Crie uma nova instância de EyeDropper e chame o método open() dela. Esse método é resolvido com uma string sRGBHex que representa a cor selecionada, no formato hexadecimal 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);
}
},
});
Conclusões
Os seletores de cores são um software de criatividade pequeno, mas importante, como o Blockbench. Na maioria das vezes, a cor desejada não faz parte da janela do app, mas pode ser encontrada em algum lugar fora dela, talvez até em uma tela diferente. Um seletor de cores que não permite escolher cores nesses casos pode ser quase inútil. A API EyeDropper foi criada exatamente para casos de uso como esse e tem funcionado muito bem para o Blockbench desde que foi implementada em novembro de 2021. Se você usa o Blockbench, divirta-se escolhendo cores!