EyeDropper API, kullanıcıların tarayıcı penceresinin dışı da dahil olmak üzere ekranlarından renk örneklemesine olanak tanıyan bir damlalık aracı oluşturmak için bir mekanizma sağlar. 3D model düzenleyici Blockbench'in bu API'yi kod tabanında nasıl kullandığını öğrenin.
Giriş
(Bu makale video biçiminde de mevcuttur.)
Blockbench, piksel sanatı dokularına sahip düşük çoklu modeller için ücretsiz ve modern bir model düzenleyicidir. Daha önce Minecraft oynadıysanız, Blockbench ile oluşturulmuş öğeleri (örneğin, Mağaralar ve Uçurumlar Güncellemesi 1. Bölüm'ün parçası olarak Minecraft'e eklenen keçi) görmüşsünüzdür. GPL sürüm 3 lisanslı Blockbench kodu GitHub'da açık kaynaktır.
Blockbench'i denemek için web.blockbench.net adresine giderek uygulamayı başlatın. PWA olarak masaüstünüze yükleyip bağımsız bir pencerede başlatabilirsiniz. 3D modellemede yeniyseniz GitHub'ın kod araması özelliğini kullanarak bulabileceğiniz çok sayıda açık kaynak .bbmodel dosyası örneğinden biriyle başlayabilirsiniz. Örneğin, aşağıdaki ekran görüntüsünde gördüğünüz tren modelini deneyin.
EyeDropper API
Blockbench, birçok diğer özelliğin yanı sıra boya özelliği de sunuyor. Böylece, daha önce bir treni etiketlemek istediğinizde artık bunu yapabilirsiniz. Lütfen gerçek dünyada bunu yapmayın. Gördüğünüz gibi, etiketleme için parlak turuncu kullandım.
Bu, EyeDropper API'yi kullanarak doğrudan macOS Ventura duvar kağıdından çıkardığım bir portakal. 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çabileceğim başka bir uygulamaya uzanabilir.
Blockbench açık kaynak olduğundan, geliştiricilerin API'yi nasıl uyguladıklarını öğrenebilirsiniz. Söz konusu kod JannisX11/blockbench/blob/master/js/texturing/color.js içinde. Blockbench, Electron.js uygulaması olarak da kullanılabilir. Yorumdan da görebileceğiniz gibi, renk seçici Electron'da renk seçicinin pencerenin dışında renk seçemediği bir sorun için özel vaka işleme süreci içeriyor. Kod snippet'inin vurgulanan bölümünde görebileceğiniz web API'de bu bir sorun değildir. API'yi kullanmak kolaydır. Yeni bir EyeDropper örneğini örnekleyin ve open() yöntemini çağırın. Bu yöntem, seçilen rengi temsil eden onaltılı sRGB biçiminde bir sRGBHex dizesiyle çözümlenir.
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çiciler, 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ı olmayıp dışında bir yerde, hatta farklı bir ekranda bulunabilir. Bu gibi durumlarda renk seçmenize izin vermeyen bir renk seçici işe yaramayabilir. EyeDropper API tam da bunun gibi kullanım alanları için tasarlandı ve Kasım 2021'de uygulandığından beri Blockbench için çok iyi performans gösteriyor. Blockbench ile oynarsanız, renklerinizi seçebilirsiniz.