画像フィールドには、値として文字列が格納され、テキストとして文字列が格納されます。値は画像の 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 |
ゼロ以外の数値にキャストする必要があります。 |
height |
ゼロ以外の数値にキャストする必要があります。 |
opt_alt |
(省略可)画像を正確に説明または表す文字列。ブロックが折りたたまれたときに、画像の代わりに使用されます。null または undefined の場合は、空の文字列が使用されます。 |
opt_onClick |
(省略可)フィールドがクリックされたときに呼び出す関数。 |
opt_flipRtl |
(省略可)ブール値。 true の場合、右から左へのモードでは、画像が垂直軸を基準に反転します。デフォルトは false です。 [左折] アイコンや [右折] アイコンに便利です。 |
シリアル化
画像フィールドはシリアル化できません。
クリック ハンドラ
画像フィールドはバリデータを許容しません。代わりに、フィールドがクリックされるたびに呼び出される関数を明示的に許容します。つまり、画像はブロック上に存在するボタンのように動作します。
クリック ハンドラは、JavaScript コンストラクタで設定するか、
setOnClickHandler
関数を使用して設定できます。
以下に、呼び出されたときにブロックを折りたたむクリック ハンドラの例を示します。
function() {
this.getSourceBlock().setCollapsed(true);
}
![画像がクリックされ、ブロックが折りたたまれ、右クリックでコンテキスト メニューが表示され、[ブロックを展開] が選択され、ブロックが展開される様子を示す GIF アニメーション。](https://developers.google.com/static/blockly/images/fields/image/click_handler.gif?hl=ja)