چگونه ویرایشگر مدل سه بعدی Blockbench از EyeDropper API استفاده می کند تا به کاربران اجازه دهد رنگ ها را از همه جا انتخاب کنند

EyeDropper API مکانیزمی را برای ایجاد یک ابزار قطره چکان فراهم می کند که به کاربران امکان می دهد رنگ ها را از صفحه نمایش خود، از جمله خارج از پنجره مرورگر، نمونه برداری کنند. بیاموزید که چگونه ویرایشگر مدل سه بعدی Blockbench از این API در پایگاه کد خود استفاده می کند.

Thomas Steiner

Jannis Petersen

مقدمه

(این مقاله به صورت ویدئویی نیز موجود است.)

Blockbench یک ویرایشگر مدل رایگان و مدرن برای مدل‌های کم پلی با بافت‌های هنری پیکسلی است. اگر تا به حال Minecraft بازی کرده‌اید، به احتمال زیاد دارایی‌هایی را دیده‌اید که با Blockbench ایجاد شده‌اند، برای مثال بز که به عنوان بخشی از به‌روزرسانی Caves and Cliffs، قسمت 1 به Minecraft اضافه شده است. کد 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 ، که در آن انتخاب‌گر رنگ نمی‌تواند رنگ را خارج از پنجره انتخاب کند، مورد خاصی دارد. با وب 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 است. اغلب اوقات، رنگ مورد نظر بخشی از پنجره برنامه نیست، اما در جایی بیرون، شاید حتی در صفحه دیگری پیدا می شود. انتخابگر رنگی که در چنین مواردی به شما اجازه نمی دهد رنگ ها را انتخاب کنید، تقریباً بی فایده است. API EyeDropper دقیقاً برای موارد استفاده از این دست ایجاد شده است و از زمانی که در نوامبر 2021 اجرا شد برای Blockbench عالی کار می کند. اگر با Blockbench بازی می کنید، انتخاب رنگ مبارک!