ช่องรูปภาพจะเก็บสตริงเป็นค่า และสตริงเป็นข้อความ ค่าของรูปภาพคือ src ของรูปภาพ ในขณะที่ข้อความเป็นสตริง Alt ที่อธิบาย/นำเสนอรูปภาพ
ช่องรูปภาพ
ช่องรูปภาพในบล็อกที่ยุบอยู่
การสร้างวิดีโอ
JSON
{
"type": "example_image",
"message0": "image: %1",
"args0": [
{
"type": "field_image",
"src": "https://www.gstatic.com/codesite/ph/images/star_on.gif",
"width": 15,
"height": 15,
"alt": "*"
}
]
}
JavaScript
Blockly.Blocks['example_image'] = {
init: function() {
this.appendDummyInput()
.appendField("image:")
.appendField(new Blockly.FieldImage(
"https://www.gstatic.com/codesite/ph/images/star_on.gif",
15,
15,
"*"));
}
};
เครื่องมือสร้างรูปภาพจะดำเนินการต่อไปนี้
พารามิเตอร์ | คำอธิบาย |
---|---|
src |
สตริงที่ชี้ไปยังไฟล์รูปภาพแรสเตอร์ |
width |
ต้องแคสต์ไปยังจำนวนที่ไม่ใช่ 0 |
height |
ต้องแคสต์ไปยังจำนวนที่ไม่ใช่ 0 |
opt_alt |
(ไม่บังคับ) สตริงที่อธิบาย/นำเสนอรูปภาพได้อย่างถูกต้อง หากเป็น null หรือ undefined ระบบจะใช้สตริงว่าง |
opt_onClick |
(ไม่บังคับ) ฟังก์ชันที่จะเรียกใช้เมื่อมีการคลิกฟิลด์ |
opt_flipRtl |
(ไม่บังคับ) บูลีน หากเป็น true รูปภาพจะพลิกผ่านแกนแนวตั้งเมื่ออยู่ในโหมดขวาไปซ้าย ค่าเริ่มต้นคือ false มีประโยชน์สำหรับไอคอน "เลี้ยวซ้าย" และ "เลี้ยวขวา" |
การทำให้เป็นอนุกรม
ช่องรูปภาพทำให้เป็นอนุกรมไม่ได้
เครื่องจัดการคลิก
ช่องรูปภาพไม่ยอมรับเครื่องมือตรวจสอบ แต่จะยอมรับฟังก์ชันที่เรียกเมื่อมีการคลิกช่องอย่างชัดแจ้ง ซึ่งหมายความว่ารูปภาพอาจทำหน้าที่เหมือนปุ่มที่อยู่บนบล็อก
คุณสามารถตั้งค่าเครื่องจัดการการคลิกในเครื่องมือสร้าง JavaScript หรือใช้ฟังก์ชัน setOnClickHandler
นี่คือตัวอย่างของเครื่องจัดการแบบคลิกที่ยุบบล็อกเมื่อมีการเรียกใช้
function() {
this.getSourceBlock().setCollapsed(true);
}