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