javascript - 如何使用 Javascript 创建 Blockly block 的实例？

Question

我在 customBlocks.js 文件中使用 Blockly 完成了以下 block :

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 移动到右侧。您必须在 move_right block 中放置一个 math_number block ，以放置您想要移动的像素数量。

我的 html 文件中有一个 workspace 变量，它注入(inject)了 Blockly workspace:

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

我想做什么

它是在 block 显示在 Blockly 的工作区上时从 JavaScript 中检索此数量的像素，而不是之前。

我尝试过的

• 我直接尝试从我的兄弟 (Google Chrome) 的控制台访问 workspace 变量，并且可以获得“子 block ”但不是它们的值。如下:

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

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

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

  在这里我可以看到“子 block ”的值，我的意思是 math_number block ，它存储在文本中，但我不知道如何获取它。

我为什么要实现它？

因为我想要的是检查用户是否向右移动了 300 像素。如果是这样，那么我将显示一条消息，其中我将输入“你明白了!”。

我的问题

是否可以创建我放在工作区中的那个 block 的实例，然后使用该实例访问它的像素值？

编辑:

我也可以获得 left 值，正如@Oriol 所说:

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

但我没有把它放在这里，因为它使用了 Jquery 的一个属性(这根本不重要，因为它也是一个不错的选择，但不是预期的那样)。我的目的是将 Block 的实例放在 Blockly workspace 上，以便以后随时使用它进行操作。

Answer 1

有一种方法setWarningText 可以显示这种警告。您可以按如下方式修改您的生成器:

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;
};

这将在 block 本身中显示为警告图标。

无论如何，如果您想“记住”这个value_pixels 变量，我相信更简单的方法是在生成器中完成，如上所示。您始终可以将其存储在可从自定义函数访问的外部变量中。

编辑:

如果出于其他目的需要遍历 block 结构，可以使用:

• Blockly.mainWorkspace.getTopBlocks(true);//获取顶层 block
• 顶级阻止列表的迭代
• block = block.nextConnection && block.nextConnection.targetBlock();//“下降”到 block 的子 block ，然后迭代它们
• if(block.type=="move_right") ...//检查特定的方 block 类型

我希望这能提供一个起点，但了解这些“技巧”的最佳方式是阅读 Blockly 源代码。即使代码通常有很好的注释，AFAIK 也没有办法自动生成文档，而且它在网络上也不可用。