ช่องรูปภาพ

ฟิลด์รูปภาพจะจัดเก็บสตริงเป็นค่าและสตริงเป็นข้อความ ค่าของแอตทริบิวต์นี้คือ 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 Constructor หรือ ใช้ฟังก์ชัน setOnClickHandler

ต่อไปนี้คือตัวอย่างของตัวแฮนเดิลการคลิกที่ยุบบล็อกเมื่อมีการเรียกใช้

function() {
    this.getSourceBlock().setCollapsed(true);
}