บล็อกสี

แอป Blockly ส่วนใหญ่ใช้สีบล็อกที่หลากหลายเพื่อจัดกลุ่มบล็อกต่างๆ ให้เป็นหมวดหมู่ บล็อกที่มาพร้อมกับ Blockly ประกอบด้วยหมวดหมู่ต่างๆ มากมาย พร้อมด้วยสีที่แสดงให้เห็นตามหมวดหมู่แถบเครื่องมือต่างๆ ในการสาธิต ได้แก่

สีอื่นๆ ในบล็อกได้มาจากสีหลัก เช่น บล็อกเงาคือสีหลักเวอร์ชันสีหลักอิ่มตัว และสีเส้นขอบจะมีสีเข้มกว่า

เคล็ดลับ: หากต้องการควบคุมสีของบล็อกเงาหรือเส้นขอบได้มากขึ้น โปรดดูข้อมูลเกี่ยวกับการกำหนดธีม

ตั้งค่าสีบล็อก

คุณกำหนดสีบล็อกได้ในสัญกรณ์ JSON หรือ JavaScript ดังนี้

JSON

{
  // ...,
  "colour": 160,
}

JavaScript

init: function() {
  // ...
  this.setColour(160);
}

โปรดสังเกตการสะกดคำแบบอังกฤษ ตั้งค่าผลลัพธ์สีให้เป็นบล็อกสีดำไม่สำเร็จ

รูปแบบสี

ค่า colour สามารถระบุได้ในรูปแบบ HSV หรือ Hex

ค่าความอิ่มตัวของโทนสี

วิธีที่ง่ายที่สุดในการกำหนดสีของบล็อกคือตัวเลขระหว่าง 0-360 ซึ่งเป็นการกำหนดโทนสีของบล็อกในรูปแบบสีค่าความอิ่มตัวของสี (HSV)

การใช้ HSV ที่ความอิ่มตัวและค่าคงที่สำหรับสีบล็อกทุกสีจะช่วยให้คุณเลือกสีบล็อก ในขณะเดียวกันก็ดูแลให้บล็อกทั้งหมดใช้พาเล็ตสีสอดคล้องกัน

ความอิ่มตัวและค่าสามารถปรับสำหรับแต่ละแอปพลิเคชันได้โดยเรียกใช้ฟังก์ชันต่อไปนี้

Blockly.utils.colour.setHsvSaturation(0.45) // 0 (inclusive) to 1 (exclusive), defaulting to 0.45
Blockly.utils.colour.setHsvValue(0.65) // 0 (inclusive) to 1 (exclusive), defaulting to 0.65

ตัวเลือกสีหลายๆ ตัวเลือกมีพื้นที่สี HSV เช่น เครื่องมือเลือกสี HSV ป้อนความอิ่มตัวและค่าคงที่ของ Blockly (ค่าเริ่มต้นคือ 45% และ 65% ตามลำดับ) จากนั้นเลื่อนโทนสีไปยังสีที่เลือก ใช้หมายเลขโทนสีนี้เป็นค่า colour

เลขฐานสิบหก

ขอแนะนำอย่างยิ่งให้ใช้พื้นที่สี HSV แต่ Blockly รองรับสีบล็อกที่ระบุเป็นเลขฐานสิบหก #RRGGBB แม้ว่าวิธีนี้จะช่วยให้ประสานงานกับสีอื่นๆ ของแอปพลิเคชัน (เช่น สไตล์ใน CSS) และแอปพลิเคชันออกแบบ (เช่น Photoshop) มีความเสี่ยงในการออกแบบที่อาจนำไปสู่ บล็อกไม่ประสานกันหากไม่ได้รับเลือกอย่างระมัดระวัง

หากคุณไม่ได้มีทรัพยากรด้านการออกแบบภาพโดยเฉพาะ ขอแนะนำให้ทำงานภายในข้อจำกัดของพื้นที่สี HSV หากพยายามที่จะกำหนดสีทั้งหมดในลักษณะนี้ โปรดพิจารณาแหล่งข้อมูลเกี่ยวกับดีไซน์ Material ของ Google เกี่ยวกับสี

การอ้างอิงสี

บ่อยครั้งที่บล็อกหลายบล็อกมีสีเดียวกัน และการรวมการกำหนดสีไว้ในที่เดียวจะช่วยลดความซับซ้อนของการจัดการสีและการเพิ่มบล็อกสีที่ถูกต้องใหม่ สีบล็อกสามารถใช้การอ้างอิงตารางสตริงเพื่อดำเนินการดังกล่าว

บล็อกรวมค่าคงที่สี 9 ค่าในตารางสตริงที่สอดคล้องกับหมวดหมู่กล่องเครื่องมือ รวมถึงสีที่โดดเด่นสำหรับตัวแปรแบบไดนามิก ดังนี้

'%{BKY_LOGIC_HUE}'
'%{BKY_LOOPS_HUE}'
'%{BKY_MATH_HUE}'
'%{BKY_TEXTS_HUE}'
'%{BKY_LISTS_HUE}'
'%{BKY_COLOUR_HUE}'
'%{BKY_VARIABLES_HUE}'
'%{BKY_VARIABLES_DYNAMIC_HUE}'
'%{BKY_PROCEDURES_HUE}'

ค่าสตริงเหล่านี้ใช้ได้ทั้งในคำจำกัดความของ JSON และ block.setColour(..)

คุณเพิ่มค่าคงที่สีของตัวเองได้ด้วยการเพิ่มลงใน Blockly.Msg

// Define the colour
Blockly.Msg.EVERYTHING_HUE = 42;
// Use in a block or block definition:
block.setColour('%{BKY_EVERYTHING_HUE}');

การจัดเก็บสีในตารางสตริงการแปลอาจดูผิดปกติ แต่ก็สะดวกเนื่องจากสัญกรณ์ JSON มีการสนับสนุนสำหรับการอ้างอิงอยู่แล้ว นอกจากนี้ยังอนุญาตให้แปลสีได้ด้วย หากจำเป็น

ข้อกังวลเกี่ยวกับการช่วยเหลือพิเศษ

Blockly ใช้สีเพื่อบอกใบ้บทบาทของบล็อกแต่ละรายการ และจัดกลุ่ม บล็อกเข้าด้วยกัน สำหรับบล็อกที่รวมไว้ ราคานี้รองจากข้อความบนบล็อก ไม่ใช่แอตทริบิวต์ที่สำคัญ อย่างไรก็ตาม เวลาเลือกชุดสีบล็อก ก็ควรคำนึงถึงเรื่องตาบอดสีด้วย

Blockly มีธีมต่างๆ มากมายเพื่อช่วยรองรับภาวะบกพร่องทางการมองเห็นสีบางประเภท หน้านี้มีตัวอย่างจานสี 7, 12 และ 15 สีที่พยายามเพิ่มความแตกต่างให้ได้มากที่สุดในตาบอดสีที่พบบ่อยที่สุด โปรดทราบว่าวิธีนี้จะไม่จับคู่กับหมวดหมู่บล็อกที่ 7, 12 หรือ 15 ใน Blockly เนื่องจากควรสงวนเฉดสีบางส่วนไว้กับบล็อกเงาและช่องต่างๆ