EyeDropper API מספק מנגנון ליצירת כלי טפטפת שמאפשר למשתמשים לדגום צבעים מהמסכים שלהם, כולל מחוץ לחלון הדפדפן. איך נערך המודל התלת-ממדי Blockbench משתמש ב-API הזה בקוד הבסיסי שלו.
מבוא
(המאמר הזה זמין גם כסרטון).
Blockbench הוא עורך מודלים מודרני בחינם למודלים עם פוליגוניים מעטים ומרקמים של אומנות פיקסלים. אם שיחקתם פעם ב-Minecraft, סביר להניח שראית נכסים דיגיטליים שנוצרו באמצעות Blockbench, למשל העז שנוספה ל-Minecraft כחלק מעדכון המערות והצוקים, חלק 1. הקוד של Blockbench ברישיון GPL גרסה 3 הוא קוד פתוח ב-GitHub.
כדי לנסות את Blockbench, פותחים את האפליקציה בכתובת web.blockbench.net. כ-PWA, אפשר להתקין אותה במחשב ולהפעיל אותה בחלון נפרד. אם אתם רק מתחילים ליצור מודלים תלת-ממדיים, תוכלו להתחיל עם אחת מהדוגמאות הרבות לקובצי .bbmodel בקוד פתוח שאפשר למצוא באמצעות חיפוש הקוד ב-GitHub. לדוגמה, נסו את המודל 'רכבת' שמוצג בצילום המסך הבא.
EyeDropper API
בין היתר, Blockbench מציע תכונה של צביעה, כך שאם תמיד רציתם לתייג רכבת, עכשיו תוכלו. אין לעשות זאת בעולם האמיתי. אפשר לראות שבתיוג שלי השתמשתי בכתום בהיר.
זהו למעשה תפוז שחולצתי ישירות מהטפט של macOS Ventura באמצעות EyeDropper API. כמו שאפשר לראות בצילום המסך הבא, הטפטפת (העיגול הכתום שבצד שמאל של חלון האפליקציה) יכול להגיע ישירות לאפליקציה ישירות משולחן העבודה שלי, או לכל אפליקציה אחרת שפתחתי.
Blockbench הוא קוד פתוח, כך שתוכלו ללמוד איך המפתחים הטמיעו את ה-API. הקוד המדובר נמצא ב-JannisX11/blockbench/blob/master/js/texturing/color.js. Blockbench זמין גם בתור אפליקציית Electron.js. כפי שאפשר לראות מהתגובה, יש לו טיפול מיוחד במקרה של בעיה ב-Electron, שבה בורר הצבעים לא יכול לבחור צבע מחוץ לחלון. ב-Web API, שמוצג בחלק המודגש של קטע הקוד, אין בעיה כזו. השימוש ב-API פשוט. יוצרים מופע חדש של 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, תהנו מהבחירת הצבעים!