探索 Blockly：自定义积木实例

于 2024-07-27 09:52:15 发布
阅读量301 收藏 8
点赞数 13
分类专栏： blockly 文章标签： javascript blockly 可视化编程 程序积木
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yuanchun05/article/details/140730582
版权

3.实例

3.1.基础块

无输入 , 无输出

3.1.1.json

在这里插入图片描述

var textOneJson = {
    "type": "sql_test_text_one",
    "message0": " one ",
    "colour": 30,
    "tooltip":' 无输入 , 无输出'
};

javascriptGenerator.forBlock['sql_test_text_one'] = function(block) {
    return  ' one ';
};

Blockly.Blocks['sql_test_text_one'] = {
    init: function() {
        this.jsonInit(textOneJson);
    }
};

3.1.2.js

.appendField(new Blockly.FieldLabelSerializable("显示内容"), "TEXT_NAME");

在这里插入图片描述

Blockly.Blocks['js_base_one'] = {
    init: function () {
        this.appendDummyInput()
            .appendField(new Blockly.FieldLabelSerializable("无入, 无出"), "TEXT_NAME");
        this.setColour(145);
        this.setTooltip("无入, 无出");
    }
}
javascriptGenerator.forBlock['js_base_one'] = function(block) {
    return  ' one ' ;
};

3.2.输出类型 output

3.2.1.json

“output”: 指定类型 如: String | Number | …

注意生成代码函数的设置

在这里插入图片描述

var textBaseOneJson = {
    "type": "sql_test_base_one",
    "message0": " one ",
    "output": "String",
    "colour": 30,
    "tooltip":' 返回 字符串 '
};

javascriptGenerator.forBlock['sql_test_base_one'] = function(block) {
    return    [ ' base one ' ,  javascriptGenerator.ORDER_ATOMIC];
};

Blockly.Blocks['sql_test_base_one'] = {
    init: function() {
        this.jsonInit(textBaseOneJson);
    }
};

3.2.2.js

this.setOutput(true, "String");

在这里插入图片描述

Blockly.Blocks['js_base_two'] = {
    init: function () {
        this.appendDummyInput()
            .appendField(new Blockly.FieldLabelSerializable("无入, 有出"), "TEXT_NAME");
        this.setColour(145);
        this.setTooltip("无入, 有出");
        this.setOutput(true, "String");
    }
}
javascriptGenerator.forBlock['js_base_two'] = function(block) {
    return  [ ' base two ' ,  javascriptGenerator.ORDER_ATOMIC];
};

3.3.上下连接

3.3.1.json

previousStatement / nextStatement

在这里插入图片描述

var textFiveJson = {
    "type": "sql_test_text_five",
    "message0": " five ",
    "colour": 30,
    "previousStatement": null,
    "nextStatement": null,
};

javascriptGenerator.forBlock['sql_test_text_five'] = function(block) {
    return  ' five ' ;
};

Blockly.Blocks['sql_test_text_five'] = {
    init: function() {
        this.jsonInit(textFiveJson);
        let thisBlock = this;
    }
};

3.3.2.js

在这里插入图片描述

Blockly.Blocks['js_base_three'] = {
    init: function () {
        this.appendDummyInput()
            .appendField(new Blockly.FieldLabelSerializable("上下连接"));
        this.setColour(145);
        this.setTooltip("上下连接");
        // this.setOutput(true, "String");
        // 下连
        this.setNextStatement(true);
        // this.setNextStatement(true, 'Action');

        // 上连
        this.setPreviousStatement(true);
        // this.setPreviousStatement(true, 'Action');
    }
}
javascriptGenerator.forBlock['js_base_three'] = function(block) {
    return   ' base three ' ;
};

3.4.输入 input

在 args# 数组内定义

  • name (string): 输入的名称，用于识别输入。

  • type (string): 输入类型，如 'input_value'、'input_statement'。

  • check (string): 限制此输入可以接受的值或语句类型。

  • align (string): 输入的对齐方式，如 'LEFT' 或 'RIGHT'。

3.4.1.input_value

接受一个值输入的槽

3.4.1.1.json

在这里插入图片描述

var textTwoJson = {
    "type": "sql_test_text_two",
    "message0": " two %1 ",
    "args0": [
        {
            "type": "input_value",
            "name": "NAME",
            "check": "String",
        }
    ],
    "colour": 30,
    "tooltip":' 有输入 , 无输出'
};

javascriptGenerator.forBlock['sql_test_text_two'] = function(block) {
    var value_name = javascriptGenerator.valueToCode(block, 'NAME', javascriptGenerator.ORDER_ATOMIC);
    return  ' two ' + value_name ;
};

Blockly.Blocks['sql_test_text_two'] = {
    init: function() {
        this.jsonInit(textTwoJson);
    }
};
3.4.1.2.inputsInline

"inputsInline": true, 输入块 为 内置块

在这里插入图片描述

var textInputFiveJson = {
    "type": "sql_test_input_five",
    "message0": " input five %1",
    "args0": [
        {
            "type": "input_value",
            "name": "NUMBER",
            "align": "RIGHT",
            "check": "Number"
        }
    ],
    "inputsInline": true,  // 输入应该与块主体保持在同一行，而不是下一行
    "colour": 230,
    "tooltip":' 内置 有输入'
};

javascriptGenerator.forBlock['sql_test_input_five'] = function(block) {
    // 获取输入值
    var numberInput = javascriptGenerator.valueToCode(block, 'NUMBER', javascriptGenerator.ORDER_ATOMIC);
    return  ' two ' + numberInput ;
};

Blockly.Blocks['sql_test_input_five'] = {
    init: function() {
        this.jsonInit(textInputFiveJson);
        let thisBlock = this;
    }
};
3.4.1.3.js

在这里插入图片描述

Blockly.Blocks['js_base_four'] = {
    init: function () {
        this.appendValueInput('VALUE')
            .setCheck('Number')  // 检测数据类型
            .appendField(new Blockly.FieldLabelSerializable("计算值为:"));
        this.setColour(145);
        this.setTooltip("有入, 无出");
		// this.setInputsInline(true);
    }
}
javascriptGenerator.forBlock['js_base_four'] = function(block) {
    var value_input = javascriptGenerator.valueToCode(block, 'VALUE', javascriptGenerator.ORDER_ATOMIC);
    return value_input;
};

3.4.2.input_statement

接受另一个块作为输入的槽。

3.4.2.1. 案例 1

var doCode = javascriptGenerator.statementToCode(block, 'DO');

在这里插入图片描述

  var textBaseFourJson = {
        "type": "sql_test_base_four",
        "message0": "( ) %1 ",
        "args0": [
          {
            "type": "input_statement",
            "name": "DO"
          }
        ],
        "colour": 120,
        "tooltip": "包裹 其它块 "
      };

      javascriptGenerator.forBlock['sql_test_base_four'] = function(block) {

        // 获取"DO"部分的代码
        var doCode = javascriptGenerator.statementToCode(block, 'DO');

        // 生成循环结构的代码
        var loopCode = ' ( ' +
            doCode.replace(/\n/g, '\n  ') + // 缩进内联代码
            '\n ) ';

        return loopCode;
      };

      Blockly.Blocks['sql_test_base_four'] = {
        init: function() {
          this.jsonInit(textBaseFourJson);
        }
      };
3.4.2.2. 案例 2

在这里插入图片描述

var textInputFourJson = {
    "type": "sql_test_input_four",
    "message0": "input four 重复 %1 次：\n%2",
    "args0": [
        {
            "type": "input_value",
            "name": "TIMES",
            "check": "Number"
        },
        {
            "type": "input_statement",
            "name": "DO"
        }
    ],
    "previousStatement": null,
    "nextStatement": null,
    "colour": 120,
    "tooltip": "重复执行指定次数的代码块。"
};

javascriptGenerator.forBlock['sql_test_input_four'] = function(block) {
    // 获取重复次数
    var times = javascriptGenerator.valueToCode(block, 'TIMES', javascriptGenerator.ORDER_ATOMIC);
    // 获取"DO"部分的代码
    var doCode = javascriptGenerator.statementToCode(block, 'DO');

    // 生成循环结构的代码
    var loopCode = 'for (var i = 0; i < ' + times + '; i++) {\n' +
        doCode.replace(/\n/g, '\n  ') + // 缩进内联代码
        '\n}';

    return loopCode;
};

Blockly.Blocks['sql_test_input_four'] = {
    init: function() {
        this.jsonInit(textInputFourJson);
    }
};
3.4.2.3.js

在这里插入图片描述

Blockly.Blocks['js_base_six'] = {
    init: function () {
        this.appendStatementInput('DO')
            .appendField(new Blockly.FieldLabelSerializable("包括:"));
        this.setColour(145);
    }
}
javascriptGenerator.forBlock['js_base_six'] = function(block) {
    var value_input = javascriptGenerator.statementToCode(block, 'DO' );
    return value_input;
};
3.4.2.4.三句

在这里插入图片描述

Blockly.Blocks['js_base_seven'] = {
    init: function () {
        this.appendDummyInput()
            .appendField(new Blockly.FieldLabelSerializable(" ( "));

        this.appendStatementInput('DO')
            .appendField(new Blockly.FieldLabelSerializable(""));


        this.appendDummyInput()
            .appendField(new Blockly.FieldLabelSerializable(" ) "));

        this.setColour(145);
    }
}
javascriptGenerator.forBlock['js_base_seven'] = function(block) {
    var value_input = javascriptGenerator.statementToCode(block, 'DO' );
    return "(" +  value_input  + ")";
};

3.5.属性 Field

在 args# 数组内定义的特定类型对象

  • type (string): 字段类型，如 'field_input', 'field_dropdown', 'field_label_serializable'。
  • name (string): 字段的变量名，在生成代码时使用。
  • text (string): 显示的默认文本（对于某些字段类型）。
  • options / params (Array): 选项列表（对于下拉菜单等字段类型）。

3.5.1.field_input

可编辑的文本输入字段。

3.5.1.1.json

在这里插入图片描述

 var textInputOneJson = {
     "type": "sql_test_input_one",
     "message0": " input one %1",
     "args0": [
         {
             "type": "field_input",
             "name": "TEXT",
             "text": "默认文本"
         }
     ],
     "colour": 60,
 };

javascriptGenerator.forBlock['sql_test_input_one'] = function(block) {
    var text = block.getFieldValue('TEXT');
    // 返回生成的代码字符串，这里假设输出就是用户输入的文本
    return 'input one : "' + text.replace(/"/g, '\\"') + '"';
};

Blockly.Blocks['sql_test_input_one'] = {
    init: function() {
        this.jsonInit(textInputOneJson);
        let thisBlock = this;
    }
};
3.5.1.2.js

new Blockly.FieldTextInput("name")

在这里插入图片描述

      Blockly.Blocks['js_field_one'] = {
        init: function () {
          this.appendDummyInput()
              .appendField(new Blockly.FieldLabelSerializable("名称"), "TEXT_NAME")
              .appendField(new Blockly.FieldTextInput("name"), "TEXT_INPUT");

          this.setColour(85);
        }
      }
      javascriptGenerator.forBlock['js_field_one'] = function(block) {
        var text = block.getFieldValue('TEXT_INPUT');
        return "名称 : " +  text  ;
      };

3.5.2.field_Number

3.5.2.1.json

“value”: 1, “min”: 0, “max”: 100, “precision”: 1

初始值、最小值、最大值和精度

在这里插入图片描述

 var textInputThreeJson = {
        "type": "sql_test_input_three",
        "message0": " input three %1",
        "args0": [
          {
            "type": "field_Number",
            "name": "NUMBER",
            "value": 1,
            "min": 0,
            "max": 100,
            "precision": 1
          }
        ],
        "colour": 60,
      };

      javascriptGenerator.forBlock['sql_test_input_three'] = function(block) {
        var number = block.getFieldValue('NUMBER');
        // 生成计算平方的JavaScript代码
        var code = 'Math.pow(' + number + ', 2)';
        // 返回生成的代码
        return code;
      };

      Blockly.Blocks['sql_test_input_three'] = {
        init: function() {
          this.jsonInit(textInputThreeJson);
          let thisBlock = this;
        }
      };
3.5.2.2.js

在这里插入图片描述

Blockly.Blocks['js_field_two'] = {
    init: function () {
        this.appendDummyInput()
            .appendField(new Blockly.FieldNumber(0), "NUM_INPUT");
        this.setOutput(true, "Number");
        this.setColour(85);
    }
}
javascriptGenerator.forBlock['js_field_two'] = function(block) {
    var text = block.getFieldValue('NUM_INPUT');
    return  [ text ,  javascriptGenerator.ORDER_ATOMIC ];
};

3.5.3.field_dropdown

3.5.3.1.json

在这里插入图片描述

 var textInputTwoJson = {
     "type": "sql_test_input_two",
     "message0": " input Two %1",
     "args0": [
         {
             "type": "field_dropdown",
             "name": "TEXT",
             "options":[
                 ["狗", "Dog"],
                 ["猫", "Cat"],
                 ["大象", "Elephant"]
             ]
         }
     ],
     "colour": 60,
 };

javascriptGenerator.forBlock['sql_test_input_two'] = function(block) {
    var value_name =     block.getFieldValue('TEXT');
    // 返回生成的代码字符串
    return  ' input Two ' + value_name  ;
};

Blockly.Blocks['sql_test_input_two'] = {
    init: function() {
        this.jsonInit(textInputTwoJson);
    }
};
3.5.3.2.js

在这里插入图片描述

  Blockly.Blocks['js_field_three'] = {
        init: function () {
          var options = [
            ['选项1', 'option1'],
            ['选项2', 'option2'],
            ['选项3', 'option3']
          ];

          this.appendDummyInput()
              .appendField(new Blockly.FieldDropdown(options), 'SELECTED_OPTION');
          this.setOutput(true, 'String'); // 输出类型为字符串

          this.setColour(85);
        }
      }
      javascriptGenerator.forBlock['js_field_three'] = function(block) {
        var selectedOption = block.getFieldValue('SELECTED_OPTION');
        // 生成的代码基于用户选择的选项
        var code = `'${selectedOption}'`;
        return [code, javascriptGenerator.ORDER_ATOMIC];
      };
春哥的魔法书
关注
  • 13
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【Blockly开发教程】02 配置你的blockly：inject方法
Bright的博客
05-15 876
通过本文章，你将收获以下信息： - 分析Blockly对象的来源、作用。 - Blockly.inject的作用、参数说明。 - 通过inject自定义Blockly编辑器界面。
【Blockly开发教程】04 vue3 blockly项目
Bright的博客
05-17 1180
通过阅读本文，你将了解如何在Vue3项目中引入Blockly模块、初始化、自定义积木块、自定义转代码。
blockly -- 定义块
wolf
01-10 3176
定义块 块定义描述了块的外观和行为，包括文本，颜色，形状以及它可以连接的其他块。 定义自定义块后，每个平台都会以不同的方式加载这些定义，详细信息请参见网络和Android特定配置指南。 JSON格式与JavaScript API Blockly有两种定义块的方式：JSON对象和JavaScript函数。JSON格式是跨平台的，因此可以使用相同的代码在Web，Android和iO...
Vue实现图形化积木式编程(十二)
温温温B的博客
07-23 929
执行Blockly生成代码
blockly的积木转C++
03-17
2. **定义积木类型**：根据需要，自定义积木的类型，如函数、循环、条件判断等，每个积木类型对应特定的编程语句。 3. **配置积木生成的代码**：定义每个积木块在转换为C++代码时的规则，这通常通过编写`Blockly....
lego_blockly:使用Web bolckly编程lego mindstorm RXC 2.0
05-09
此外，lego_blockly项目还允许进行更高级的定制，比如扩展积木块库以支持特定的传感器或功能，或者自定义界面外观以适应不同教学场景的需求。这对于教育者来说是一个非常有价值的工具，因为它不仅可以激发学生的兴趣...
blockly-nelua:生成 Nelua 的 Blockly！
07-24
Blockly是Google开发的一个开源库，用于创建可自定义的图形化编程工具，而Nelua则是一种静态类型的、面向系统的Lua方言，旨在提升性能和安全性。通过`Blockly-Nelua`，用户可以通过拖放编程块来编写Nelua代码，降低...
Scratch 联机探索游戏：世界
01-12
角色数量：39，素材数量：342，积木数量：4027，音频数量：62 欢迎来到世界.探索冰雪世界、炎热的沙漠、草地、糖果仙境、天空、洞穴，最后是海洋。在旅途中收集硬币，在商店购买物品，这些物品都有特殊的力量。找到...
Scratch 探索游戏：毒液.sb3
01-21
角色数量：12，素材数量：492，积木数量：1491，音频数量：53 【WASD / ↑↓←→】移动跳跃，【鼠标单击】射击。 此后仍有作品或有趣游戏，可以进行学习与借鉴。请关注作者，且点赞加收藏，记得推荐好友。下载即可...
JavaScript青少年简明教程：函数及其相关知识（下）
最新发布
cnds123的专栏
07-26 463
JavaScript青少年简明教程：函数及其相关知识（下）
HarmonyOS应用开发者高级认证，Next版本发布后最新题库 - 多选题序号4
Gusha_的博客
07-23 1284
HarmonyOS应用开发者高级认证最新题库，编写于2024年7月19日，Next版本发布之后
【React 】开发环境搭建详细指南
lph159的博客
07-24 1069
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
已解决：vue-office/excel 多个sheet点击切换，滚动条高度不重置，表格视图位置不正确
weixin_42289080的博客
07-26 154
解决 @vue-office/excel 多个sheet切换，内容以及滚动条展示不正确的问题
vue el-select的下拉树形结构 带检索功能
Jokerxiuka的博客
07-26 101
【代码】vue el-select的下拉树形结构。
Angular由一个bug说起之八：实践中遇到的一个数据颗粒度的问题
KenkoTech的博客
07-24 635
之所以使用这种比较直接的方式是因为项目中的数据类型已经确定，而且对数字的处理逻辑没有统一在一个文件中。这是大型项目经常遇到的问题，起到相同作用的代码因为一些小的差别而分别写在管理各自功能的文件里。文件存入数据库，这样我们就可以统一维护一个表，不管是前端来处理数据还是后端来处理都能遵守相同的规则。针对这篇文章提到的数字缩写的问题，可以有两种处理方案。来展示数据的功能，这些数据根据不同的类型和单位会为其加上前缀、后缀或者省略小数。
el-menu根据多层树形结构递归遍历展示菜单栏
m0_62317155的博客
07-23 918
el-menu根据多层树形结构递归遍历展示菜单栏
爬虫基本原理入门
RHeng的博客
07-25 816
爬虫（Web Crawler），又称为网络爬虫或网页蜘蛛，是一种按照一定的规则，自动地抓取万维网信息的程序或者脚本。它们可以模拟浏览器行为，遍历网页并抓取网页中的信息，如文本、图片、链接等。接下来，我们会尝试使用Python等编程语言，结合相关库和工具，动手编写自己的爬虫程序，探索更多关于爬虫技术的奥秘。
typescript中type和interface有什么区别，如何选择？
闻人放歌的三寸青草园圃
07-23 154
【代码】typescript中type和interface有什么区别，如何选择？
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值