توفّر EyeDropper API آلية لإنشاء أداة اختيار ألوان تتيح للمستخدمين أخذ عيّنات من الألوان من شاشاتهم، بما في ذلك خارج نافذة المتصفّح. تعرَّف على كيفية استخدام محرِّر النماذج الثلاثية الأبعاد Blockbench لواجهة برمجة التطبيقات هذه في قاعدة بياناته البرمجية.
مقدمة
(تتوفر هذه المقالة أيضًا في شكل فيديو).
Blockbench هو محرِّر نماذج حديث ومجّاني للنماذج ذات عدد قليل من المضلّعات مع نسيج فنّ البكسل. إذا سبق لك لعب Minecraft، فمن المحتمل أن تكون قد رأيت مواد عرض تم إنشاؤها باستخدام Blockbench، مثل الماعز الذي تمت إضافته إلى Minecraft كجزء من تحديث الكهوف والمنحدرات، الجزء 1. إنّ رمز Blockbench المرخّص بموجب الترخيص العام العام (GPL) الإصدار 3 هو مفتوح المصدر على GitHub.
لتجربة Blockbench، يمكنك تشغيل التطبيق من خلال الانتقال إلى web.blockbench.net. وبما أنّه تطبيق ويب تقدّمي، يمكنك تثبيته على الكمبيوتر المكتبي وتشغيله في نافذة مستقلة. إذا كنت مبتدئًا في مجال التصميم الثلاثي الأبعاد، يمكنك البدء باستخدام أحد أمثلة ملفات .bbmodel المتعددة المفتوحة المصدر التي يمكنك العثور عليها باستخدام ميزة البحث عن الرموز البرمجية في GitHub. على سبيل المثال، جرِّب نموذج القطار الذي يظهر في لقطة الشاشة التالية.
واجهة برمجة التطبيقات EyeDropper API
من بين العديد من الميزات الأخرى، يوفّر Blockbench ميزة الطلاء، لذا إذا أردت الإشارة إلى قطار، يمكنك الآن فعل ذلك. يُرجى عدم فعل ذلك في الواقع. يمكنك ملاحظة أنّني استخدمت اللون البرتقالي المشرق عند الإشارة إلى المستخدمين.
هذا هو في الواقع برتقال استخرجته مباشرةً من خلفية macOS Ventura من خلال EyeDropper API. كما هو موضّح في لقطة الشاشة التالية، يمكن أن يصل قطارة العين (الدائرة البرتقالية على يمين نافذة التطبيق) خارج التطبيق مباشرةً إلى سطح المكتب أو أي تطبيق آخر قد يكون مفتوحًا.
بما أنّ Blockbench مفتوح المصدر، يمكنك التعرّف على كيفية تنفيذ المطوّرين لواجهة برمجة التطبيقات. الرمز المعنيّ متوفر في JannisX11/blockbench/blob/master/js/texturing/color.js. يتوفّر تطبيق Blockbench أيضًا كتطبيق Electron.js. ويمكنك الاطّلاع من خلال التعليق على أنّه يتضمّن معالجة خاصة للحالات الخاصة بمشكلة في Electron، حيث لا يمكن لأداة اختيار الألوان اختيار لون خارج النافذة. لا يشكّل ذلك مشكلة باستخدام واجهة برمجة التطبيقات للويب، والتي يمكنك الاطّلاع عليها في الجزء المميّز من مقتطف الرمز. إنّ استخدام واجهة برمجة التطبيقات أمر بسيط. أنشئ مثيلًا جديدًا من EyeDropper واستدِع طريقة open(). يتم حلّ هذه الطريقة باستخدام سلسلة sRGBHex التي تمثّل اللون المحدّد بتنسيق سداسي عشري 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);
}
},
});
الاستنتاجات
أدوات اختيار الألوان هي جزء صغير ولكن مهم من برامج الإبداع، مثل Blockbench. في أغلب الأحيان، لا يكون اللون المطلوب جزءًا من نافذة التطبيق، ولكن يمكن العثور عليه في مكان آخر، ربما على شاشة مختلفة. إنّ علبة ألوان لا تسمح لك باختيار الألوان في مثل هذه الحالات قد تكون غير مفيدة. تم إنشاء EyeDropper API تحديدًا لحالات الاستخدام كهذه، وحقّقت نجاحًا كبيرًا في لعبة Blockbench منذ تنفيذها في تشرين الثاني (نوفمبر) 2021. إذا كنت تلعب باستخدام Blockbench، نتمنى لك اختيار ألوان ممتعة.