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. Daha önce Minecraft oynadıysanız, büyük olasılıkla Blockbench ile oluşturulmuş öğeler (ör. Mağaralar ve Cliffs Güncellemesi, 1. Bölüm'ün bir parçası olarak Minecraft'a eklenen keçi) görmüşsünüzdür. 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 dosya örneğinden birine başlayabilirsiniz. Örneğin, aşağıdaki ekran görüntüsünde gördüğünüz 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. Gördüğünüz gibi, etiketlemem için parlak turuncu renk kullandım.
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 görebileceğiniz gibi damlalık (uygulama penceresinin solundaki turuncu daire) uygulamanın dışından doğrudan masaüstüme veya açmış olabileceğim başka bir uygulamaya ulaşabiliyor.
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 oynarken renk seçmenin keyfini çıkarın.