EyeDropper API, kullanıcıların tarayıcı penceresinin dışında da dahil olmak üzere ekranlarından renk örneklemelerine olanak tanıyan bir damlalık aracı oluşturma mekanizması sağlar. 3D model düzenleyici Blockbench'in bu API'yi kod tabanında nasıl kullandığını öğrenin.
Giriş
(Bu makaleyi video olarak da inceleyebilirsiniz.)
Blockbench, piksel sanat dokusuna sahip düşük poligonlu modeller için ücretsiz ve modern bir model düzenleyicidir. Minecraft oynadıysanız Blockbench ile oluşturulan öğeleri görmüş olabilirsiniz. Örneğin, Minecraft'a 1. Bölüm: Mağaralar ve Kayalıklar güncellemesi kapsamında eklenen keçi, Blockbench ile oluşturulan öğelerden biridir. GPL sürüm 3 lisanslı Blockbench kodu GitHub'da açık kaynaklıdır.
Blockbench'i denemek için web.blockbench.net adresine giderek uygulamayı başlatın. PWA olarak masaüstünüze yükleyebilir ve bağımsız bir pencerede başlatabilirsiniz. 3D modellemeye yeni başladıysanız GitHub'ın kod arama özelliğini kullanarak bulabileceğiniz birçok açık kaynak .bbmodel dosyası örneğinden birine başlayabilirsiniz. Örneğin, aşağıdaki ekran görüntüsünde görebileceğiniz tren modelini deneyin.
EyeDropper API
Blockbench, diğer birçok özelliğin yanı sıra boyama özelliği de sunar. Böylece, bir treni etiketlemek isterseniz bunu yapabilirsiniz. Lütfen bunu gerçek hayatta yapmayın. Etiketlemem için parlak turuncu bir renk kullandığımı görebilirsiniz.
Bu, EyeDropper API aracılığıyla doğrudan macOS Ventura duvar kağıdından ayıkladığım bir portakaldır. Aşağıdaki ekran görüntüsünde de görebileceğiniz gibi, damlalık (uygulama penceresinin solundaki turuncu daire) uygulamanın dışına çıkarak doğrudan masaüstüme veya açık olan başka bir uygulamaya ulaşabilir.
Blockbench açık kaynak olduğundan geliştiricilerin API'yi nasıl uyguladığını öğrenebilirsiniz. Söz konusu kod JannisX11/blockbench/blob/master/js/texturing/color.js adresindedir. Blockbench, Electron.js uygulaması olarak da kullanılabilir. Yorumda, renk seçicinin pencerenin dışında renk seçemediği Electron'daki bir sorun için özel bir durum yönetimi olduğunu görebilirsiniz. Kod snippet'inin vurgulanmış kısmında görebileceğiniz web API'sinde bu sorun yaşanmaz. API'yi kullanmak kolaydır. Yeni bir EyeDropper örneği oluşturun ve open() yöntemini çağırın. Bu yöntem, seçilen rengi onaltılık sRGB biçiminde temsil eden bir sRGBHex dizesi ile çözünür.
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);
}
},
});
Sonuçlar
Renk seçici, Blockbench gibi yaratıcılık yazılımlarının küçük ama önemli bir parçasıdır. İstenen renk genellikle uygulama penceresinin bir parçası değildir. Bunun yerine, uygulamanın dışında bir yerde, hatta farklı bir ekranda bulunur. Bu gibi durumlarda renk seçmenize izin vermeyen bir renk seçici neredeyse işe yaramaz. EyeDropper API tam olarak bu tür kullanım alanları için oluşturuldu ve Kasım 2021'de uygulandığı günden beri Blockbench için mükemmel bir şekilde çalışıyor. Blockbench ile oynuyorsanız renk seçerken keyifli vakit geçirmenizi dileriz.