Blockly 用JSON格式自定义一个块

刘永胜是我
530 阅读3分钟

Blockly 允许用户通过JSON格式来定义自己的块，这种方式比直接使用JavaScript代码更加灵活和方便。下面是详细的描述：

定义块

首先，我们需要定义一个新的块。可以使用如下代码来定义一个简单的块：

{
  "type": "my_block",
  "message0": "My Block",
  "previousStatement": null,
  "nextStatement": null,
  "colour": 230,
  "tooltip": "",
  "helpUrl": ""
}

在上述代码中，我们定义了一个名为 my_block 的块，它有一个简单的文本标签，不允许连接前驱和后继块，并使用了默认的蓝色。其他可选属性如下：

  • message0：块的文本标签。如果需要多个文本标签，可以使用 message1、message2 等属性。
  • args0：数组，跟message0相对应
  • previousStatement：允许连接前驱块的类型。可以设置为 null 或类型名称。
  • nextStatement：允许连接后继块的类型。可以设置为 null 或类型名称。
  • colour：块的颜色。可以设置为整数或十六进制字符串。如果需要使用默认颜色，可以设置为 null。
  • tooltip：鼠标悬停在块上时显示的提示文本。
  • helpUrl：帮助链接。

定义输入

接下来，我们需要定义块的输入。可以使用如下代码来定义一个简单的输入：

{
  "type": "my_block",
  "message0": "My Block %1" + "My Block %2",
  "args0": [
    {
      "type": "input_value",
      "name": "MY_INPUT",
      "check": "Number"
    },
    {
      "type": "input_value",
      "name": "MY_INPUT",
      "check": "Number"
    }
  ],
  "previousStatement": null,
  "nextStatement": null,
  "colour": 230,
  "tooltip": "",
  "helpUrl": ""
}

在上述代码中，我们在 message0 属性中使用了 %1 占位符，表示该块有一个输入框，如果再加一个的话用%2。在 args0 数组中定义了该输入框的类型、名称和检查类型。其他可选属性如下：

  • input_value：值输入框。
  • input_statement：语句输入框。
  • input_dummy：虚拟输入框，就是空的一行，作用不大
  • type：输入框类型。
  • name：输入框名称。
  • check：输入框允许的类型。可以设置为类型名称、类型数组或空字符串。如果是空字符串，则不做检查。

input_dummy 是 Blockly 中的一个虚拟输入框，它通常用于布局目的，而不会在块的功能中发挥作用。

与其他输入框不同，input_dummy 输入框没有名称或值，也不需要关联任何值。它通常用于占位符或视觉分隔符，以使块在 Blockly 编辑器中更易于阅读和理解。

例如，在下面的代码中，我们在 message0 中使用了两个 input_dummy 输入框来布局块：

{
  "type": "my_block",
  "message0": "My Block %1 %2 %3",
  "args0": [
    {
      "type": "input_dummy"
    },
    {
      "type": "input_value",
      "name": "MY_INPUT"
    },
    {
      "type": "input_dummy"
    }
  ],
  "previousStatement": null,
  "nextStatement": null,
  "colour": 230,
  "tooltip": "",
  "helpUrl": ""
}

在上述代码中，我们在 message0 中使用了三个 % 占位符，其中两个占位符是 input_dummy 输入框，用于在块中添加空格。

在 Blockly 中，type 属性定义了块的类型，指定了块应该使用哪个代码生成器以及与之关联的其他属性。除了 type 属性之外，Blockly 还提供了多种其他属性，每种属性都对应不同的块类型和块行为。

下面是 Blockly 中一些常见的块类型：

  • input_value：用于输入值的输入框。
  • input_statement：用于输入语句的输入框。
  • input_dummy：虚拟输入框，通常用于布局目的。
  • field_input：文本输入框，用于输入文本值。
  • field_dropdown：下拉列表，用于选择列表中的一个值。
  • field_checkbox：复选框，用于选择是否选中。
  • field_colour：颜色选择器，用于选择颜色值。
  • field_image：图像字段，用于显示图像。
  • field_variable：变量选择器，用于选择变量。
  • field_angle：角度选择器，用于选择角度值。
avatar
文章
阅读
粉丝