画像フィールド

image フィールドには文字列を値として格納し、文字列をテキストに格納します。値は画像の 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 の場合、右から左（RTL）モードのときに、画像が縦軸に反転されます。デフォルトは false です。「左を向く」と「右を向く」のアイコンに便利です。

シリアル化

画像フィールドはシリアル化できません。

クリック ハンドラ

image フィールドはバリデータを受け入れません。その代わりに、フィールドがクリックされたときに呼び出される関数を明示的に受け取ります。つまり、イメージはブロック上に存在するボタンのように機能します。

on-click ハンドラは、JavaScript コンストラクタまたは setOnClickHandler 関数を使用して設定できます。

呼び出されるとブロックを閉じる on-click ハンドラの例を次に示します。

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