【Blockly图形化积木编程二次开发学习笔记】3.自定义模块

乙酸氧铍

于 2024-07-18 13:46:25 发布

阅读量120

点赞数 3

分类专栏： Blockly积木编程文章标签： html javascript Blockly 图形化编程 scratch python

本文链接：https://blog.csdn.net/weixin_44457994/article/details/140512938

版权

Blockly积木编程专栏收录该内容

3 篇文章 0 订阅

订阅专栏

配置自定义块外观

使用 blockly/demos/blockfactory/index.html进行配置：
在这里插入图片描述
导出，得到 my_blocks_b.js、my_blocks_g.js

在工程中加载

        <script src="./my_blocks/my_blocks_b.js"></script>
        <script src="./my_blocks/my_blocks_g.js"></script>

在这里插入图片描述
在工具箱 xml结构中引入

            <category name="My blocks" colour="230">
                <block type="hello_world"></block>
            </category>

在这里插入图片描述
此时即可看到刚刚定义完外观的积木

修改积木对应代码内容

修改 my_blocks_g.js 文件

Blockly.JavaScript['hello_world'] = function(block) {
  // TODO: Assemble JavaScript into code variable.
  var code = '...;\n';
  return code;
};

修改为自己要实现的代码

Blockly.Python['hello_world'] = function(block) {
  // TODO: Assemble Python into code variable.
  var code = 'print("Hello world!")\n';
  return code;
};

在这里插入图片描述

带文字的积木

在这里插入图片描述

带入参的积木

在这里插入图片描述

Blockly.Blocks['my_print'] = {
  init: function() {
    this.appendValueInput("input_str")
        .setCheck(null)
        .appendField("打印");
    this.setPreviousStatement(true, null);
    this.setNextStatement(true, null);
    this.setColour(230);
 this.setTooltip("");
 this.setHelpUrl("");
  }
};

Blockly.Python['my_print'] = function(block) {
  var value_input_str = Blockly.Python.valueToCode(block, 'input_str', Blockly.Python.ORDER_ATOMIC);
  // TODO: Assemble Python into code variable.
  var code = "print("+value_input_str+")\n";
  return code;

            <category name="My blocks" colour="230">
                <block type="hello_world"></block>
                <block type="my_print"></block>
            </category>