圖片欄位會將字串儲存為值,並將字串儲存為文字。這個值是圖片的 src,但其文字是說明/呈現圖片的替代字串。
圖片欄位
收合區塊中的圖片欄位
創作風潮
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 |
必須轉換為非零的數字。 |
height |
必須轉換為非零的數字。 |
opt_alt |
(選用) 能準確描述/呈現圖片的字串。如果值為 null 或 undefined ,系統就會使用空字串。 |
opt_onClick |
(選用) 點選欄位時要呼叫的函式。 |
opt_flipRtl |
(選用) 為布林值。如果是 true ,圖片會在從右到左模式中翻轉。預設值為 false 。適用於「向左轉」和「右轉」圖示。 |
序列化
圖片欄位無法序列化。
點擊處理常式
圖片欄位不接受驗證工具,而是明確接受每次使用者點擊欄位時呼叫的函式。這表示圖片可以類似區塊上的按鈕。
點擊處理常式可在 JavaScript 建構函式或 setOnClickHandler 函式中設定。
以下是點擊處理常式的範例,在呼叫時收合區塊。
function() {
this.getSourceBlock().setCollapsed(true);
}