图片字段

图片字段将字符串存储为值,并将字符串存储为文本。其值是图片的 src,而其文本是描述/表示图片的 alt 字符串。

图片字段

一个带有“image:”标签的块,其中包含一张黄色星形图片。

折叠块中的图片字段

折叠后的同一代码块。它带有“variable: *”标签,其中“*”是图片的替代文本,并且右边缘呈锯齿状,表示它处于收起状态。

创建

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 (可选)准确描述/表示图片的字符串。当块处于收起状态时,系统会使用此图片来代替图片。如果值为 nullundefined,则使用空字符串。
opt_onClick (可选)在点击字段时调用的函数。
opt_flipRtl (可选)一个布尔值。如果值为 true,则在从右向左模式下,图片会沿垂直轴翻转。默认值为 false。适用于“左转”和“右转”图标。

序列化

图片字段不可序列化。

点击处理程序

图片字段不接受验证器;相反,它明确接受一个在每次点击该字段时调用的函数。这意味着,图片可以像块上的按钮一样发挥作用。

可以在 JavaScript 构造函数中或使用 setOnClickHandler 函数设置点击事件处理程序。

以下示例展示了一个在调用时会折叠块的点击处理程序。

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

一个动画 GIF,显示了以下操作:点击图片、块收起、右键点击以显示上下文菜单、选择“展开块”,以及块展开。