画像フィールド

画像フィールドは、値を文字列として、テキストを文字列として保存します。値は画像の 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);
}