แบบสำรวจการวิจัย: บอกให้เราทราบเกี่ยวกับประสบการณ์การใช้งาน Blockly
เริ่มแบบสำรวจ
ช่องรูปภาพ
จัดทุกอย่างให้เป็นระเบียบอยู่เสมอด้วยคอลเล็กชัน
บันทึกและจัดหมวดหมู่เนื้อหาตามค่ากำหนดของคุณ
ช่องรูปภาพจะจัดเก็บสตริงเป็นค่าและสตริงเป็นข้อความ ค่าขององค์ประกอบนี้คือ 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);
}
เนื้อหาของหน้าเว็บนี้ได้รับอนุญาตภายใต้ใบอนุญาตที่ต้องระบุที่มาของครีเอทีฟคอมมอนส์ 4.0 และตัวอย่างโค้ดได้รับอนุญาตภายใต้ใบอนุญาต Apache 2.0 เว้นแต่จะระบุไว้เป็นอย่างอื่น โปรดดูรายละเอียดที่นโยบายเว็บไซต์ Google Developers Java เป็นเครื่องหมายการค้าจดทะเบียนของ Oracle และ/หรือบริษัทในเครือ
อัปเดตล่าสุด 2025-07-26 UTC
[null,null,["อัปเดตล่าสุด 2025-07-26 UTC"],[[["\u003cp\u003eImage fields in Blockly store image source (src) as their value and alternative text (alt) for accessibility.\u003c/p\u003e\n"],["\u003cp\u003eThey are created using the \u003ccode\u003eBlockly.FieldImage\u003c/code\u003e constructor in JavaScript, requiring src, width, and height parameters.\u003c/p\u003e\n"],["\u003cp\u003eImage fields are not serializable and cannot be stored directly in block data.\u003c/p\u003e\n"],["\u003cp\u003eThey can function as buttons using an optional onClick handler to trigger actions like collapsing the block.\u003c/p\u003e\n"]]],["An image field's value is the image's `src` URL, and its text is the `alt` string. Key actions include: specifying the `src`, `width`, `height`, and optional `alt` and `onClick` parameters during creation. The `onClick` function enables images to act as buttons. The `opt_flipRtl` parameter is used to mirror the image. The field is constructed through JSON or JavaScript. Image fields are not serializable. The `setOnClickHandler` function can also be used to set the `onClick` function.\n"],null,["# Image fields\n\nAn image field stores a string as its value, and a string as its text. Its\nvalue is the src of the image, while its text is an alt string\ndescribing/representing the image.\n\n#### Image field\n\n#### Image field on collapsed block\n\nCreation\n--------\n\n### JSON\n\n {\n \"type\": \"example_image\",\n \"message0\": \"image: %1\",\n \"args0\": [\n {\n \"type\": \"field_image\",\n \"src\": \"https://www.gstatic.com/codesite/ph/images/star_on.gif\",\n \"width\": 15,\n \"height\": 15,\n \"alt\": \"*\"\n }\n ]\n }\n\n### JavaScript\n\n Blockly.Blocks['example_image'] = {\n init: function() {\n this.appendDummyInput()\n .appendField(\"image:\")\n .appendField(new Blockly.FieldImage(\n \"https://www.gstatic.com/codesite/ph/images/star_on.gif\",\n 15,\n 15,\n \"*\"));\n }\n };\n\nThe image constructor takes in:\n\n| Parameter | Description |\n|---------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `src` | A string that points to a [raster image](https://developer.mozilla.org/en-US/docs/Glossary/raster_image) file. |\n| `width` | Must cast to a non-zero number. |\n| `height` | Must cast to a non-zero number. |\n| `opt_alt` | (Optional) A string that accurately describes/represents the image. This is used instead of the image when the block is collapsed. If it is `null` or `undefined` an empty string will be used. |\n| `opt_onClick` | (Optional) A function to call when the field is clicked. |\n| `opt_flipRtl` | (Optional) A boolean. If `true`, the image is flipped across the vertical axis when in right-to-left mode. Defaults to `false`. Useful for \"turn left\" and \"turn right\" icons. |\n\nSerialization\n-------------\n\nImage fields are not serializable.\n\nClick handler\n-------------\n\n| **Note:** For information on validators in general see [Validators](/blockly/guides/create-custom-blocks/fields/validators).\n\nThe image field does not accept a validator; instead it explicitly accepts a\nfunction that is called whenever the field is clicked. This means that images\ncan act like buttons that exist on blocks.\n\n*The on click handler can be set in the [JavaScript Constructor](#creation) or\nusing the\n[setOnClickHandler](/blockly/reference/js/blockly.fieldimage_class.setonclickhandler_1_method)\nfunction.*\n\nHere is an example of an on click handler that collapses the block when\ncalled. \n\n function() {\n this.getSourceBlock().setCollapsed(true);\n }"]]
