EyeDropper API มีกลไกในการสร้างเครื่องมือดูดสีที่ช่วยให้ผู้ใช้สามารถดูดสีจากหน้าจอ รวมถึงจากนอกหน้าต่างเบราว์เซอร์ ดูวิธีที่เครื่องมือแก้ไขโมเดล 3 มิติ Blockbench ใช้ API นี้ในโค้ดเบส
บทนำ
(บทความนี้มีให้บริการในรูปแบบวิดีโอด้วย)
Blockbench เป็นเครื่องมือแก้ไขโมเดลสมัยใหม่แบบไม่มีค่าใช้จ่ายสำหรับโมเดล Low Poly ที่มีพื้นผิวพิกเซลอาร์ต หากคุณเคยเล่น Minecraft มาแล้ว คุณอาจเคยเห็นเนื้อหาที่สร้างด้วย Blockbench เช่น แพะ ซึ่งเพิ่มลงใน Minecraft เป็นส่วนหนึ่งของเกม Caves and Cliffs Update ตอนที่ 1 โค้ด Blockbench ที่ได้รับอนุญาตภายใต้ GPL เวอร์ชัน 3 เป็นโอเพนซอร์สบน GitHub
หากต้องการลองใช้ Blockbench ให้เปิดแอปโดยไปที่ web.blockbench.net เนื่องจากเป็น PWA คุณจึงติดตั้งลงในเดสก์ท็อปและเปิดได้ในหน้าต่างแบบสแตนด์อโลน หากเพิ่งเริ่มทำโมเดล 3 มิติ คุณอาจเริ่มต้นด้วยตัวอย่างไฟล์ .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 สร้างขึ้นสำหรับ Use Case เช่นนี้โดยเฉพาะ และทํางานได้ดีกับ Blockbench นับตั้งแต่มีการนําไปใช้งานในเดือนพฤศจิกายน 2021 หากเล่น Blockbench ก็เลือกสีได้ตามใจชอบ