如何使用Javascript创建Blockly块的实例？

Question

我Blockly在一个customBlocks.js文件中完成了以下块:

Blockly.Blocks['move_right'] = {
  init: function() {
    this.appendValueInput("PIXELS")
        .setCheck("Number")
        .appendField("move to right");
    this.setInputsInline(true);
    this.setPreviousStatement(true, null);
    this.setNextStatement(true, null);
    this.setColour(290);
    this.setTooltip('');
    this.setHelpUrl('http://www.example.com/');
  }
};

Blockly.JavaScript['move_right'] = function(block) {
  var value_pixels = Blockly.JavaScript.valueToCode(block, 'PIXELS', Blockly.JavaScript.ORDER_ATOMIC);
  // TODO: Assemble JavaScript into code variable.
  var codeMoveRight = "$(\"#moveDiv\").animate({\n " + 
                        "left: \"+=" + value_pixels + "px\"\n" +
                      "},1000);\n";  
  return codeMoveRight;
};

div根据您在其上设置的像素数向右移动.您将不得不在math_number块内放置一个块move_right来放置您想要移动它的像素数量.

我在我的html文件上有一个workspace注入的变量Blockly workspace:

var workspace = Blockly.inject('blocklyDiv',
              {toolbox: document.getElementById('toolbox')});

我想做的事

它是在块中已经显示块的一次,而不是之前,从JavaScript中检索这一数量的像素.

我试过了什么

• 我直接尝试workspace从我的浏览器(谷歌浏览器)的控制台访问该变量,并可以获得"子块"但不是它们的价值.如下:

  console.log(workspace.topBlocks_[0].childBlocks_);
  

• 我还尝试将工作区转换为dom,然后转换为文本:

  var xml = Blockly.Xml.workspaceToDom(workspace);
  var xml_text = Blockly.Xml.domToText(xml); 
  console.log(xml_text);
  

  在这里我可以看到"子块"的价值,我的意思是,math_number块,它存储在文本中,但我不知道如何得到它.

为什么我要实现这一目标？

因为我想要的是检查用户是否向右移动了300像素.如果是这样,那么我将展示一条消息,其中我将把"你得到它!".

我的问题

是否可以创建我已放置在工作区上的该块的实例,然后使用该实例访问其像素值？

编辑:

我也可以获得left@Oriol所说的价值:

$('#moveDiv').css('left');

但是我没有把它放在这里,因为它使用了一个属性Jquery(它根本不重要,因为它也是一个很好的选择,但不是预期的).我的目的是得到的一个实例Block把它放在后Blockly workspace在以后的任何时间与它进行操作.

提前致谢!

Answer 1

有一个方法setWarningText来显示这种警告.你可以修改yor生成器,如下所示:

Blockly.JavaScript['move_right'] = function(block) {
    var value_pixels = Blockly.JavaScript.valueToCode(block, 'PIXELS', Blockly.JavaScript.ORDER_ATOMIC);
    // TODO: Assemble JavaScript into code variable.
    var codeMoveRight = "$(\"#moveDiv\").animate({\n " + 
                    "left: \"+=" + value_pixels + "px\"\n" +
                  "},1000);\n";

    // You can show a blockly warning
    if( value_pixels >= 300 ) block.setWarningText("You get it!");

    // Or you can store its value elsewere...
    // myExternalVar = value_pixels;

    return codeMoveRight;
};

这将在块本身中显示为警告图标.

在任何情况下,如果你想"记住"这个value_pixels变量,我相信更简单的方法是在生成器中执行它,如上所示.您始终可以将其存储在可从自定义函数访问的外部var中.

编辑:

如果您需要遍历块结构用于其他目的,您可以使用:

• Blockly.mainWorkspace.getTopBlocks(真); //获取顶级块
• 对顶级阻止列表的迭代
• block = block.nextConnection && block.nextConnection.targetBlock(); //"下降"到块的子块中,然后迭代它们
• if(block.type =="move_right") ... //检查特定的块类型

我希望这会给出一个起点,但了解这些"技巧"的最佳方法是阅读Blockly源代码.即使代码通常被很好地评论,AFAIK也无法自动生成文档,也无法在Web上使用.