可视化编程 blockly 入门

 <script src="blockly_compressed.js"></script>
  <script src="blocks_compressed.js"></script>
  <script src="javascript_compressed.js"></script>//支持javascript代码转化
  <script src="msg/js/en.js"></script>//支持的语言，并存放blockly 工作区用到的工具的描述

 

将blockly里的模块转化为不同语言的代码

 

 

Blockly.JavaScript.workspaceToCode()
Blockly.Python.workspaceToCode()
Blockly.Dart.workspaceToCode()

 

设定blockly工作区的基本属性， grid 坐标点的设定，rtl 工作区展示方式false为居坐显示;media 静态资源位置

 

 Blockly.inject(document.getElementById('content_blocks'),//工具要展示的位置
      {grid:
          {spacing: 25,
           length: 25,
           colour: 'red',
           snap: false},
       media: '../../media/',
       rtl: false,
       toolbox: document.getElementById('toolbox')//工具的xml的页面元素
     }
   );

 

清空workspace

 

Blockly.mainWorkspace.clear();

 

获取工作区所有模块,返回模块集合数组

 

   Blockly.mainWorkspace.getAllBlocks()

 

MSG用了储存工作区所需文字的区域

 

eval(Blockly.JavaScript.workspaceToCode())

 执行编译后的代码

 

自定义自己的blockly

 

Blockly.Msg.TEXT_CONSOLE_HELPURL = "";//帮助网址
Blockly.Msg.TEXT_CONSOLE_TITLE = "console %1";定义模块上的显示文字
Blockly.Msg.TEXT_CONSOLE_TOOLTIP = "console the specified text, number or other value.";


Blockly.Blocks.text_console = {init: function () {
    this.setHelpUrl(Blockly.Msg.TEXT_CONSOLE_HELPURL);//右键help连接网址
    this.setColour(Blockly.Blocks.texts.HUE);//定义颜色，用数值表示
    this.interpolateMsg(Blockly.Msg.TEXT_CONSOLE_TITLE, ["TEXT", null, Blockly.ALIGN_RIGHT], Blockly.ALIGN_RIGHT);
    this.setPreviousStatement(!0);//设定模块的图形的缺口或突起，其实就是设定程序的流程
    this.setNextStatement(!0);//同上
    this.setTooltip(Blockly.Msg.TEXT_CONSOLE_TOOLTIP)//鼠标停留后使用提示
}};
//定义模块的图形样子，如果感觉比较麻烦可以在一直的blockly 找到近似的然后在修改

Blockly.JavaScript.text_console = function (a) {
    return"console.log(" + (Blockly.JavaScript.valueToCode(a, "TEXT", Blockly.JavaScript.ORDER_NONE) || "''") + ");\n"
};//定义模块所代表的代码,如果感觉比较麻烦可以在一直的blockly 找到近似的然后在修改

 

自定义官方讲解 https://developers.google.com/blockly/custom-blocks/defining-blocks#sethelpurl